错误：模块导入的意外值“未定义”答案

【问题标题】：Error: Unexpected value 'undefined' imported by the module错误：模块导入的意外值“未定义”
【发布时间】：2017-01-08 23:39:29
【问题描述】：

我在迁移到 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 { }

【问题讨论】：

当我有两个模块都相互导入时遇到了这个问题
我遇到了同样的问题，重新启动编辑器有帮助。它无法识别新添加的文件。
还有谁认为像这样的错误应该让我解释更多？
我收到此错误是因为导入数组中有一个空条目：, ,

标签： angular

【解决方案1】：

对于面临同样错误的任何人，我的情况是我在导入部分中有双逗号

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

【讨论】：

对我来说这是一个点 (.)

【解决方案2】：

确保模块不会相互导入。所以，不应该有

在模块 A 中：imports[ModuleB]

在模块 B 中：imports[ModuleA]

【讨论】：

有时它们可能会相互引用，即使它们仅用作类型。在这种情况下，将它们导入为type，例如：import type {XYZ} from './xyz'。这样做解决了我的问题。

【解决方案3】：

这可能是由多种情况引起的，例如

缺少逗号

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

双逗号

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

从模块中不导出任何内容
语法错误
拼写错误
对象、数组中的分号
导入语句不正确

【讨论】：

不错的总结。如果 Angular 可以提供一些关于模块加载失败的位置和方式的信息，那就太好了。就目前而言，它是调试最繁琐的事情之一。不确定我是否理解“缺少逗号”位，那应该可以编译吗？
我了解缺少逗号部分 - 签出 app.module.ts 文件 - 导入：、提供者：、声明...等数组集 - 在提到的字符串值列表中，确保逗号是额外的或丢失...我通过删除多余的逗号解决了这个问题！ @Ignatius Andrew ......你是上帝！ Angular 2/4 相当古怪！

【解决方案4】：

我遇到了同样的问题。就我而言，原因是多了一个逗号。

【讨论】：

这么多年过去了…… THX

【解决方案5】：

以上解决方案都不适合我，只是简单地停止并再次运行“ng serve”。

【讨论】：

哈哈是的，我也是。当你搞乱路由时，有时 Angular 需要重新启动。在模块之间移动重要的核心导入或导出也是如此。
典型问题，在几种情况下。 Angular 团队应该致力于此。
对我来说也一样。 Angular 应该可以解决这个问题。浪费我的时间：/
对我来说是circular dependency

【解决方案6】：

我遇到此错误是因为我的应用程序根目录中有一个index.ts 文件正在导出我的app.component.ts。所以我想我可以做到以下几点：

import { AppComponent } from './';

这很有效，并且没有给我任何红色的波浪线，甚至当你开始输入它时，智能感知也会调出 AppComponent。但后来发现它导致了这个错误。在我将其更改为：

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

错误消失了。

【讨论】：

我认为当你明确写'./index'时也有效。我们在结合 AoT 和 ng-packagr 时遇到了这个问题。

【解决方案7】：

确保您不应该像这样导入模块/组件：

import { YOUR_COMPONENT } from './';

但应该是的

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

【讨论】：

【解决方案8】：

本期两个模块的循环依赖问题

模块 1：导入模块 2
模块二：导入模块一

【讨论】：

【解决方案9】：

在尝试编译 Angular 5 应用程序时遇到同样的异常。

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

在我的情况下，我发现这是一个循环依赖，我使用工具madge 发现了它。通过运行找到包含循环依赖的文件

npx madge --circular --extensions ts src/

【讨论】：

【解决方案10】：

我正在构建一个组件库，并开始在我正在导入该库的应用程序中收到此错误。在应用程序中运行 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';

它在所有版本中都运行良好，除了我描述的版本。

这太糟糕了，我很幸运没有花更长的时间。希望这对某人有所帮助。

【讨论】：

就是这样 xD 你知道如何配置智能感知以不选择错误的版本吗？
对不起，我没有。

【解决方案11】：

您必须从app.module.ts 中删除行import { provide } from '@angular/core';，因为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
  ]

【讨论】：

有道理，我已经做了，但错误还是一样

【解决方案12】：

只需将提供程序放在 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 { }

【讨论】：

【解决方案13】：

还有另一个简单的解决方案。我有 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')
    ],
....

这样所有问题都迎刃而解了。

【讨论】：

您能详细介绍一下它是如何工作的吗？例如，如何在组件中使用 DppIncludeModule？
凯特，抱歉回复晚了。我不在组件中使用模块，我将组件封装在模块中。模块一起使用。也许您在这里遇到了未定义错误的另一个问题。

【解决方案14】：

我的问题是在 index.ts 中有两次导出

删除其中一个解决了问题。

【讨论】：

天哪，这对我有用！如果您从 index.ts 导出模块并且您的模块从相同的 index.ts 导入模块组件，这似乎会导致循环加载。您应该直接从组件文件而不是从 index.html 导入到您的模块中。 TNX
故障排除。无法想象我需要多长时间才能在没有看到这个答案的情况下解决这个问题

【解决方案15】：

我遇到了这个问题，控制台上的错误确实不是描述性的。但是，如果您查看 angular-cli 输出：

你会看到一个警告，指向循环依赖

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

所以解决方案是从其中一个模块中删除一个导入。

【讨论】：

如果我需要这种循环依赖怎么办？
@RuneStar 我认为您需要将依赖项移动到更高级别的模块，然后在两个（X）模块上导入新模块。

【解决方案16】：

只要您确定自己没有做错任何事情，请终止“ng serve”并重新启动它。通过这样做，编译器完成了所有工作，并且应用程序按预期运行。以前的模块经验告诉我，要么在“ng serve”未运行时创建它们，要么在完成后重新启动终端。

当你向另一个组件发射一个新组件时，重新启动“ng serve”也可以，编译器可能没有识别你的新组件，只需重新启动“ng serve”

几分钟前这对我有用。

【讨论】：

任何想法，为什么它无法识别新组件？

【解决方案17】：

问题是至少有一个导入缺少源文件。

例如我在使用时遇到了同样的错误

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

但文件“./app-routing.module”不在给定路径中。

我删除了这个导入并且错误消失了。

【讨论】：

【解决方案18】：

我遇到了同样的错误，以上提示都没有帮助。

在我的例子中，它是由 WebStorm 引起的，将两个导入合二为一。

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

我将它提取到两个单独的导入中

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

在此之后它可以正常工作。

【讨论】：

谢谢哥们。这有帮助
上一个答案的重复：stackoverflow.com/a/49667611/1243048
@Maelig 我认为在链接的答案中这是一个有点不同的问题。我不知道这是否是一个错字，但正确的目录也有问题，一次是./models，另一次是./model

【解决方案19】：

在我的例子中，我将 ngrx 的 provideMockStore() 放入了测试模块的“imports”而不是“providers”数组中。

【讨论】：

【解决方案20】：

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

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

例如更改：

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

【讨论】：

谢谢，这是我的问题，IDE 从文件夹 ex: '/components' 导入我的库正在构建没有问题，但不能在另一个库中使用

【解决方案21】：

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

一个我得到了错误：

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

将其更改为：

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

【讨论】：

与问题无关，因为 BrowserModule 导出 CommonModule 时同时拥有它们是多余的。

【解决方案22】：

另一个原因可能是这样的代码：

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是空数组，并且在它之前有，所以应该被移除。

【讨论】：

【解决方案23】：

我遇到了同样的问题，我在文件夹的 a= 的 index.ts 中添加了组件并进行了导出。仍然弹出未定义的错误。但是 IDE 会弹出我们的任何红色波浪线

然后按照建议更改为

import { SearchComponent } from './';

到

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

【讨论】：

【解决方案24】：

我通过删除所有索引导出文件、包含管道、服务来修复它。那么所有文件导入路径都是特定路径。例如。

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

替换

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

此外，不要导出默认类。

【讨论】：

但这有什么帮助呢？删除文件名需要您分配的文件夹的 index.ts。
@MichaelBaarz 当时，reomve 索引文件帮我解决问题。但是现在，我将ng版本升级到2.4.9，这个问题就不存在了，也就是说，我可以使用index.ts文件导出参考。所以我认为这可能是 ng build 的问题
至少这是一个边缘情况，是不良包结构的结果。包裹不应该有往返。澄清包结构无论如何都会解决它。
@MichaelBaarz 是的，我同意你的看法。

【解决方案25】：

我的问题是component.ts 中的组件名称拼写错误。

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

【讨论】：

【解决方案26】：

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

【讨论】：

【解决方案27】：

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

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

即使 AppModule 文件中的一切看起来都正确并且您仍然遇到错误，请停止正在运行的 Angular 实例并再次重新启动它。如果模块文件中的所有内容都正确并且您仍然收到错误，这可能会解决您的问题。

【讨论】：

【解决方案28】：

上述解决方案对我不起作用。

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

我不知道这是否是最好的解决方案，但就目前而言，这对我有用

【讨论】：

【解决方案29】：

我也遇到了同样的问题。问题是我正在从 index.ts 导入一些类

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

index.ts 包含导出语句

    export * from './models';

我将其更改为包含实际类对象的 .ts 文件

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

它解决了。

【讨论】：

【解决方案30】：

对我来说，这个错误是由未使用的导入引起的：

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

产生的错误：

声明了输入，但它的值从未被读取

注释掉，不会出现错误：

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

【讨论】：