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.
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.
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.
Versuchen Sie, node_modules rm -rf node_modules
und package-lock.jsonrm -rf package-lock.json
, Nach diesem Laufnpm install
zu entfernen.
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.
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 :)
Es gibt mehr Gründe, diesen Fehler zu erhalten. Dies bedeutet, dass Ihre Anwendung nicht wie erwartet erstellt werden konnte.
Überprüfe das folgende ..
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;)
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,
**,**
],
})
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
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)
Ich habe endlich die Lösung gefunden.
npm remove webpack
npm install --save-dev @angular/[email protected]
nach erfolgreicher Test-App wird es funktionieren :)
Wenn nicht, dann folgen Sie den nachstehenden Schritten:
npm cache clean --force
npm install
npm install --save-dev @angular/[email protected]
Hinweis: Wenn dies fehlgeschlagen ist, wiederholen Sie Schritt 4 erneut. Es wird klappen.
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.
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'
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.
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": [] }
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.
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:
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:
Das ist alles, alles funktioniert schön.
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';