web-dev-qa-db-de.com

Winkel 2: Keine NgModule-Metadaten gefunden

Ich bin ganz neu in Angular 2 und versuche mit einem Video-Tutorial, das ich gefunden habe, zu folgen. Trotz aller Schritte funktioniert Angular einfach nicht; Ich erhalte folgende Fehlermeldung:

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

und die Komponente wird überhaupt nicht geladen.

Hier sind meine Dateien:

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

Vielen Dank für Ihre Zeit.

42
B B

Das Problem liegt in Ihrer main.ts-Datei.

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

Sie versuchen, App zu booten. Dies ist kein echtes Modul. Löschen Sie diese beiden Zeilen und ersetzen Sie sie durch folgende Zeile:

platformBrowserDynamic().bootstrapModule(AppModule);

und es wird Ihren Fehler beheben.

27

Ich hatte diesen Fehler, obwohl ich alles hatte, was die obigen Antworten nahe legen. Eine einfache Bearbeitung in der app.module.ts-Datei (wie Löschen und Zurücksetzen einer Klammer) hat den Trick ausgeführt.

55
Alf Moh

Versuchen Sie, node_modules rm -rf node_modules und package-lock.jsonrm -rf package-lock.json, Nach diesem Laufnpm install zu entfernen.

23
Thomas Gotwig

Nach dem Upgrade auf Angular 6 stieß ich auf "ERROR in No NgModule metadata found for 'AppModule'." mit dem angle-bootstrap-md-Paket, für das ein tsconfig.json-Include wie folgt erforderlich ist:

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

Nach Tagen der Problembehandlung und dem Ziehen der Haare bestand die Lösung darin, die Liste so anzuordnen, dass sich app.module.ts zuerst unter "src/**/*. Ts" befand. Vielleicht ein eckiger Fehler?

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

Ich hoffe wirklich, dass dies jemandem hilft, da ich alles in diesem Posting ausprobiert habe und nichts geholfen hat. Nach dieser Änderung wird alles wie erwartet kompiliert und funktioniert einwandfrei.

17
Bahri Gungor

Das Problem wurde nur behoben, wenn Winkel/cli manuell installiert wurde . Führen Sie die folgenden Schritte aus.

1) Entfernen Sie das Webpack mit folgendem Befehl.

npm remove webpack

2) Installieren Sie cli mit folgendem Befehl.

npm install --save-dev @angular/[email protected]

nach erfolgreicher Test-App wird es funktionieren :)

wenn nicht, folgen Sie den nachstehenden Schritten.

1) Löschen Sie den node_module-Ordner . 2) Löschen Sie den Cache mit folgendem Befehl.

npm cache clean --force

3) Installieren Sie die Knotenpakete mit folgendem Befehl.

npm install

4) Installieren Sie angle @ cli mit folgendem Befehl.

npm install --save-dev @angular/[email protected]

Hinweis: Wenn nicht, versuchen Sie es erneut :)

5) Feiern Sie :)

8
Kapil Thakkar

Es gibt mehr Gründe, diesen Fehler zu erhalten. Dies bedeutet, dass Ihre Anwendung nicht wie erwartet erstellt werden konnte.

Überprüfe das folgende ..

  • Prüfen Sie, ob die Version der Knotenmodule nicht geändert wurde. Dies ist der Hauptgrund
  • Wenn Sie von einem anderen Build-Tool zu Webpack wechseln, z. B. Systemjs zu Webpack. Wenn einige Ihrer Abhängigkeiten in Natur nicht modular sind, erhalten Sie möglicherweise diesen Fehler. Prüfen Sie auch dies.
  • Suchen Sie nach veralteten Features des Frameworks, zB: "HTTP_PROVIDERS" In Winkel 2, und entfernen Sie sie.
  • Wenn Sie ein Upgrade durchführen, stellen Sie sicher, dass Sie die aktuelle -Syntax des Frameworks befolgen. Für Ex: routing wurde die Syntax in Angular2 .. geändert.
  • Überprüfen Sie den Bootstraping-Prozess und stellen Sie sicher, dass Sie das richtige Modul Laden.
3
Ignatius Andrew

Späte Antwort, aber das könnte jemandem helfen. Ich bekam den gleichen Fehler, probierte alle vorher erwähnten Vorschläge aus, schlug meinen Kopf gegen die Wand, aber nichts funktionierte.

Bei sorgfältiger Beobachtung fiel mir in app.module.ts folgendes auf:

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpClientModule,, // Redundant comma 
  CoreModule
];

Also schlug ich noch mehr mit dem Kopf. Das von WebStorm als harmlose Warnung besonders unschuldig gemachte Extra-Komma verursachte Chaos, indem ein leerer Slot in das Array eingefügt wurde. Watchout für die Entscheidung Falle;)

3
rhino2rhonda

Ich hatte das gleiche Problem und konnte es nicht lösen, nachdem ich alle obigen Antworten gelesen hatte. Dann bemerkte ich, dass ein zusätzliches Komma in Deklarationen zu Problemen führte. Entfernt, Problem gelöst.

@NgModule({
    imports: [
        PagesRoutingModule,
        ThemeModule,
        DashboardModule,
    ],
    declarations: [
        ...PAGES_COMPONENTS,
        **,**
    ],
})
2

In Ihrem main.ts bootstrapping Sie sowohl Ihre AppModule als auch Ihre App. Es sollte nur das AppModule sein, das dann die App bootstraps.

Wenn Sie Ihre main.ts mit den Dokumenten vergleichen, werden Sie den Unterschied feststellen. Entfernen Sie einfach alle Verweise auf App aus main.ts

2
nickspoon

Mit Angular 5 habe ich ein ähnliches Problem durch ein Upgrade auf @angular/cli 1.6.1 von 1.5.5 gelöst:

"devDependencies": {
  "@angular/cli": "1.6.1"
}

Während ng serve war der Fehler:

ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (/path/to/project/app/node_modules/@angular/compiler/bundles/compiler.umd.js:20247:23)
2
DJDaveMark

Ich habe endlich die Lösung gefunden.

  1. Entfernen Sie das Webpack mit dem folgenden Befehl.
npm remove webpack
  1. Installieren Sie cli mit folgendem Befehl.
npm install --save-dev @angular/[email protected]

nach erfolgreicher Test-App wird es funktionieren :)

Wenn nicht, dann folgen Sie den nachstehenden Schritten:

  1. Löschen Sie den node_module-Ordner. 
  2. Cache mit folgendem Befehl löschen.
npm cache clean --force
  1. Installieren Sie Knotenpakete mit folgendem Befehl.
npm install
  1. Installieren Sie angle @ cli mit folgendem Befehl.
npm install --save-dev @angular/[email protected]

Hinweis: Wenn dies fehlgeschlagen ist, wiederholen Sie Schritt 4 erneut. Es wird klappen.

1
lilhamad

Ich hatte dieses Problem, als ich aus einem Git-Repository geklont wurde, und es wurde behoben, als ich ein neues Projekt erstellte und den src-Ordner aus dem alten Projekt wieder einfügte.

Der Ordner "src" ist der einzige Ordner, der zum Bereitstellen der eckigen Anwendung erforderlich ist. Sie müssen jedoch die Entwicklungsumgebung mit dieser Lösung neu konfigurieren.

1
Louis Beullens

Ich hoffe es kann helfen. In meinem Fall arbeite ich mit Lazy-Load-Modul und ich habe festgestellt, dass dieser Fehler zu ERROR in No NgModule metadata found for 'MyModule'. führt. 

in app-routing.module.ts
{ path: 'mc3', loadChildren: 'app/module/my/my.module#MxModule' },

Wenn ich ng serve --aot chrome dev tool ausführen kann, kann mir Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'

1
Kenneth Chan

Dieses Problem wurde in Angular Cli 1.7.4 zeitweise angegangen. Anfangs haben wir 

Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null

Und dieses Problem zu beheben, führt zu dem oben genannten Problem.

Wir haben package-lock.json entfernt

npm remove webpack

npm cache clean --force

Sie können Ihren node_modules-Ordner auch entfernen. Und dann den Cache säubern. 

npm install @angular/[email protected]

Und dann können Sie npm erneut installieren, nur um sicherzustellen, dass alles installiert ist.

Dann renne

npm ls --depth 0

Um sicherzustellen, dass alle Knotenmodule miteinander synchron sind. Wenn es ein Missverhältnis zwischen Abhängigkeiten gibt, ist dies die Gelegenheit für uns, das herauszufinden.

Zum Schluss npm start/ng dienen. es sollte alles reparieren.

Dies ist der Cheat-Code, den wir befolgen werden, wenn wir Probleme mit cli haben, bevor wir tiefer in Dig gehen. 95% der Fälle behebt alle Probleme.

Hoffentlich hilft das.

0

Ich habe festgestellt, dass die Ursache für dieses Problem in meinem Fall darin bestand, dass ich meine Angular App mit einer node.js-Anwendung im selben Quellbaum und im Stammverzeichnis tsconfig.json Ich hatte:

"files": [ "./node_modules/@types/node/index.d.ts" ]

Ich habe das in geändert

"compilerOptions": { "types": ["node"] }

Fügen Sie Folgendes zu tsconfig.app.json Hinzu, um zu verhindern, dass Knotentypen in Ihrer App angular=) verwendet werden:

"compilerOptions": { "types": [] }

0
Tom Mettam

Ich hatte das gleiche Problem, aber keine dieser Lösungen funktionierte für mich. Nach weiteren Untersuchungen stellte ich fest, dass sich ein unerwünschter Import in einer meiner Komponenten befand.

Ich verwende die Funktion setTimeout in app.component, aber aus irgendeinem Grund fügte Visual Studio import { setTimeout } from 'timer'; Hinzu, wo es nicht benötigt wurde. Das Entfernen dieser Zeile behebt das Problem.

Denken Sie also daran, Ihre Importe zu überprüfen, bevor Sie fortfahren. Hoffe es kann jemandem helfen.

0
KBell

In meinem Fall habe ich versucht, mein Winkel 6-Projekt mit ng update zu aktualisieren, nachdem das gesamte Universum zusammengebrochen ist.

Ich habe versucht, mein Projekt mit diesen Befehlen zu aktualisieren:

  • ng update @ angle/cli
  • ng update @ angle/core
  • ng update @ angle/material

Und dann habe ich ein Problem mit dem rxjs-Paket gefunden und ich führe auch diesen Befehl aus .- npm install --save rxjs

Und dann bekomme ich den Fehler 

Keine NgModule-Metadaten gefunden

Ich löse dieses Problem, indem ich meinen Ordner node_modules im Projektstammverzeichnis Lösche. Dann führe ich Folgendes aus:

  • npm installieren

Das ist alles, alles funktioniert schön.

0
George C.

sie müssen die ngModel-Direktive aktivieren. Dies geschieht durch Hinzufügen des FormsModule zu dem Imports [] - Array im AppModule.

Sie müssen dann auch den Import von @ angle/forms in die Datei app.module.ts hinzufügen: Import {FormsModule} from '@ angle/forms';

0
Abdullah Sheikh