Помилка: несподіване значення "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.

Виявляється, мене також ввів в оману інтеліссенс. Для кількох моїх модулів я імпортував сестринський модуль як

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

замість

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

Він чудово працював у всіх збірках, крім тієї, яку я описав.

Це було страшно закріпити, і мені пощастило, що це не зайняло більше часу, ніж це було. Сподіваюся, це комусь допоможе.

Мав такий самий виняток при спробі скомпілювати програму Angular 5.

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

У моєму випадку виявилося, що це була кругова залежність, яку я виявив, використовуючи інструмент мадж . Знайдено файли, що містять циклічну залежність, запустивши

npx madge --circular --extensions ts src/

Вам доведеться видалити рядок 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
  ]

Просто розміщення провайдера всередині 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

Тож рішення полягає у видаленні одного імпорту з одного з Модулів.

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

Наприклад, я отримав ту ж помилку, коли використовував

       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 папки = та здійснив експорт. Проте невизначена помилка з’являлася. Але IDE висуває наші будь-які червоні звивисті лінії

Потім як запропоновано змінили з

import { SearchComponent } from './';

до

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

Поки ви впевнені, що не робите нічого поганого, будь ласка, припиніть "ng serve" і перезапустіть його. Роблячи це, компілятор виконує всю свою роботу, і додаток працює як слід. Попередній досвід роботи з модулями навчив мене або створювати їх, коли "ng serve" не працює, або перезапустити термінал, коли я закінчу.

Перезапуск "ng serve" також працює, коли ви передаєте новий компонент іншому компоненту, можливо, компілятор не розпізнав ваш новий компонент, просто перезапустіть "ng serve"

Це працювало у мене всього кілька хвилин тому.

Я виправляю це шляхом видалення всього файлу експорту індексу, включаючи канал, службу. тоді весь шлях імпорту файлів є певним шляхом. напр.

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

замінити

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

крім того, не експортуйте клас за замовчуванням.

Моєю проблемою було неправильно написане ім'я компонента всередині component.ts.

У заяві про імпорт не було помилки, але в декларації було, що ввів мене в оману.

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

Швидше за все помилка буде пов'язана з файлом AppModule.ts.

Щоб вирішити цю проблему, перевірте, чи декларується кожен компонент, а кожна служба, яку ми заявляємо, розміщується у постачальників тощо.

І навіть якщо у файлі AppModule все здається правильно, і ви все одно отримуєте помилку, зупиніть запущений кутовий екземпляр і перезапустіть його ще раз. Це може вирішити вашу проблему, якщо все у файлі модуля правильно, і якщо ви все ще отримуєте помилку.

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

Один із я отримав помилку:

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!

тому що існує лише a root.