web-dev-qa-db-fra.com

Angular 2: aucune métadonnée NgModule trouvée

Je suis nouvelle dans Angular 2 et j'essaie de suivre un tutoriel vidéo que j'ai trouvé. Bien qu’il suive toutes les étapes, Angular ne fonctionnera tout simplement pas; Je reçois l'erreur suivante:

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

et le composant ne charge pas du tout.

Voici mes fichiers:

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

Merci pour votre temps.

angulartypescriptwebpack
42
B B

Le problème est dans votre fichier main.ts.

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

Vous essayez d’amorcer App, qui n’est pas un vrai module . Supprimez ces deux lignes et remplacez-les par la ligne suivante:

platformBrowserDynamic().bootstrapModule(AppModule);

et cela corrigera votre erreur.

27
Alexander Ciesielski

J'ai eu cette erreur même si j'avais tout ce que les réponses ci-dessus suggéraient en place. Une simple modification dans le fichier app.module.ts (comme supprimer un crochet et le remettre en place) a fait l'affaire.

55
Alf Moh

Essayez de supprimer node_modules rm -rf node_modules et package-lock.json rm -rf package-lock.json, Après cette exécution, npm install.

23
Thomas Gotwig

Après la mise à niveau vers Angular 6, j'ai rencontré le "ERROR in No NgModule metadata found for 'AppModule'." avec le paquet angular-bootstrap-md, qui requiert un "include" tsconfig.json comme suit:

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

Après des jours de dépannage et de coupe de cheveux, la solution consistait à organiser la liste de sorte que le fichier app.module.ts soit placé en premier sous "src/**/*. Ts". Un bug angulaire, peut-être?

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

J'espère sincèrement que cela aidera quelqu'un, car j'ai tout essayé dans cet article et rien n'y fait. Après ce changement, tout se compile et fonctionne à merveille, comme prévu.

17
Bahri Gungor

Le problème n'est résolu que lorsque angular/cli est réinstallé manuellement . Suivez les étapes ci-dessous .

1) Supprimez le webpack en utilisant la commande suivante.

npm remove webpack

2) Installez cli en utilisant la commande suivante.

npm install --save-dev @angular/cli@latest

après avoir testé avec succès l'application, cela fonctionnera :)

sinon, suivez les étapes ci-dessous.

1) Supprimez le dossier node_module . 2) Effacez le cache en utilisant la commande suivante.

npm cache clean --force

3) Installez les packages de noeud en utilisant la commande suivante.

npm install

4) Installez angular @ cli en utilisant la commande suivante.

npm install --save-dev @angular/cli@latest

Remarque: en cas d'échec, essayez à nouveau :)

5) Célébrez :)

8
Kapil Thakkar

Il y a plus de raisons pour obtenir cette erreur. Cela signifie que votre application n'a pas réussi à générer comme prévu.

Vérifiez les éléments suivants ..

  • Vérifiez si les versions de node_modules ne sont pas modifiées, c'est la raison principale.
  • Si vous passez d'un autre outil de compilation à Webpack, par exemple Systemjs à Webpack, si certaines de vos dépendances ne sont pas modulaires, vous risquez d'obtenir cette erreur, vérifiez également cette erreur.
  • Recherchez les fonctionnalités obsolètes du framework, Ex: "HTTP_PROVIDERS" Dans l’angle 2 et supprimez-les.
  • Si vous effectuez une mise à niveau, assurez-vous de suivre la syntaxe actuelle Du Framework, pour Ex: routing la syntaxe a été modifiée dans Angular2 ..
  • Vérifiez le processus de démarrage et assurez-vous que vous chargez le module correct.
3
Ignatius Andrew

Réponse tardive, mais cela pourrait aider quelqu'un. J'ai eu la même erreur, j'ai essayé toutes les suggestions mentionnées précédemment, je me suis cogné la tête contre le mur, mais rien n'a fonctionné.

En observant attentivement, j'ai remarqué ce qui suit dans app.module.ts:

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

Alors je me suis cogné la tête un peu plus. La virgule supplémentaire, très innocemment mise en évidence par WebStorm, comme un léger avertissement, a semé le trouble en insérant un emplacement vide dans le tableau. Watchout pour le elision trap;)

3
rhino2rhonda

J'ai eu le même problème et je ne pouvais pas le résoudre après avoir lu toutes les réponses ci-dessus. Ensuite, j'ai remarqué qu'une virgule supplémentaire dans les déclarations créait un problème. Supprimé, problème résolu.

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

Dans votre main.ts, vous démarrez votre AppModule et votre App. Il devrait s'agir uniquement de l'AppModule, qui démarre ensuite l'application.

Si vous comparez votre main.ts aux documents, vous verrez la différence - il suffit de supprimer toutes les références à App de main.ts.

2
nickspoon

Avec Angular 5, j’ai résolu un problème similaire en passant à la version @angular/cli 1.6.1 de 1.5.5:

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

Pendant ng serve, l'erreur que j'ai eu était:

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

J'ai finalement trouvé la solution.

  1. Supprimez webpack en utilisant la commande suivante.
npm remove webpack
  1. Installez cli en utilisant la commande suivante.
npm install --save-dev @angular/cli@latest

après avoir testé avec succès l'application, cela fonctionnera :)

Sinon, suivez les étapes ci-dessous:

  1. Supprimer le dossier node_module. 
  2. Effacer le cache en utilisant la commande suivante.
npm cache clean --force
  1. Installez les packages de noeud en utilisant la commande suivante.
npm install
  1. Installez angular @ cli en utilisant la commande suivante.
npm install --save-dev @angular/cli@latest

Remarque: en cas d'échec, recommencez l'étape 4. Ça va marcher.

1
lilhamad

J'avais ce problème lorsque j'ai cloné à partir d'un référentiel git et je l'ai résolu lorsque j'ai créé un nouveau projet et réinséré le dossier src de l'ancien projet.

Le dossier src est le seul dossier nécessaire lors du déploiement de votre application angular, mais vous devez reconfigurer l'environnement de développement à l'aide de cette solution.

1
Louis Beullens

J'espère que ça peut aider. Dans mon cas, je travaille avec le module lazy-load et j’ai trouvé que cette erreur entraînait ERROR in No NgModule metadata found for 'MyModule'. 

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

Si je lance ng serve --aot chrome dev tool peut me dire Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'

1
Kenneth Chan

Nous avons parfois rencontré ce problème sur Angular Cli 1.7.4. Au départ, nous avons 

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

Et résoudre ce problème conduit au problème ci-dessus.

Nous avons supprimé package-lock.json

npm remove webpack

npm cache clean --force

Vous pouvez également supprimer votre dossier node_modules. Et puis nettoyez le cache . Réinstallé cli angulaire: 

npm install @angular/[email protected]

Et ensuite, vous pourrez réinstaller npm, juste pour vous assurer que tout est installé.

Puis courir

npm ls --depth 0

Pour vous assurer que tous vos node_modules sont synchronisés les uns avec les autres. S'il y a une incompatibilité de dépendance, c'est l'occasion pour nous de comprendre.

Enfin, lancez npm start/ng serve. ça devrait tout réparer.

Ceci est un code de triche que nous suivrons si nous rencontrons des problèmes avec cli, avant de creuser plus profondément. 95% des cas, il résout tous les problèmes.

J'espère que cela pourra aider.

0
Siddhartha Thota

Dans mon cas, j'essayais de mettre à niveau mon projet angulaire 6 en utilisant ng update après l'effondrement de l'univers entier.

J'essayais de mettre à jour mon projet en utilisant ces commandes:

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

Et puis j'ai trouvé un problème avec le paquetage rxjs et j'ai aussi lancé cette commande .- npm install --save rxjs

Et puis j'obtiens l'erreur 

Aucune métadonnée NgModule trouvée

Je résous ce problème en supprimant mon dossier node_modules dans la racine du projet, puis, je lance:

  • npm installer

Voilà, tout fonctionne bien.

0
George C.

vous devez activer la directive ngModel. Pour ce faire, ajoutez FormsModule au tableau imports [] dans AppModule.

Vous devez également ajouter l'importation de @ angular/forms dans le fichier app.module.ts: Import {FormsModule} from '@ angular/forms';

0
Abdullah Sheikh