[英]Error: Error: No NgModule metadata found for 'AppComponent'
I am trying to use Django with Angular2. 我正在尝试将Django与Angular2一起使用。 I have a working Django project. 我有一个有效的Django项目。 I am getting this error while trying to use Angular2 with it: 我在尝试使用Angular2时遇到此错误:
Error: Error: No NgModule metadata found for 'AppComponent'. 错误:错误:找不到“AppComponent”的NgModule元数据。
at new BaseException ( http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27 ) 在新的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 ) 在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 ) 在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._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._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 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 ) 在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 ) 在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 Object.eval( http:// user:8000 / ng / src / main.js:5:53 )
at eval ( http://user:8000/ng/src/main.js:17:4 ) 在eval( http:// user:8000 / ng / src / main.js:17:4 )
Evaluating http://user:8000/ng/src/main.js 评估http:// user:8000 / ng / src / main.js
Error loading http://user:8000/ng/src/main.js 加载http:// user:8000 / ng / src / main.js时出错
Part of package.json file: 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: 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: 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: index.html的:
<script>
window.ANGULAR_URL = "{{ ANGULAR_URL }}";
System.import('/ng/src/main.js').catch(function(err){
console.error(err);
});
</script>
I have set ANGULAR_URL in settings.py
file of Django. 我在Django的settings.py
文件中设置了ANGULAR_URL。 It shows /ng/ on browser. 它在浏览器上显示/ ng /。 I searched a lot and tried changing the dependencies in package.json
so many times. 我搜索了很多,并尝试多次更改package.json
的依赖项。 I made sure I did npm install
every time I made changes in package.json
. 我确保每次在package.json
进行更改时都会npm install
。 I have seen many syntax changes with different versions. 我看到了许多不同版本的语法更改。 If this might be the issue, here are the npm and node versions I am using: npm 4.1.1
and node v4.8.3
. 如果这可能是问题,这里是我正在使用的npm和节点版本: npm 4.1.1
和node v4.8.3
。 I am running Django on port 8000. 我在端口8000上运行Django。
app.component.ts file: 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 UPDATE-1
scripts part of package.json file: 脚本部分的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"
},
By the way, I have been following this to use Angular with Django. 顺便说一句,我一直在关注这个以使用Angular和Django。
UPDATE-2 UPDATE-2
I have just realised that my tsconfig.json and typings.json are not in same place. 我刚刚意识到我的tsconfig.json和typings.json不在同一个地方。 I put both in same place as package.json is present. 我把两个放在package.json存在的同一个地方。 Now I am getting the following error : 现在我收到以下错误:
error TS5023: Unknown compiler option 'lib'. 错误TS5023:未知的编译器选项'lib'。
UPDATE-3 UPDATE-3
tsconfig.json file: tsconfig.json文件:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
And my tsc -v
gives Version 2.1.5
. 而我的tsc -v
给出了Version 2.1.5
。 Now I have changed the "typescript": "^1.8.10",
to "typescript": "^2.1.5"
. 现在我将"typescript": "^1.8.10",
改为"typescript": "^2.1.5"
。 So the error mentioned in update -2 i not there but it shows this: 所以更新-2中提到的错误我不在,但它显示了这个:
Error: TypeError: Cannot read property 'forRoot' of undefined 错误:TypeError:无法读取未定义的属性'forRoot'
Error: TypeError: Cannot read property 'forRoot' of undefined 错误:TypeError:无法读取未定义的属性'forRoot'
at Object.eval ( http://user:8000/ng/src/app/app.module.js:22:114 ) 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 ) 在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 ) 在eval( http:// user:8000 / ng / src / app / app.module.js:30:3 )
at eval (anonymous) 在eval(匿名)
Evaluating http://user:8000/ng/src/app/app.module.js 评估http:// user:8000 / ng / src / app / app.module.js
Evaluating http://user:8000/ng/src/main.js 评估http:// user:8000 / ng / src / main.js
Error loading http://user:8000/ng/src/main.js 加载http:// user:8000 / ng / src / main.js时出错
You are not importing AppModule
in your main.ts. 您没有在main.ts中导入AppModule
。 And you were probably bootstrapping AppComponent
which was causing the error you see. 你可能正在引导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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.