nodeinvocationexception ngmodule found for error appmodule angular typescript webpack

found - Angular 2: no se encontraron metadatos de NgModule



no ngmodule metadata found for angular 5 (21)

Recomendaría volver a ejecutar la aplicación. La mayoría de los editores de casos no podrán detectar los cambios en el módulo de carga diferida.

Soy nuevo en Angular 2 e intento seguir junto con un video tutorial que encontré. A pesar de seguir todos los pasos, Angular simplemente no funcionará; Obtuve el siguiente error:

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

y el componente no se carga en absoluto.

Aquí están mis archivos:

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

Gracias por tu tiempo.

Con Angular 5, resolví un problema similar al actualizarme a @angular/cli 1.6.1 desde 1.5.5:

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

Durante ng serve el error que obtuve fue:

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)

Descubrí que la causa de este problema en mi caso, era que había combinado mi aplicación Angular con una aplicación node.js en el mismo árbol de origen, y en la raíz tsconfig.json tenía:

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

Cambié esto a

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

Y luego, para evitar que se usen tipos de nodos en su aplicación angular, agregue esto a tsconfig.app.json :

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

Después de actualizar a Angular 6, encontré el "ERROR in No NgModule metadata found for ''AppModule''." con el paquete angular-bootstrap-md, que requiere un "incluir" tsconfig.json de la siguiente manera:

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

Después de días de solución de problemas y tirones de cabello, la solución fue organizar la lista de modo que el app.module.ts se ubicara primero, bajo "src / ** / *. Ts". ¿Un error angular, tal vez?

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

Realmente espero que esto ayude a alguien, ya que probé todo en esta publicación y nada ayudó. Después de este cambio, todo se compila y funciona de maravilla, como se esperaba.

El problema está en su archivo main.ts

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

Estás intentando arrancar la App , que no es un módulo real. Elimine estas dos líneas y reemplace con la siguiente línea:

platformBrowserDynamic().bootstrapModule(AppModule);

y solucionará tu error.

El problema se soluciona solo cuando se vuelve a instalar angular / cli manualmente. Siga los siguientes pasos. (ejecute todos los comandos en el directorio de proyecto angular)

1) Elimine el paquete web usando el siguiente comando.

npm remove webpack

2) Instale cli utilizando el siguiente comando.

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

después de probar con éxito la aplicación, funcionará :)

si no, siga los pasos a continuación.

1) Eliminar la carpeta node_module.

2) Borrar el caché usando el siguiente comando.

npm cache clean --force

3) Instale paquetes de nodos utilizando el siguiente comando.

npm install

4) Instale angular @ cli utilizando el siguiente comando.

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

Nota: si falla, intente nuevamente :)

5) Celebra :)

En mi caso, estaba tratando de actualizar mi proyecto angular 6 usando ng update después de que todo el universo colapsó.

Estaba tratando de actualizar mi proyecto usando estos comandos:

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

Y luego encontré un problema con el paquete rxjs y también ejecuté este comando. - npm install --save rxjs

Y luego me sale el error

No se encontraron metadatos de NgModule

Resuelvo esto eliminando mi carpeta node_modules en la raíz del proyecto y luego ejecuto:

  • npm install

Es decir, todo funciona bien.

En su main.ts , está iniciando tanto su AppModule como su App. Debería ser el AppModule, que luego inicia la aplicación.

Si compara su main.ts con los documentos, verá la diferencia: simplemente elimine todas las referencias a la aplicación de main.ts

Enfrentamos este problema en Angular Cli 1.7.4 a veces. Inicialmente tenemos

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

Y arreglar esto condujo al problema anterior.

Hemos eliminado package-lock.json

npm remove webpack npm cache clean --force

También puede eliminar su carpeta node_modules. Y luego limpie el caché. reinstalado angular cli:

npm install @angular/[email protected]

Y luego puede volver a instalar npm, solo para asegurarse de que todo esté instalado.

Entonces corre

npm ls --depth 0

Para asegurarse de que todos sus node_modules estén sincronizados entre sí. Si hay algún desajuste de dependencia, esta es la oportunidad para que lo descubramos.

Finalmente ejecute npm start / ng serve. Debería arreglarlo todo.

Este es un código de trampa que seguiremos si nos encontramos con algún problema con cli, antes de profundizar. El 95% de las veces soluciona todos los problemas.

Espero que ayude.

Espero que pueda ayudar. En mi caso, trabajo con el módulo de carga diferida y encontré que este error condujo a ERROR in No NgModule metadata found for ''MyModule''.

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

Si ejecuto ng serve --aot herramienta de ng serve --aot Chrome puede decirme Error: Cannot find ''Mc4Module'' in ''app/module/mc3/mc3.module''

Finalmente encontré la solución.

  1. Elimine el paquete web utilizando el siguiente comando.

npm remove webpack

  1. Instale cli utilizando el siguiente comando.

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

después de probar con éxito la aplicación, funcionará :)

Si no es así, siga los pasos a continuación:

  1. Eliminar la carpeta node_module.
  2. Borre la memoria caché utilizando el siguiente comando.

npm cache clean --force

  1. Instale paquetes de nodos utilizando el siguiente comando.

npm install

  1. Instale angular @ cli utilizando el siguiente comando.

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

Nota: Si falla, intente el paso 4 nuevamente. Funcionará.

Hay más razones para obtener este error. Esto significa que su aplicación no se pudo compilar como se esperaba.

Compruebe lo siguiente ...

  • Compruebe si la versión de node_modules no ha cambiado, esta es la razón principal.
  • Si se está mudando de alguna otra herramienta de compilación a webpack, por ejemplo Systemjs a Webpack, si algunas de sus dependencias no son de naturaleza modular, puede obtener este error, verifíquelo también.
  • Compruebe las características obsoletas del marco, por ejemplo : "HTTP_PROVIDERS" en angular 2 y elimínelas.
  • Si está actualizando, asegúrese de seguir la sintaxis actual de Framework, por ejemplo: la sintaxis de enrutamiento ha cambiado en Angular2.
  • Verifique el proceso de Bootstraping y asegúrese de que está cargando el Módulo correcto.

Intente eliminar node_modules rm -rf node_modules y package-lock.json rm -rf package-lock.json , después de eso ejecute npm install .

Respuesta tardía, pero esto podría ayudar a alguien. Obtuve el mismo error, probé todas las sugerencias mencionadas anteriormente, golpeé mi cabeza contra la pared, pero nada funcionó.

En una observación cuidadosa, noté lo siguiente en app.module.ts:

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

Así que me golpeé la cabeza un poco más. La coma extra, muy resaltada inocentemente, por WebStorm, como una leve advertencia, causó estragos al insertar una ranura vacía en la matriz. Cuidado con la trampa de elision ;)

Te daré algunas sugerencias. Elimina todo esto como se menciona a continuación

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)

Tuve el mismo problema y no pude resolverlo después de leer todas las respuestas anteriores. Entonces noté que una coma extra en las declaraciones estaba creando un problema. Eliminado, problema resuelto.

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

Tuve el mismo problema, pero ninguna de esas soluciones me funcionó. Después de una investigación adicional, descubrí que una importación no deseada estaba en uno de mis componentes.

Uso la función setTimeout en app.component pero, por cualquier motivo, Visual Studio agregó import { setTimeout } from ''timer''; donde no era necesario Eliminar esta línea solucionó el problema.

Así que recuerde verificar sus importaciones antes de continuar. Espero que pueda ayudar a alguien.

Tuve este error a pesar de que tenía todo lo que las respuestas anteriores sugirieron en su lugar. Una simple edición en el archivo app.module.ts (como eliminar un paréntesis y volver a colocarlo) hizo el truco.

Tuve este problema cuando cloné desde un repositorio git y lo resolví cuando creé un nuevo proyecto y volví a insertar la carpeta src del proyecto anterior.

La carpeta src es la única carpeta necesaria al implementar su aplicación angular, pero debe reconfigurar el entorno de desarrollo con esta solución.

Usando el complemento ngcWebpack, recibí este error cuando no especificaba un mainPath o entryModule.

necesita habilitar la directiva ngModel. Esto se hace agregando el FormsModule a la matriz importaciones [] en el AppModule.

Luego, también debe agregar la importación desde @ angular / forms en el archivo app.module.ts: import {FormsModule} desde ''@ angular / forms'';