B B*_*B B 54 typescript webpack angular
我是Angular 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{};
谢谢你的时间.
Alf*_*Moh 74
我有这个错误,即使我有上面的答案建议到位的一切.app.module.ts文件中的简单编辑(如删除括号并将其放回)就可以了.
Ale*_*ski 30
问题出在您的main.ts文件中.
const platform = platformBrowserDynamic();
platform.bootstrapModule(App);
您正在尝试引导App,这不是一个真正的模块.删除这两行并替换为以下行:
platformBrowserDynamic().bootstrapModule(AppModule);
它会修复你的错误.
Tho*_*wig 25
在该运行之后尝试删除node_modules
rm -rf node_modules和package-lock.json .rm -rf package-lock.jsonnpm install
Bah*_*gor 22
升级到Angular 6后,我遇到了"ERROR in No NgModule metadata found for 'AppModule'."angular-bootstrap-md包,它需要一个tsconfig.json"include",如下所示:
"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],
经过几天的故障排除和拔毛之后,解决方案是安排列表,以便首先找到app.module.ts,位于"src/**/*.ts"下.也许是一个角虫？
"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],
我真的希望这对某人有所帮助,因为我在这篇文章中尝试过所有内容而没有任何帮助.在这一变化之后,一切都按预期编译并且工作得很好.
小智 8
只有在手动重新安装角度/ cli时才会解决此问题.请遵循以下步骤.(在Angular项目目录下运行所有命令)
1)使用以下命令删除webpack.
npm remove webpack
2)使用以下命令安装cli.
npm install --save-dev @angular/cli@latest
成功测试应用程序后,它将工作:)
如果没有,请按照以下步骤操作
1)删除node_module文件夹.2)使用以下命令清除缓存.
npm cache clean --force
3)使用以下命令安装节点包.
npm install
4)使用以下命令安装angular @ cli.
npm install --save-dev @angular/cli@latest
注意:如果失败,请再试一次:)
5)庆祝:)
迟到的回答，但这可能对某人有帮助。我遇到了同样的错误，尝试了前面提到的所有建议，将头撞在墙上，但没有任何效果。
经过仔细观察，我在 app.module.ts 中注意到以下内容：
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,, // Redundant comma
CoreModule
];
于是我又敲了敲头。WebStorm 非常无辜地突出显示了额外的逗号，作为温和的警告，但在数组中插入一个空槽却造成了严重破坏。小心省略陷阱；）
| 归档时间： |
|
| 查看次数： |
90653 次 |
| 最近记录： |