Angular 2 : No NgModule metadata found

no ngmodule metadata found for component
no ngmodule metadata found for 'appmodule' angular 9
no ngmodule metadata found for '[object object]'
error in no ngmodule metadata found for admin module
could not find the implementation for builder @angular-devkit/build-angular:dev-server
error in appmodule is not an ngmodule
no module factory available for dependency type: contextelementdependency
angular cli

I'm brand new to Angular 2 and attempting to follow along with a video tutorial I found. Despite following all of the steps, Angular just won't work; I get the following error:

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

and the component doesn't load at all.

Here are my files:

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

Thanks for your time.


The problem is in your main.ts file.

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

You are trying to bootstrap App, which is not a real module. Delete these two lines and replace with the following line:

platformBrowserDynamic().bootstrapModule(AppModule);

and it will fix your error.

"No NgModule metadata found for 'AppModule'" after Upgrade to , @angular/compiler-cli@5.2.0 requires typescript@'>=2.4.2 <2.6.0' but 2.6.2 was found instead. But it builds. I was on 2.5.3 previously. It seems like you are including @angular/core in both of your bundles. This way, you also have 2 prototypes for NgModule. This setup is not supported, i.e. we need to have only one version of @angular/core.


I had this error even though I had everything that the answers above suggested in place. A simple edit in the app.module.ts file ( like delete a bracket and put it back) did the trick.

Angular 6 upgrade: ERROR in No NgModule metadata found for , I looked through existing issues but couldn't find anything helpful and certainly nothing mentioning the specificness to Windows. +1 9 -1 2. @angular/cli: allow colon separated schematic name in generate (f9a9d75) @angular/cli: allow for schema-less schematics to be generated (d4dc2e3) @angular/cli: delete node_modules on eject e2e (5c00e1f) @angular/cli: eject now remove all hardcoded paths (53e84fe), closes #9335; @angular/cli: exclude nodejs built-ins from process.cwd() resolve


Try to remove node_modules rm -rf node_modules and package-lock.json rm -rf package-lock.json, after that run npm install.

Angular – All Possible Solutions for 'No NgModule' – Stack 24/7, The error “No NgModule metadata found for 'AppModule'” could be caused by various reason: Moving Angular project folder. Upgrading dependencies. Upgrading Angular version. Angular: ERROR in No NgModule metadata found for 'AppModule' When trying to run an angular app I was getting the error: ERROR in No NgModule metadata found for 'AppModule'.


After upgrading to Angular 6, I encountered the "ERROR in No NgModule metadata found for 'AppModule'." with the angular-bootstrap-md package, which requires a tsconfig.json "include" as follows:

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

After days of troubleshooting and hair pulling, the solution was to arrange the list so that the app.module.ts was located first, under "src/**/*.ts". An Angular bug, perhaps?

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

I genuinely hope this helps somebody, as I tried everything in this posting and nothing helped. After this change, everything compiles and works beautifully, as expected.

Getting "No NgModule metadata found for 'class{}'." with custom , No NgModule metadata found for 'undefined' on angular lazy loading routes i have try load to children module in angular2/4 routing but i got Error: Error:  At a high level, NgModules are a way to organize Angular apps and they accomplish this through the metadata in the @NgModule decorator. The metadata falls into three categories: Static: Compiler configuration which tells the compiler about directive selectors and where in templates the directives should be applied through selector matching.


The issue is fixed only when re installed angular/cli manually. Follow following steps. (run all command under Angular project dir)

1)Remove webpack by using following command.

npm remove webpack

2)Install cli by using following command.

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

after successfully test app, it will work :)

if not then follow below steps.

1) Delete node_module folder.

2) Clear cache by using following command.

npm cache clean --force

3) Install node packages by using following command.

npm install

4)Install angular@cli by using following command.

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

Note :if failed,try again :)

5) Celebrate :)

No NgModule metadata found for 'CustomerComponent', Error: No NgModule metadata found for 'AppModule' · Getting Started JS: Timeline: Modules: onActivityResumed com.tns.gen.android.app. from "​nativescript-angular/platform"; import { setStatusBarColors } from ". An NgModule is a class adorned with the @NgModule decorator function. @NgModule takes a metadata object that tells Angular how to compile and run module code. It identifies the module's own components, directives, and pipes, making some of them public so external components can use them.


No NgModule metadata found for 'undefined' on angular lazy , No NgModule metadata found for 'AppModule' when trying t Kybeidos pro asked 2 years ago Damian Gemza staff answered 2 years ago User: Pro; Premium support: No; Technology: Angular; MDB Version: 6.2.3; Device: Windows  Decorator that marks a class as an NgModule and supplies configuration metadata. The set of injectable objects that are available in the injector of this module. The set of components, directives, and pipes ( declarables ) that belong to this module. The set of NgModules whose exported declarables are available to templates in this module.


Error: No NgModule metadata found for 'AppModule', js:13854 Uncaught Error: No NgModule metadata found for 'App'. and the component doesn't load at all. Here are my files: package.json: {  Module in Angular 2. Fast forward to Angular 2. Angular Module is now called @NgModule. Question 1 Why do we need @NgModule? New Course: Make 20 React Apps. Short Answer: Angular Modules help to organize an application into cohesive blocks of functionalities and extend it with capabilities from external libraries.


No NgModule metadata found for 'AppModule' when trying t , Angular Topic: No NgModule metadata found for 'AppModule' when trying to start admin-pro in IntelliJ fixed it Kybeidos pro asked a year ago