错误：模块导入了意外的值“ 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'

以我为例，这是一个循环依赖，我通过使用madge工具发现了它。通过运行找到包含循环依赖项的文件

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;

现在，当我在ngModule属性上使用imports语句时，我只是使用：

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

此后，它将正常工作。

如果您的索引导出一个模块-该模块不应从同一索引中导入其组件，则应直接从components文件中导入它们。

我遇到了这个问题，当我从使用索引导入模块文件中的组件更改为使用直接文件导入组件时，此问题得到解决。

例如更改：

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 { }

因为exports是空数组，并且之前有，所以应将其删除。

我遇到了同样的问题，我将该组件添加到文件夹a = of的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。

import语句没有显示错误，但是声明却显示了错误，这误导了我。

app.component.ts的构造函数中未使用的“ private http：Http ”参数导致了我同样的错误，并且在删除了构造函数的未使用参数后解决了该问题

该错误很可能与AppModule.ts文件有关。

要解决此问题，请检查是否声明了每个组件，并将我们声明的每个服务都放在提供程序中。

即使在AppModule文件中一切似乎都正确，并且仍然出现错误，请停止运行的angular实例，然后再次重新启动它。如果模块文件中的所有内容都正确并且仍然出现错误，则可能会解决您的问题。

对我来说，问题是通过更改导入顺序来解决的：

我遇到的一个错误：

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

更改为：

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

上面的解决方案不适用于我。

所以我为1.4.4支持了1.6.4的angular-cli版本，这解决了我的问题。

我不知道这是否是最好的解决方案，但是现在，这对我有用

我面临着同样的问题。问题是我正在从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。