Angular 2:未找到 NgModule 元数据 [英] Angular 2 : No NgModule metadata found

问题描述

我是 Angular 2 的新手，正在尝试学习我找到的视频教程.尽管遵循了所有步骤，Angular 仍然无法工作；我收到以下错误:

compiler.umd.js:13854 未捕获的错误:未找到App"的 NgModule 元数据.

并且组件根本不加载.

这是我的文件:

package.json:

<代码>{"name": "保留",版本":1.0.0"，描述": ""，"main": "index.js",脚本":{"test": "webpack --config webpack.spec.ts --progress --color && karma start",开始":webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src"},作者": ""，"许可证": "ISC",依赖关系":{"@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-b​​rowser": "2.0.0","@angular/platform-b​​rowser-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"},开发依赖":{"@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","业力": "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","打字稿": "2.0.2","webpack": "1.13.1",webpack-dev-server":1.14.1"}}

index.html:

<头><元字符集=UTF-8><title>保留</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="样式表"><link href="global.css" rel="stylesheet"><base href="/"><身体><应用程序>...在角载荷之前.</应用程序><script src="polyfills.bundle.js"></script><script src="vendor.bundle.js"></script><script src="main.bundle.js"></script>

main.ts:

import { platformBrowserDynamic } from '@angular/platform-b​​rowser-dynamic';从 './app/app.module' 导入 { AppModule };从'./app/app'导入{应用}；const 平台 = platformBrowserDynamic();platform.bootstrapModule(App);platformBrowserDynamic().bootstrapModule(AppModule);

app.ts:

import { Component } from '@angular/core';从'@angular/core' 导入 { NgModule };@零件({选择器:'应用'，模板:`<div><h3>哟，世界！

`})导出类 App {}

app.module.ts:

import { NgModule } from '@angular/core';从'@angular/platform-b​​rowser' 导入 { BrowserModule };从'./app'导入{应用}；@NgModule({进口:[浏览器模块]，声明:[应用程序]，引导程序:[应用程序]})导出类 AppModule{};

感谢您的时间.

解决方案

问题出在您的 main.ts 文件中.

const platform = platformBrowserDynamic();platform.bootstrapModule(App);

您正在尝试引导 App，它不是一个真正的模块.删除这两行并替换为以下行:

platformBrowserDynamic().bootstrapModule(AppModule);

它会修正你的错误.

I'm brand new to Angular 2 and attempting to follow along with a video tutorial I found. Despite following all of the steps, Angular just won't work; I get the following error:

compiler.umd.js:13854 Uncaught Error: No NgModule metadata found for 'App'.

and the component doesn't load at all.

Here are my files:

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{}; 

Thanks for your time.

解决方案

The problem is in your main.ts file.

const platform = platformBrowserDynamic();
platform.bootstrapModule(App);

You are trying to bootstrap App, which is not a real module. Delete these two lines and replace with the following line:

platformBrowserDynamic().bootstrapModule(AppModule);

and it will fix your error.

这篇关于Angular 2:未找到 NgModule 元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！