Question

我正在尝试将Django与Angular2一起使用。我有一个有效的Django项目。我在尝试使用Angular2时遇到此错误：

错误：错误：找不到“AppComponent”的NgModule元数据   在新的BaseException（http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27）
  在NgModuleResolver.resolve（http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:12956:27）
  在CompileMetadataResolver.getNgModuleMetadata（http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:13200:51）
  在RuntimeCompiler._compileComponents（http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51）
  在RuntimeCompiler._compileModuleAndComponents（http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41）
  在RuntimeCompiler.compileModuleAsync（http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25）
  在PlatformRef _._ bootstrapModuleWithZone（http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9991:29）
          在PlatformRef_.bootstrapModule（http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9984:25）
          在Object.eval（http://user:8000/ng/src/main.js:5:53）
          在eval（http://user:8000/ng/src/main.js:17:4）
      评估http://user:8000/ng/src/main.js
      加载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中的依赖项。每次我在npm install进行更改时，我都确保package.json。我看到了许多不同版本的语法更改。如果这可能是问题，这里是我使用的npm和节点版本： npm 4.1.1和node v4.8.3。我在端口8000上运行Django。

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存在的同一个地方。现在我收到以下错误：

错误TS5023：未知的编译器选项'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中提到的错误我不在，但它显示了这个：

错误：TypeError：无法读取未定义
的属性'forRoot'
错误：TypeError：无法读取未定义的属性'forRoot'           在Object.eval（http://user:8000/ng/src/app/app.module.js:22:114）
          在eval（http://user:8000/ng/src/app/app.module.js:29:4）
          在eval（http://user:8000/ng/src/app/app.module.js:30:3）
          在eval（匿名）
      评估http://user:8000/ng/src/app/app.module.js
      评估http://user:8000/ng/src/main.js
      加载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);

错误：错误：找不到'AppComponent'

1 个答案: