错误:找不到“AppModule”

时间:2016-10-25 20:48:28

标签: angular typescript

我正在构建一个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未捕获错误:未找到“AppModule”的NgModule元数据。

我该如何解决这个问题?

更新

我的代码现在看起来像这样,但仍会生成错误:

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 个答案:

答案 0 :(得分:3)

至少在你的代码中有三个错误。

首先 - 你是bootstraping组件,这是错误的 - 你应该引导模块,在你的情况AppModuleAppModule你应该选择要去的组件被引导。

第二次 - 您指定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);