错误：找不到“AppModule”的 NgModule 元数据

Posted 2023-03-13

【中文标题】错误：找不到“AppModule”的 NgModule 元数据

【英文标题】：Error: No NgModule metadata found for 'AppModule'

【发布时间】：2017-03-08 01:27:55

【问题描述】：

我正在构建的 Angular 2 应用程序有问题。我一直在各个位置锻炼我的复制/粘贴技能，并消除了所有构建错误，但是当我在浏览器中启动它时，我在浏览器中出现错误。我看过this post，但它并没有解决我的问题。

我的AppModule 看起来像这样：

import  NgModule, ApplicationRef  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  FormsModule  from '@angular/forms';
import  HttpModule  from '@angular/http';
import  RouterModule  from '@angular/router';
import  ROUTES  from './app.routes';
import  HomeComponent  from '../index';

@NgModule(
  bootstrap: [ AppModule ],
  declarations: [
    AppModule,
     HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES,  useHash: true )
  ]
)
export class AppModule 

我是这样引导的：

import  platformBrowserDynamic  from '@angular/platform-browser-dynamic';
import  AppModule  from './index';

platformBrowserDynamic().bootstrapModule(AppModule);

但是在我的浏览器中，我收到了这个错误：

ng_module_resolver.js:34 Uncaught Error: No NgModule metadata found for 'AppModule'。

我该如何解决这个问题？

更新

我的代码现在看起来像这样，但仍然产生错误：

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  FormsModule  from '@angular/forms';
import  HttpModule  from '@angular/http';
import  RouterModule  from '@angular/router';
import  ROUTES  from './app.routes';
import  HomeComponent  from '../index';
import  AppComponent  from './app.component';

@NgModule( 
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot( ROUTES,  useHash: true  )
    ],
    declarations: [
        HomeComponent,
        AppComponent
    ]
 )
export class AppModule 

和引导：

import  platformBrowserDynamic  from '@angular/platform-browser-dynamic';
import  AppComponent  from './index';

platformBrowserDynamic().bootstrapModule(AppComponent);

这是我现在遇到的错误：

未捕获的错误：找不到“AppComponent”的 NgModule 元数据

这是AppComponent、引导程序、模块声明和元数据的错误吗？文档含糊不清。

【参考方案1】：

您的代码中至少存在三个错误。

首先 - 你正在引导组件，这是错误的 - 你应该引导模块，在你的情况下 AppModule 和 AppModule 你应该选择将被引导的组件。

第二个 - 您将 AppModule 指定为将要被引导的组件：

bootstrap: [ AppModule ]

你不能引导模块，你可以引导组件，例如HomeComponent。据我所知，这是您拥有的唯一组件。

第三个 - 您在其声明中添加AppModule：

declarations: [
  AppModule,
  HomeComponent
]

你根本无法做到这一点，你应该只在模块的声明中添加组件、指令和管道，即使你可以声明模块，为什么还要在其内部声明 AppModule？试试这个代码：

@NgModule(
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES,  useHash: true )
  ],
  declarations: [ HomeComponent ],
  bootstrap: [ HomeComponent ]
)

export class AppModule 

然后引导AppModule:

platformBrowserDynamic().bootstrapModule(AppModule);

【讨论】：

但是我在帖子中引用的帖子有一个标记为正确的答案。它使用模块引导应用程序。但是，Angular 文档表明引导程序将组件数组作为值。令人困惑。

@serlingpa 您确实引导了一个模块，但在该模块中，您指定了将要引导的组件 - 这是您的根组件，当您启动应用程序时将显示的第一个组件.

万岁！谢谢斯特凡。我的应用程序现在正在引导模块并按预期启动组件。不错。

@serlingpa 不客气，我编辑了我的答案，现在它已经完成了。我也强烈建议你完成官方的 Angular 2 Tour of Heroes 教程，它将帮助你理解很多现在令人困惑的事情：angular.io/docs/ts/latest/tutorial

这个答案令人困惑，因为 First 步骤“你正在引导组件，这是错误的 - 你应该引导模块”直接与 Second 步骤相矛盾“你不能引导模块，你可以引导组件。”谁能澄清一下？