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

Я получаю эту ошибку после перехода на NgModule, ошибка не слишком помогает, пожалуйста, какой-нибудь совет?

Error: Error: Unexpected value 'undefined' imported by the module 'AppModule'
        at new BaseException (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:5116:27)
        at eval (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:13231:35)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:13215:48)
        at RuntimeCompiler._compileComponents (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15845:51)
        at RuntimeCompiler._compileModuleAndComponents (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15769:41)
        at RuntimeCompiler.compileModuleAsync (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15746:25)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:9991:29)
        at PlatformRef_.bootstrapModule (http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:9984:25)
        at Object.eval (http://localhost:5555/app/main.js:8:53)
    Evaluating http://localhost:5555/app/main.js
    Error loading http://localhost:5555/app/main.js "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ contracts:142ZoneDelegate.invoke @ zone.js?1472711930202:332Zone.run @ zone.js?1472711930202:225(anonymous function) @ zone.js?1472711930202:586ZoneDelegate.invokeTask @ zone.js?1472711930202:365Zone.runTask @ zone.js?1472711930202:265drainMicroTaskQueue @ zone.js?1472711930202:491ZoneTask.invoke @ zone.js?1472711930202:435

app.module.ts:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { APP_BASE_HREF } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './app.component';
    import { routes } from './app.routes';

    import { provide } from '@angular/core';

    //dgf ng2-translate
    import { TRANSLATE_PROVIDERS, TranslateLoader, TranslateStaticLoader, MissingTranslationHandler } from 'ng2-translate/ng2-translate';
    import { HTTP_PROVIDERS, Http } from '@angular/http';
    import { FormsModule,ReactiveFormsModule } from '@angular/forms';
    import { TranslationNotFoundHandler } from './shared/common/TranslationNotFoundHandler';
    //dgf ng2-translate END

    import {CalendarModule,DataTableModule,DialogModule,PanelModule} from 'primeng/primeng';

    import {TranslateModule} from 'ng2-translate/ng2-translate';

    import { AuthGuard,AppConfigService,AppConfig,DateHelper,ThemeComponent,ToolbarComponent, RemoveHostTagDirective } from './index';
    import { HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent } from './index';


@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), /* AboutModule, HomeModule, SharedModule.forRoot()*/
          FormsModule,
          ReactiveFormsModule,
          //third-party
          ,TranslateModule.forRoot() //,
          //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(TranslateLoader, { //DGF ng2-translate
          useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
          deps: [Http]
      }),
    provide(MissingTranslationHandler, { useClass: TranslationNotFoundHandler }), //DGF ng2-translate

    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

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

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

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

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

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

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

1. Пропущенные запятые

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

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

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

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

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

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

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

import { AppComponent } from './';

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

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

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

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

import { YOUR_COMPONENT } from './';

Но так должно быть

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

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

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

Я создаю библиотеку компонентов и получаю эту ошибку в своем приложении, которое импортирует указанную библиотеку. При запуске 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';

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

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

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

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

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

npx madge --circular --extensions ts src/

Вам нужно удалить строку import { provide } from '@angular/core';из app.module.tsas, 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
  ]

Просто поместите провайдера в 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 модуля, которые как-то глубоко в структуре используют друг друга. Я столкнулся с той же проблемой с круговыми зависимостями с 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')
    ],
....

С этим все проблемы решены.

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

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

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

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

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

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

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

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

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

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

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

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

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

Я удалил этот импорт, и ошибка исчезла.

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

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

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

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

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

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

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

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

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

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';

Другой причиной может быть такой код:

import { NgModule } from '@angular/core';
import { SharedModule } from 'app/shared/shared.module';
import { CoreModule } from 'app/core/core.module';
import { RouterModule } from '@angular/router';
import { COMPANY_ROUTES } from 'app/company/company.routing';
import { CompanyService } from 'app/company/services/company.service';
import { CompanyListComponent } from 'app/company/components/company-list/company-list.component';

@NgModule({
    imports: [
        CoreModule,
        SharedModule,
		RouterModule.forChild(COMPANY_ROUTES)
    ],
    declarations: [
		CompanyListComponent
    ],
    providers: [
		CompanyService
    ],
    exports: [
    ]
})
export class CompanyModule { }

Поскольку экспорт - это пустой массив, и перед ним его следует удалить.

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

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

import { SearchComponent } from './';

к

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

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

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

заменить

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

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

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

Оператор импорта не показал ошибки, но объявление показало, что ввело меня в заблуждение.

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

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

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

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

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

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

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

Изменил это на:

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

Приведенные выше решения не помогли мне.

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

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

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

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

index.ts содержит инструкцию экспорта

    export * from './models';

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

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

и это разрешилось.

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

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

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

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

Закомментируйте, и ошибки не возникнет:

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

Я встретил эту проблему в ситуации: - 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.