错误：错误：找不到'AppComponent'的NgModule元数据

Question

我正在尝试使用Django和Angular2。我有一个工作的Django项目。我得到这个错误，而试图使用Angular2它：

Error: Error: No NgModule metadata found for 'AppComponent'.
at new BaseException (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27)
at NgModuleResolver.resolve (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:12956:27)
at CompileMetadataResolver.getNgModuleMetadata (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:13200:51)
at RuntimeCompiler._compileComponents (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51)
at RuntimeCompiler._compileModuleAndComponents (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41)
at RuntimeCompiler.compileModuleAsync (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25)
at PlatformRef_._bootstrapModuleWithZone (http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9991:29)
at PlatformRef_.bootstrapModule (http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9984:25)
at Object.eval (http://user:8000/ng/src/main.js:5:53)
at eval (http://user:8000/ng/src/main.js:17:4)
Evaluating http://user:8000/ng/src/main.js
Error loading http://user:8000/ng/src/main.js

的package.json文件的部分：

"dependencies": { 
"@angular/common": "2.0.0-rc.5", 
"@angular/compiler": "2.0.0-rc.5", 
"@angular/core": "2.0.0-rc.5", 
"@angular/forms": "0.2.0", 
"@angular/http": "2.0.0-rc.5", 
"@angular/platform-browser": "2.0.0-rc.5", 
"@angular/platform-browser-dynamic": "2.0.0-rc.5", 
"@angular/router": "3.0.0-beta.2", 
"@angular/router-deprecated": "2.0.0-rc.2", 
"@angular/upgrade": "2.0.0-rc.5", 

"systemjs": "0.19.27", 
"core-js": "^2.4.0", 
"reflect-metadata": "^0.1.3", 
"rxjs": "5.0.0-beta.6", 
"zone.js": "^0.6.12", 

"angular2-in-memory-web-api": "0.0.15", 
"bootstrap": "^3.3.6"}, 

main.ts：

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './app/app.component'; 
import {appRouterProviders} from "./app/app.route"; 
import {HTTP_PROVIDERS} from "@angular/http"; 
import {enableProdMode} from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app/app.module'; <-- Added this as per an answer below. Error is still there. 
platformBrowserDynamic().bootstrapModule(AppModule); 

app.module.ts ：

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 { AppComponent } from './app.component'; 

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

index.html：

<script> 
    window.ANGULAR_URL = "{{ ANGULAR_URL }}"; 
    System.import('/ng/src/main.js').catch(function(err){ 
     console.error(err); 
    }); 
</script> 

我已经在Django的settings.py文件中设置了ANGULAR_URL。它显示/ ng /在浏览器上。我搜索了很多，并且尝试了多次改变package.json中的依赖关系。每当我在package.json中进行更改时，我都确定我做了npm install。我已经看到许多不同版本的语法更改。如果这可能是问题，这里是我使用的npm和节点版本： npm 4.1.1和node v4.8.3。我在端口上运行的Django 8000

app.component.ts文件：

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
@Component({ 
selector: 'my-app', 
template: ` 
    <h1>My First Angular 2 App</h1> 
    <nav> 
     <a routerLink="/component1" routerLinkActive="active">Component 1</a> 
     <a routerLink="/component2" routerLinkActive="active">Component 2</a> 
    </nav> 
    <router-outlet></router-outlet> 
`, 
directives: [ROUTER_DIRECTIVES] 
}) 
export class AppComponent { } 

UPDATE-1

的package.json文件的

脚本部分：

"scripts": { 
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 
"docker-build": "docker build -t ng2-quickstart .", 
"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart", 
"pree2e": "npm run webdriver:update", 
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first", 
"lint": "tslint ./app/**/*.ts -t verbose", 
"lite": "lite-server", 
"postinstall": "typings install", 
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 
"test-once": "tsc && karma start karma.conf.js --single-run", 
"tsc": "tsc", 
"tsc:w": "tsc -w", 
"typings": "typings", 
"webdriver:update": "webdriver-manager update" 
}, 

顺便说一下，我一直在关注this以使用Angular和Django。

UPDATE-2

我刚刚意识到我tsconfig.json和typings.json不在同一个地方。我把这两个放在package.json存在的地方。现在，我收到以下错误：

error TS5023: Unknown compiler option 'lib'.

UPDATE-3

tsconfig.json文件：

{ 
"compilerOptions": { 
"target": "es5", 
"module": "commonjs", 
"moduleResolution": "node", 
"sourceMap": true, 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"lib": [ "es2015", "dom" ], 
"noImplicitAny": true, 
"suppressImplicitAnyIndexErrors": true 
} 
} 

而且我tsc -v给Version 2.1.5。现在我已将"typescript": "^1.8.10",更改为"typescript": "^2.1.5"。因此，在更新中提到的错误-2我不在那里，但它显示了这一点：

Error: TypeError: Cannot read property 'forRoot' of undefined

Error: TypeError: Cannot read property 'forRoot' of undefined
at Object.eval (http://user:8000/ng/src/app/app.module.js:22:114)
at eval (http://user:8000/ng/src/app/app.module.js:29:4)
at eval (http://user:8000/ng/src/app/app.module.js:30:3)
at eval (anonymous)
Evaluating http://user:8000/ng/src/app/app.module.js
Evaluating http://user:8000/ng/src/main.js
Error loading http://user:8000/ng/src/main.js

Answer 1

你是不是在你的main.ts.进口AppModule而且你可能会引导AppComponent这会导致你看到的错误。

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app/app.module'; 
import {appRouterProviders} from "./app/app.route"; 
import {HTTP_PROVIDERS} from "@angular/http"; 
import {enableProdMode} from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

platformBrowserDynamic().bootstrapModule(AppModule);