typescript - Angular 2: Ingen NgModule-metadata funnet

Jeg er helt ny på Angular 2 og prøver å følge med på en videotutorial jeg fant. Til tross for at jeg følger alle trinnene, fungerer ikke Angular; jeg får følgende feil:

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

og komponenten lastes ikke i det hele tatt.

Her er filene mine:

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

Takk for tiden din.

Svar #1

Jeg hadde denne feilen selv om jeg hadde alt som svarene ovenfor foreslo på plass. En enkel redigering i app.module.ts-filen (som å slette en parentes og sette den tilbake) gjorde trikset.

Svar #2

Problemet er i din main.ts-fil.

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

Du prøver å starte App, som ikke er et ekte modul. Slett disse to linjene og erstatt dem med følgende linje:

platformBrowserDynamic().bootstrapModule(AppModule);

og det vil rette feilen din.

Svar #3

Prøv å fjerne node_modules rm -rf node_modules og package-lock.json rm -rf package-lock.json, etter det kjør npm install.

Svar #4

Etter oppgradering til Angular 6, støtte jeg på "ERROR in No NgModule metadata found for 'AppModule'." med angular-bootstrap-md-pakken, som krever en tsconfig.json "include" som følger:

"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"],

Etter dager med feilsøking og å rive seg i håret, var løsningen å ordne listen slik at app.module.ts var plassert først, under "src/**/*.ts". En Angular-feil, kanskje?

"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

Jeg håper virkelig dette hjelper noen, da jeg prøvde alt i dette innlegget og ingenting hjalp. Etter denne endringen, kompileres alt og fungerer vakkert, som forventet.

Relaterte artikler