我是全新的角色2,并试图跟随我发现的视频教程.尽管遵循所有步骤,但是Angular将不会奏效;我收到以下错误:
compiler.umd.js:13854 Uncaught Error: No NgModule Metadata found for 'App'.
并且组件根本不加载.
这是我的文件:
的package.json:
{ "name": "retain","version": "1.0.0","description": "","main": "index.js","scripts": { "test": "webpack --config webpack.spec.ts --progress --color && karma start","start": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src" },"author": "","license": "ISC","dependencies": { "@angular/common": "2.0.0","@angular/compiler": "2.0.0","@angular/core": "2.0.0","@angular/forms": "2.0.0","@angular/http": "2.0.0","@angular/platform-browser": "2.0.0","@angular/platform-browser-dynamic": "2.0.0","@angular/router": "3.0.0","core-js": "2.4.1","lodash": "4.16.1","rxjs": "5.0.0-beta.12","zone.js": "0.6.25" },"devDependencies": { "@types/core-js": "0.9.33","@types/lodash": "4.14.35","@types/node": "6.0.39","awesome-typescript-loader": "2.2.4","css-loader": "0.23.1","jasmine-core": "2.4.1","karma": "1.1.1","karma-chrome-launcher": "1.0.1","karma-jasmine": "1.0.2","karma-mocha-reporter": "2.0.4","raw-loader": "0.5.1","to-string-loader": "1.1.4","ts-helpers": "1.1.1","typescript": "2.0.2","webpack": "1.13.1","webpack-dev-server": "1.14.1" } }
index.html的:
<!DOCTYPE html> <html> <head> <Meta charset=UTF-8> <title>Retain</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdn.jsdelivr.net/flexBoxgrid/6.3.0/flexBoxgrid.min.css" type="text/css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="global.css" rel="stylesheet"> <base href="/"> </head> <body> <app> ... before angular loads. </app> <script src="polyfills.bundle.js"></script> <script src="vendor.bundle.js"></script> <script src="main.bundle.js"></script> </body> </html>
main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { App } from './app/app'; const platform = platformBrowserDynamic(); platform.bootstrapModule(App); platformBrowserDynamic().bootstrapModule(AppModule);
app.ts:
import { Component } from '@angular/core'; import { NgModule } from '@angular/core'; @Component({ selector: 'app',template: ` <div> <h3> Yo,world! </h3> </div> ` }) export class App {}
app.module.ts:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { App } from './app'; @NgModule({ imports: [BrowserModule],declarations: [App],bootstrap: [App] }) export class AppModule{};
谢谢你的时间.