TechOverflow Logo
TechOverflow

修复 Angular 错误：Unexpected value 'undefined' declared by the module

English Deutsch 简体中文

症状：

对于你的某个模块，你在加载时收到类似这样的错误消息：

error.txt
Error: Unexpected value 'undefined' declared by the module 'MyModule'
    at syntaxError (compiler.js:1021)
    at compiler.js:10623
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10621)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23876)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23817)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at core.js:4999
[...]

解决方案

首先，尝试重启 ng serve。在某些情况下，这将直接修复问题。

错误消息是由你的 @NgModule declarations: [ /* ... */ ] 中的某个元素为 undefined 引起的（错误消息中的*… declared* by the module … 应该字面理解，它在 declarations 中！）。

例如，如果你有类似这样的 @NgModule 声明：

example.module.ts
@NgModule({
  imports: [
    RecallCommonModule,
    CommonModule,
    MyRoutingModule
  ],
  declarations: [,
    MyDetailComponent,
    MySearchComponent
  ],
  providers: []
})

问题在于 declarations 行中的多余逗号：编译时，它会产生 [undefined, MyDetailComponent, MySearchComponent]。删除多余的逗号可修复问题。

此错误的另一个可能原因是 declarations 中的某个值为 undefined。

例如，如果你有类似这样的导入语句

import-my-component.js
import { MyComponent } from './my.component';

在你的模块文件中，并且由于某种原因 MyComponent 为 undefined，这将导致相同的错误消息出现。

为了追踪 declarations 数组中的哪个组件，你可以临时在 @NgModule 之前添加类似这样的语句：

detect-undefined.js
if(MyComponent === undefined) {
  console.log("MyComponent is undefined!");
}

如果你没有上述任何问题，请按照标准程序操作： 注释掉 declarations 数组中的每个元素，看看哪个导致错误消息消失。

Check out similar posts by category: Angular, Javascript