Ошибка: Неожиданное значение 'undefined', импортированное модулем

Ответ 1

Просто установка провайдера внутри forRoot работает: https://github.com/ocombe/ng2-translate

@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), /* AboutModule, HomeModule, SharedModule.forRoot()*/
          FormsModule,
          ReactiveFormsModule,
          //third-party
          TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
            deps: [Http]
          })
          //third-party PRIMENG
          ,CalendarModule,DataTableModule,DialogModule,PanelModule
  ],
  declarations: [
    AppComponent,ThemeComponent, ToolbarComponent, RemoveHostTagDirective,
    HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    // FormsModule,
    ReactiveFormsModule,
    { provide : MissingTranslationHandler, useClass: TranslationNotFoundHandler},
    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Ответ 2

Для тех, кто сталкивается с этой же ошибкой, моя ситуация заключалась в том, что у меня двойные запятые в разделе импорта

imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot(appRoutes), , // <-- this was the error
      // .... 
],

Ответ 3

Убедитесь, что модули не импортируют друг друга. Таким образом, не должно быть

В модуле A: imports[ModuleB]

В модуле B: imports[ModuleA]

Ответ 4

Это может быть вызвано несколькими сценариями, такими как

• Отсутствующие запятые

imports: [
    BrowserModule
   ,routing <= Missing Comma
   ,FeatureComponentsModule
  ],

2. Двойные запятые

imports: [
    BrowserModule, 
   ,routing <=Double Comma
   ,FeatureComponentsModule
  ],

3. Экспорт ничего из модуля
4. Синтаксические ошибки
5. Ошибки Typo
6. Точки с запятой внутри объектов, массивы
7. Неверные импортные заявления

Ответ 5

Ни одно из вышеперечисленных решений не работало для меня, а просто останавливалось и запускало "ng serve" снова.

Ответ 6

У меня была эта ошибка, потому что у меня был файл index.ts в корне моего приложения, которое экспортировало мой app.component.ts. Поэтому я подумал, что могу сделать следующее:

import { AppComponent } from './';

Это сработало и не давало мне красных squiggly линий, и даже intellisense воспитывает AppComponent, когда вы начинаете вводить его. Но приходите, чтобы узнать, что это вызывает эту ошибку. После того как я изменил его на:

import { AppComponent } from './app.component';

Ошибка исчезла.

Ответ 7

У меня такая же проблема. В моем случае причина в лишней запятой.

Ответ 8

Убедитесь, что вы не должны импортировать модуль/компонент следующим образом:

import { YOUR_COMPONENT } from './';

Но это должно быть

import { YOUR_COMPONENT } from './YOUR_COMPONENT.ts';

Ответ 9

Эта проблема круговых зависимостей двух модулей

Модуль 1: импорт Модуль 2
Модуль 2: импорт Модуль 1

Ответ 10

Вам нужно удалить строку import { provide } from '@angular/core'; с app.module.ts, поскольку provide устарел. Вы должны использовать provide, как показано ниже:

providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    FormsModule,
    ReactiveFormsModule,
    // disableDeprecatedForms(),
    // provideForms(),
    // HTTP_PROVIDERS, //DGF needed for ng2-translate
    // TRANSLATE_PROVIDERS, //DGF ng2-translate (not required, but recommended to have 1 unique instance of your service)
    {
        provide : TranslateLoader,
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
        deps: [Http]
    },
    {
        provide : MissingTranslationHandler,
        useClass: TranslationNotFoundHandler
    },

    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ]

Ответ 11

Моя проблема заключалась в экспорте дважды в index.ts

Удаление одного из них решило проблему.

Ответ 12

для этого есть еще одно простое решение. У меня есть 2 модуля, которые как-то глубоко в структуре, используя друг друга. Я столкнулся с той же проблемой с круговыми зависимостями с webpack и angular 2. Я просто изменил способ объявления одного модуля:

....

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        require('../navigation/navigation.module')
    ],
    declarations: COMPONENTS,
    exports: COMPONENTS
})
class DppIncludeModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DppIncludeModule
        };
    }
}

export = DppIncludeModule;

Когда я теперь использую оператор import в атрибуте ngModule, я просто использую:

@NgModule({
    imports: [
        CommonModule,
        ServicesModule.forRoot(),
        NouisliderModule,
        FormsModule,
        ChartModule,
        DppAccordeonModule,
        PipesModule,
        require('../../../unbranded/include/include.module')
    ],
....

При этом все проблемы отсутствуют.

Ответ 13

Я создаю библиотеку компонентов и начал получать эту ошибку в своем приложении, которое импортирует указанную библиотеку. При запуске ng build --prod или ng serve --aot в приложении я получаю:

Unexpected value 'undefined' imported by the module 'ɵm in node_modules/<library-name>/<library-name>.d.ts'

Но никаких ошибок при использовании ng serve или при тестировании модулей в самой библиотеке даже при построении в --prod.

Оказывается, меня тоже вводит в заблуждение intellisense. Для нескольких моих модулей я импортировал сестра-модуль как

import { DesignModule } from '../../design';

вместо

import { DesignModule } from '../../design/design.module';

Он работал отлично во всех сборках, кроме тех, которые я описал.

Это было ужасно, чтобы приколоться, и мне повезло, что это не заняло меня дольше, чем это было. Надеюсь, что это поможет кому-то.

Ответ 14

Проблема в том, что существует по крайней мере один импорт, для которого отсутствует исходный файл.

Например, я получил ту же ошибку, когда я использовал

       import { AppRoutingModule } from './app-routing.module';

Но файл './app-routing.module' не был указан по указанному пути.

Я удалил этот импорт и ошибка ушла.

Ответ 15

У меня была такая же ошибка, ни один из вышеперечисленных советов не помог.

В моем случае это было вызвано WebStorm, объединившим два импорта в один.

import { ComponentOne, ComponentTwo } from '../component-dir';

Я извлек это в два отдельных импорта

import { ComponentOne } from '../component-dir/component-one.service';
import { ComponentTwo } from '../component-dir/component-two.model';

После этого все работает без ошибок.

Ответ 16

Было то же исключение, когда пытались скомпилировать приложение Angular 5.

Unexpected value 'undefined' imported by the module 'DemoAppModule'

В моем случае оказалось, что это круговая зависимость, которую я нашел с помощью инструмента madge. Нашел файлы, содержащие циклическую зависимость, запустив

npx madge --circular --extensions ts src/

Ответ 17

Если ваш индекс экспортирует модуль - этот модуль не должен импортировать свои компоненты из одного индекса, он должен импортировать их непосредственно из файла компонентов.

У меня была эта проблема, и когда я изменил с импорта компонентов в файле модуля, используя индекс, чтобы импортировать их с помощью прямого файла, это разрешилось.

например, изменено:

import { NgModule } from '@angular/core';
import { MainNavComponent } from './index';
@NgModule({
  imports: [],
  exports: [MainNavComponent],
  declarations: [ MainNavComponent ],
  bootstrap:    [ MainNavComponent ]
})
export class MainNavModule {}

в

import { NgModule } from '@angular/core';
import { MainNavComponent } from './MainNavComponent';
@NgModule({
  imports: [],
  exports: [MainNavComponent],
  declarations: [ MainNavComponent ],
  bootstrap:    [ MainNavComponent ]
})
export class MainNavModule {}

также удалите ненужный экспорт из индекса, например:

export { MainNavModule } from './MainNavModule';
export { MainNavComponent } from './MainNavComponent';

в

export { MainNavModule } from './MainNavModule';

Ответ 18

У меня была та же проблема, я добавил компонент в index.ts a = папки и сделал экспорт. По-прежнему появлялась неопределенная ошибка. Но IDE поп наши какие-то красные волнистые линии

Затем, как предложено, изменилось с

import { SearchComponent } from './';

в

import { SearchComponent } from './search/search.component';

Ответ 19

У меня была эта проблема, правда, что ошибка на консоли не является описательной. Но если вы посмотрите на вывод angular-cli:

Вы увидите ПРЕДУПРЕЖДЕНИЕ, указывающее на круговую зависимость

WARNING in Circular dependency detected:
module1 -> module2
module2 -> module1

Поэтому решение состоит в том, чтобы удалить один импорт из одного из модулей.

Ответ 20

Если вы уверены, что не делаете ничего плохого, пожалуйста, прекратите "ng serve" и перезапустите его. Таким образом, компилятор выполняет всю свою работу, а приложение работает как положено. Предыдущий опыт работы с модулями научил меня создавать их, когда "ng serve" не запущен, или перезапускать терминал, как только я закончу.

Перезапуск "ng serve" также работает, когда вы отправляете новый компонент другому компоненту, возможно, компилятор не распознал ваш новый компонент, просто перезапустите "ng serve"

Это сработало для меня всего несколько минут назад.

Ответ 21

Я исправлю это, удалив весь файл экспорта индекса, включив в него трубку, службу. то все пути импорта файлов - это конкретный путь. например.

import { AuthService } from './_common/services/auth.service';

заменить

import { AuthService } from './_common/services';

Кроме того, не экспортируйте класс по умолчанию.

Ответ 22

Моя проблема заключалась в имени компонента с ошибкой внутри component.ts.

В заявлении import не отображается ошибка, но объявление было сделано, что ввело меня в заблуждение.

Ответ 23

Неиспользуемый аргумент private http: Http "в конструкторе app.component.ts вызвал у меня такую ​​же ошибку, и он разрешил удаление неиспользуемого аргумента конструктор

Ответ 24

Скорее всего, ошибка будет связана с файлом AppModule.ts.

Чтобы решить эту проблему, проверьте, объявлен ли каждый компонент, и каждая служба, которую мы объявляем, помещается в поставщиков и т.д.

И даже если все кажется правильным в файле AppModule, и вы все равно получите сообщение об ошибке, остановите свой исполняемый экземпляр angular и снова запустите его. Это может решить вашу проблему, если все в файле модуля правильное и если вы все еще получаете ошибку.

Ответ 25

Для меня проблема была решена путем изменения последовательности импорта:

Один с ошибкой:

imports: [ 
 BrowserModule, HttpClientModule, AppRoutingModule, 
 CommonModule
],

Изменено следующим образом:

   imports: [
    BrowserModule, CommonModule, HttpClientModule,
    AppRoutingModule
  ],

Ответ 26

Решения выше не спомогли мне.

Поэтому я вернул версию angular-cli 1.6.4 для 1.4.4, и это решило мою проблему.

Я не знаю, является ли это лучшим решением, но сейчас это сработало для меня

Ответ 27

Я столкнулся с той же проблемой. Проблема заключалась в том, что я импортировал какой-то класс из index.ts

    import {className} from '..shared/index'

index.ts содержит оператор экспорта

    export * from './models';

Я изменил его на файл .ts, который содержит реальный объект класса

    import {className} from '..shared/model'

и это решено.

Ответ 28

Для меня эта ошибка была вызвана просто неиспользованным импортом:

import { NgModule, Input } from '@angular/core';

Результирующая ошибка:

Ввод объявлен, но это значение никогда не читается

Прокомментируйте это, и ошибка не происходит:

import { NgModule/*, Input*/ } from '@angular/core';

Ответ 29

Я столкнулся с этой проблемой в ситуации: - app-module --- app-routing//app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module//sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)]/ / --> should be RouterModule.forChild!

потому что есть только root.

Ответ 30

Для меня я только что сделал CTRL + C и ДА.
И я перезапускаю

ionic serve 

Это работает для меня.