Question

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

Answer 1

对于遇到同样错误的人，我的情况是我在导入部分中有双重逗号

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

Answer 2

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

在模块A中：$soundcloud = Soundcloud::firstOrNew(['artist_name' => $artist, 'link' => $url]); $soundcloud->save(); $event->soundclouds()->sync([$soundcloud->id], false);

在模块B中：imports[ModuleB]

Answer 3

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

缺少逗号

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

双逗号

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

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

Answer 4

我遇到了这个错误，因为我的应用根目录中有一个导出index.ts的{{1}}文件。所以我想我可以做到以下几点：

app.component.ts

这有效并且没有给我任何红色波浪线，甚至intellisense在你开始输入时会调出AppComponent。但是来发现它导致了这个错误。我把它改成后：

import { AppComponent } from './';

错误消失了。

Answer 5

上述解决方案均不适合我，只需停止并运行＆＃34; ng serve＆＃34;试。

Answer 6

我遇到了同样的问题。在我的情况下，原因是额外的逗号。

Answer 7

确保不要导入这样的模块/组件：

import { YOUR_COMPONENT } from './';

但它应该是

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

Answer 8

这个循环依赖两个模块的问题

模块1：导入模块2
第2单元：导入模块1

Answer 9

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

Answer 10

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

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

Answer 11

您必须从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
  ]

Answer 12

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

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

就我而言，事实证明这是一个循环依赖，我通过使用工具madge找到了它。通过运行

找到包含循环依赖的文件

npx madge --circular --extensions ts src/

Answer 13

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

就我而言，它是由WebStorm引起的，将两个导入合并为一个。

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

我将其解压缩为两个单独的导入

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

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

Answer 14

问题是至少有一个导入文件丢失了。

例如，我在使用

时遇到了同样的错误

   select case
when (A+B<=C or B+C<=A or A+C<=B) then 'Not A Triangle'
when (A=B and B=c) then 'Equilateral'
when (A=B AND C<>B)or(B=C AND C<>A)or(A=C AND A<>B) then 'Isosceles'
else 'Scalene'
end as triangle_type
from TRIANGLES;

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

我删除了此导入，错误消失了。

Answer 15

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

有了这个，所有的问题都消失了。

Answer 16

就我而言，我将 ngrx 的 provideMockStore() 放入测试模块的 'imports' 而不是 'providers' 数组。

Answer 17

对我来说，我只是做了 CTRL + C 和是。
然后我重新启动

ionic serve

这对我有用。

Answer 18

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

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

这太可怕了，我很幸运它没有花费我更长的时间。希望这有助于某人。

Answer 19

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

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

例如改变了：

mshift

为：

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

Answer 20

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

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

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

Answer 21

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

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

替换

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

此外，不要导出默认类。

Answer 22

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

我遇到了错误：

<script type="text/javascript">
window.onload = function(){
$(function() {
  $("#contracttype").change(function() {
    if ($("#for-rent").is(":selected")) {
      $("#prop-terms").show();
    } else {
      $("#prop-terms").hide();
    }
  }).trigger('change');
});
</script>

将其更改为：

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

Answer 23

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

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

index.ts包含导出语句

    export * from './models';

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

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

它解决了。

Answer 24

最有可能的错误与AppModule.ts文件有关。

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

即使AppModule文件中的所有内容都正确并且您仍然收到错误，然后停止正在运行的角度实例并再次重新启动它。如果模块文件中的所有内容都正确并且您仍然收到错误，那么这可以解决您的问题。

Answer 25

未使用＆＃34; 私人http：Http ＆＃34; app.component.ts 的构造函数中的参数导致了我同样的错误，它在删除构造函数的未使用参数时解决了

Answer 26

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

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

产生的错误：

已声明输入，但永远不会读取它的值

注释掉它，不会发生错误：

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

Answer 27

在这种情况下，我遇到了这个问题： - 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。

Answer 28

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

导入声明没有显示错误，但声明确实出错了，这误导了我。

Answer 29

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

然后按照建议从

更改为

import { SearchComponent } from './';

到

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

Answer 30

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

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

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

Answer 31

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

您将看到一个警告，指向循环依赖项

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

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

Answer 32

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

将新组件发送到另一个组件时，重新启动“ ng serve”也可以，编译器可能无法识别您的新组件，只需重新启动“ ng serve”即可。

这在几分钟前对我有用。

错误：意外的值＆＃39; undefined＆＃39;由模块导入

32 个答案: