Angulaire 2 : Pas de NgModule métadonnées

Je suis tout nouveau Angulaire 2 et de tenter de suivre un tutoriel vidéo que j'ai trouvé. En dépit de toutes les étapes, Angulaire juste ne fonctionnera pas; j'obtiens l'erreur suivante:

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

et le composant ne prend pas en charge.

Voici mes fichiers:

paquet.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>

principal.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.le 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.

où est app.module.ts fichier?
Toutes mes excuses, j'ai ajouté que maintenant.
êtes-vous à l'aide angulaires-cli?

InformationsquelleAutor B B | 2016-09-25

28

Le problème est dans votre main.ts fichier.
```
const platform = platformBrowserDynamic();
platform.bootstrapModule(App);
```
Vous essayez de bootstrap App, ce qui n'est pas un vrai module.
Supprimer ces deux lignes et les remplacer par la ligne suivante:
```
platformBrowserDynamic().bootstrapModule(AppModule);
```
et il va corriger votre erreur.
- Me battre pour elle, vous devez être rapide ici!
- Ce aussi de ne pas travailler (à noter que j'ai AppModule): const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); Seulement après la chute de la const et en combinant les déclarations fonctionne.
- Ce que l'enfer, de ne pas déclarer const platform séparément en effet résolu le problème, ici, trop. Pourquoi cette question? il est (DEVRAIT être syntaxiquement 100% la même chose... Et pourquoi le rapport d'erreur de Angular/cli donc très mauvais au sujet de cette :/
InformationsquelleAutor Alexander Ciesielski
65

J'ai eu cette erreur, même si j'avais tout ce que les réponses ci-dessus suggère à la place. Un simple modifier dans la app.module.ts de fichier ( suppression d'un support et de le remettre) a fait le tour.
- Le même a fonctionné pour moi après la mise à jour angulaire 5.1.0 aujourd'hui
- Je viens d'ouvrir l'application.le module.ts fichier, cliquez sur enregistrer, puis il travaille pour moi. Angulaire 5.0.0 et angulaire de la cli 1.6.3 - à l'aide de vs code.
- a travaillé pour moi aussi, merci
- Je suis à l'aide de angular5.1.0. Après mnp, le départ a été coincé avec ngModule question. mais cette astuce fonctionne! Merci
- Cela résout ng serve erreurs, mais encore ng build donne le même message d'erreur et ne pas créer le dossier dist
- pour ng construire, vous pouvez essayer de ng build --prod --aot=false
- Ce n'est pas une solution viable pour les projets avec un processus d'intégration continue. Dans mon cas, jenkins détecte la version est cassé. Je ne peux pas dire jenkins d'entrer et de modifier un fichier, puis de le restaurer et de le sauver...
- cela a fonctionné pour moi aussi. Étrange.
- angulaire d'un amour
- Oui, Son Travail. Mais Comment?? Pourquoi?
InformationsquelleAutor Alf Moh
23

Essayez de supprimer node_modules
rm -rf node_modules et l'emballage-lock.json rm -rf package-lock.json,
après cette série npm install.
- ceux fonctionné pour moi
- Pour moi aussi! J'ai eu peur, j'ai dû migrer à partir de l'adresse Http de HttpClient comme je l'ai lu dans un post (je sais que je dois le faire, mais pour l'instant il me tuerait), mais cette solution a bien fonctionné.
- J'ai mis à jour angulaires-cli 1.6.0 à 1.6.4. Votre réponse n'a le truc pour moi. Thx
- retrait package-lock.json œuvres.
- A travaillé pour moi, l'astuce ici est de supprimer le paquet-lock.json
InformationsquelleAutor Thomas Gotwig
22

Après la mise à jour Angulaire 6, j'ai rencontré le "ERROR in No NgModule metadata found for 'AppModule'." avec l'angle-bootstrap-md paquet, ce qui nécessite une tsconfig.json "inclure", comme suit:

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

Après des jours de dépannage et de tirer les cheveux, la solution a été d'organiser la liste, de sorte que l'application.le module.ts était situé tout d'abord, en vertu de l' "src/**/*.ts". Angulaire bug, peut-être?

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

J'espère sincèrement cela aide quelqu'un, que j'ai tout essayé dans ce message et rien n'a aidé. Après ce changement, tout compile et fonctionne à merveille, comme prévu.
- Merci de votre très très très bien. Peut-être que les bugs de la angulaires-bootstrap-md?
- Haut de réponse pour moi. Ce n'est pas la première fois que Angulaires Bootstrap MD gâché les choses pour moi.
- Je n'ai pas de #$%$$ idée de comment u peut identifier qui était la question... mais grâce à dieu u fait...il devenait fou ici.
- Ce sera désormais connu comme un Grand de Trouver! Vous, compagnons de codeur, sont un Finder.
- J'ai été confronté à ce problème lors de la mise à niveau à partir angulaire 5.x angulaire 7.x et cette solution a bien fonctionné pour moi.
- Lisse. Travaillé avec angulaires-autosize trop de Win10 avec 7.1.4 Angulaire pendant ce temps, dans mac a bien fonctionné. Avant: "inclure": ["../node_modules/angulaires-le redimensionnement automatique/**/*.ts", "*/.ts"]. Après: "inclure": [ "*/.ts", "../node_modules/angulaires-le redimensionnement automatique/**/*.ts"
InformationsquelleAutor Bahri Gungor
8

Le problème est résolu que lorsque re installé angulaire/cli manuellement.
Suivez les étapes suivantes.
(exécuter toute commande sous Angulaire du projet dir)

1)Supprimer webpack en utilisant la commande suivante.
```
npm remove webpack
```
2)Installer cli en utilisant la commande suivante.
```
npm install --save-dev @angular/cli@latest
```
après le succès de leur application de test, ça marche 🙂

si non, alors suivez les étapes ci-dessous.

1) Supprimer node_module dossier.
2) vider le cache en utilisant la commande suivante.
```
npm cache clean --force
```
3) nœud Installer des paquets en utilisant la commande suivante.
```
npm install
```
4)Installer angulaire@cli en utilisant la commande suivante.
```
npm install --save-dev @angular/cli@latest
```
Remarque :en cas d'échec,essayez de nouveau 🙂

5) Célébrer 🙂
- Votées. Toutefois, si vous êtes paresseux comme moi, j'ai été capable de passer à côté du problème que de la suppression de la node_module dossier, et en cours d'exécution npm install.
InformationsquelleAutor Kapil Thakkar
3

Il y a plus de raisons de vous faire cette erreur. Cela signifie que votre application n'a pas pu construire comme prévu.

Vérifiez les éléments suivants..
- Vérifier si le node_modules version n'ont pas changé, c'est le
  principale raison.
- Si vous vous déplacez de Certains autres outils de construction de webpack, Par exemple
  Systemjs à Webpack, Si certains de vos dépendances ne sont pas modulaire
  la nature, vous pouvez obtenir cette erreur, vérifiez que trop.
- Vérifier Obsolètes fonctionnalités du framework, Ex: "HTTP_PROVIDERS"
  dans angulaire 2 et les supprimer.
- Si vous mettez à niveau, alors assurez-vous de suivre le courant
  la syntaxe de le Cadre, par Ex: de routage syntaxe a été changé dans
  Angular2..
- Cochez la ou initier des processus et assurez-vous de charger le
  Module correct.
- "Vérifier que le node_modules version n'ont pas changé, c'est la principale raison" - veuillez préciser "Si certains de vos dépendances ne sont pas modulaires dans la nature" - pourriez-vous élaborer?
InformationsquelleAutor Ignatius Andrew
3

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

Sur une observation attentive, j'ai remarqué ce qui suit dans l'app.le module.ts:
```
imports: [
  BrowserModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpClientModule,, //Redundant comma 
  CoreModule
];
```
Donc je me suis cogné la tête un peu plus. La virgule supplémentaire, très innocemment mise en evidence, par WebStorm, comme un léger avertissement, ravagé par l'insertion d'un emplacement vide dans le Tableau. Watchout pour la élision piège 😉

InformationsquelleAutor rohit-biswas
2

Dans votre main.ts, vous êtes d'amorçage à la fois votre AppModule et votre Application. Il faut juste être le AppModule, qui a ensuite démarre l'Application.

Si vous comparez votre main.ts pour les docs, vous verrez la différence - il suffit de supprimer toutes les références à l'Application de main.ts

InformationsquelleAutor nickspoon

Angulaire 5, j'ai résolu un problème similaire par ugrading à @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)

InformationsquelleAutor DJDaveMark

2

J'ai eu le même problème et je ne pouvais pas résoudre après avoir lu toutes les réponses ci-dessus. Puis j'ai remarqué qu'une virgule supplémentaire dans des déclarations a été la création d'un problème. Enlevé, le problème est résolu.
```
@NgModule({
    imports: [
        PagesRoutingModule,
        ThemeModule,
        DashboardModule,
    ],
    declarations: [
        ...PAGES_COMPONENTS,
        **,**
    ],
})
```
InformationsquelleAutor Aman Jain Hingerh
2

Espère que cela peut aider. Dans mon cas, je travaille avec lazy-load module et j'ai trouvé cette erreur conduire à
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 outil peut me dire Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'

InformationsquelleAutor Kenneth Chan
1

J'ai eu ce problème quand j'ai cloné à partir d'un dépôt git et je l'avais résolu lorsque j'ai créé un nouveau projet et de 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 angulaire de l'application, mais vous devez reconfigurer l'environnement de dev, à l'aide de cette solution.

InformationsquelleAutor Louis Beullens
1

J'ai enfin trouvé la solution.
1. Supprimer webpack en utilisant la commande suivante.
```
npm remove webpack
```
1. Installer cli en utilisant la commande suivante.
```
npm install --save-dev @angular/cli@latest
```
après le succès de leur application de test, ça marche 🙂

Si non, alors suivez les étapes ci-dessous:
1. Supprimer node_module dossier.
2. Vider le cache en utilisant la commande suivante.
```
npm cache clean --force
```
1. Nœud installer des paquets en utilisant la commande suivante.
```
npm install
```
1. Installer angulaire@cli en utilisant la commande suivante.
```
npm install --save-dev @angular/cli@latest
```
Remarque: en Cas d'échec, essayez de nouveau l'étape 4. Il va travailler.
- Travaillé après j'ai retenté l'étape 4 1 plus de temps
InformationsquelleAutor lilhamad
0

vous devez activer le ngModel directive. Cela se fait par l'ajout du FormsModule pour les importations tableau[] dans le AppModule.

Ensuite, vous devez également ajouter les importations en provenance de @angulaire, formes dans l'application.le module.ts fichier:
importer { FormsModule } à partir de '@angulaire, formes';
- il fixe la question, mais pourquoi?@Cheikh Abdullah
InformationsquelleAutor Abdullah Sheikh
0

Nous avons dû faire face à ce problème sur Angulaire de la Cli 1.7.4 à la fois. Au départ, nous avons
```
Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null
```
Et la fixation de ce fil pour le problème ci-dessus.

Nous avons supprimé paquet-lock.json
```
npm remove webpack

npm cache clean --force
```
Vous pouvez aussi retirer votre dossier node_modules. Puis nettoyer le cache.
ré-installé angulaire de la cli:
```
npm install @angular/cli@1.7.4
```
Et ensuite vous pouvez faire npm install de nouveau, juste pour s'assurer si tout est installé.

Puis exécutez
```
npm ls --depth 0
```
À assurez-vous si tous vos node_modules sont synchronisés les uns avec les autres. Si il y a une dépendance de désadaptation, c'est l'occasion pour nous de comprendre.

Enfin exécuter mnp start/ng servir. il doit tout régler.

C'est le code de triche que nous allons suivre si nous rencontrons des problèmes avec la cli, avant de nous creuser plus profond. 95% des fois, il résout tous les problèmes.

Espère que ça aide.

InformationsquelleAutor Siddhartha Thota
0

Dans mon cas, j'ai essayé de mettre à jour mon angulaire 6 projet à l'aide de ng update après que l'univers entier s'effondrer.

J'ai essayé de mettre à jour mon projet à l'aide de cette commande:
- ng mise à jour @angulaire/cli
- ng mise à jour @angulaire/core
- ng mise à jour @anguleuse/matière
Et puis j'ai trouvé un problème avec rxjs paquet et j'ai également exécuter cette commande.
- npm install --enregistrer rxjs

Et puis j'ai l'erreur

Pas NgModule métadonnées

- Je résoudre ce par la suppression de mon node_modules dossier dans la racine du projet
puis-je exécuter:
- npm install
Qui est, de toutes les œuvres de nice.

InformationsquelleAutor George C.
0

J'ai trouvé que la cause de ce problème, dans mon cas, c'est que je l'ai combiné mon Angulaire de l'application avec un node.js application dans la même arborescence des sources, et dans la racine tsconfig.json j'ai eu:

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

J'ai changé de ce

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

Et afin de prévenir les types de nœuds être utilise dans angulaire de votre application, ajoutez ceci à tsconfig.app.json:

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

InformationsquelleAutor Tom Mettam

-1

Je vais vous donner quelques suggestions.Supprimer tous ces mentionnées ci-dessous

1)<script src="polyfills.bundle.js"></script>(index.html)  //<<<===not sure as Angular2.0 final version doesn't require this.

2)platform.bootstrapModule(App); (main.ts)

3)import { NgModule } from '@angular/core'; (app.ts)

InformationsquelleAutor micronyks

-1

À l'aide de ngcWebpack Plugin j'ai eu cette erreur lors de ne pas spécifier de mainPath ou entryModule.

InformationsquelleAutor arturh

Vous devez vous connecter pour publier un commentaire.