角度2：没有发现NgModule元数据

发布时间：2020-12-17 09:27:56 所属栏目：安全来源：网络整理

导读：我是全新的角色2,并试图跟随我发现的视频教程.尽管遵循所有步骤,但是Angular将不会奏效;我收到以下错误： compiler.umd.js:13854 Uncaught Error: No NgModule metadata found for 'App'. 并且组件根本不加载. 这是我的文件：的package.json： { "name": "r

我是全新的角色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{};

谢谢你的时间.

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

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

您正在尝试引导App,这不是一个真正的模块.
删除这两行,只需离开以下行：

platformBrowserDynamic().bootstrapModule(AppModule);

它会修复你的错误.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!