CODEWITHSUNDEEP
angulartypescriptwebpack
B B
B B

Reputation: 839

Angular 2 : No NgModule metadata found

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.

Upvotes: 72

Views: 144260

Answers (29)

Rodrigo Jo&#227;o Bertotti
Rodrigo Jo&#227;o Bertotti

Reputation: 5491

For me, the problem was that I had created a method named hasOwnProperty(obj, prop) in a Angular component. The solution for me was deleting or renaming the method

Upvotes: 0

Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

I just had the same issue with a lazy-loaded module. It turns out that the name of the module was incorrect.

Check the names of all your modules for possible typos.

Upvotes: 1

shyam_
shyam_

Reputation: 2470

If Nothing else works try following

if (environment.production) {
        // there is no need of this if block, angular internally creates following code structure when it sees --prod
        // but at the time of writting this code, else block was not working in the production mode and NgModule metadata
        // not found for AppModule error was coming at run time, added follow code to fix that, it can be removed probably 
        // when angular is upgraded to latest version or if it start working automatically. :)
        // we could also avoid else block but building without --prod saves time in building app locally.
        platformBrowser(extraProviders).bootstrapModuleFactory(<any>AppModuleNgFactory);
    } else {
        platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
    }

Upvotes: 0

doxxy
doxxy

Reputation: 41

If you are having this issue in Angular 8 or Angular 9 (like I was), after:

  • Clearing your npm cache
  • reinstalling all node_modules
  • checking your "include" and "files" tsconfig setting etc

and you're still having issues, and you are Lazy Loading Modules check your angularCompilerOptions in your tsconfig.json or tsconfig.app.json, and make sure that "strictMetadataEmit" is set to false or is removed.

"angularCompilerOptions": {
    "preserveWhitespaces": false,
    "strictInjectionParameters": true,
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    // "strictMetadataEmit": true <-- remove this setting or set to false
},

The setting is to help library creators which should never have lazy loaded modules built in. I had previously (using Angular 7) set all "strict" options to true...

Upvotes: 3

Satori-Stan
Satori-Stan

Reputation: 63

In my case, I had defined a couple of (private) static methods in one of my components and was using them in the same component.

Upvotes: 0

WasiF
WasiF

Reputation: 28859

I had the same issue and I resolved it by closing the editor i.e. Visual Studio Code, started it again, run ng serve and it worked.

Upvotes: 0

MOH3N
MOH3N

Reputation: 1065

This error says necessary data for your module can't be found. In my case i missed an @ symbol in start of NgModule.

Correct NgModule definition:

 @NgModule ({ 
    ... 
 })
 export class AppModule {

 }

My case (Wrong case) :

NgModule ({ // => this line must starts with @
   ... 
})
export class AppModule {

}

Upvotes: 0

Ashish
Ashish

Reputation: 2068

I would recommend restarting the application. Most of the cases editor won't be able to detect the changes in the lazy loaded module.

Upvotes: 7

Tim Thompson
Tim Thompson

Reputation: 142

I've encountered this problem twice now. Both times were problems with how I was implementing my lazy loading. In my routing module I had my routes defines as:

  {
    path: "game",
    loadChildren: () => import("./game/game.module").then(m => {m.GameModule})
  }

But this is wrong. After the second => you don't need curly braces. it should look like this:

  {
    path: "game",
    loadChildren: () => import("./game/game.module").then(m => m.GameModule)
 }

Upvotes: 0

KBell
KBell

Reputation: 511

I had the same problem but none of all those solutions worked for me. After further investigation, I found out that an undesired import was in one of my component.

I use setTimeout function in app.component but for any reason Visual Studio added import { setTimeout } from 'timer'; where it was not needed. Removing this line fixed the issue.

So remember to check your imports before going further. Hope it may help someone.

Upvotes: 0

Kapil Thakkar
Kapil Thakkar

Reputation: 870

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 :)

Upvotes: 9

Tom Mettam
Tom Mettam

Reputation: 2963

I found that the cause of this problem in my case, was that I've combined my Angular app with a node.js application in the same source tree, and in the root tsconfig.json I had:

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

I changed this to

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

And then to prevent node types being uses in your angular app, add this to tsconfig.app.json:

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

Upvotes: 0

Kenneth Chan
Kenneth Chan

Reputation: 530

Hope it can help. In my case, I work with lazy-load module and I found this mistake lead to ERROR in No NgModule metadata found for 'MyModule'.

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

If I run ng serve --aot chrome dev tool can tell me Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'

Upvotes: 2

user6600549
user6600549

Reputation:

In my case, I was trying to upgrade my angular 6 project using ng update after that the entire universe collapse.

I was trying to update my project using this commands:

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

And then I found a problem with rxjs package and I run also this command. - npm install --save rxjs

And then I get the error

No NgModule metadata found

I solve this by deleting my node_modules folder in the project root and then I run:

  • npm install

That's is, all works nice.

Upvotes: 0

Sidd Thota
Sidd Thota

Reputation: 2249

We've faced this issue on Angular Cli 1.7.4 at times. Initially we've got 

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

And fixing this lead to the above issue.

We've removed package-lock.json

npm remove webpack

npm cache clean --force

You can also remove your node_modules folder. And then clean the cache. re-installed angular cli: 

npm install @angular/[email protected]

And then you can do npm install again, just to make sure if everything is installed.

Then run

npm ls --depth 0

To make sure if all your node_modules are in sync with each other. If there are any dependency mismatching, this is the opportunity for us to figure out.

Finally run npm start/ng serve. it should fix everything.

This is out cheat code that we'll follow if we run into any issues with cli, before we dig deeper. 95% of times it fixes all the issues.

Hope that helps.

Upvotes: 0

Ahmed Adewale
Ahmed Adewale

Reputation: 3123

I finally found the solution.

  1. Remove webpack by using following command.
npm remove webpack
  1. 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
  1. Install node packages by using following command.
npm install
  1. Install angular@cli by using following command.
npm install --save-dev @angular/cli@latest

Note: If failed, try step 4 again. It will work.

Upvotes: 1

Abdullah Sheikh
Abdullah Sheikh

Reputation: 11

you need to enable the ngModel directive. This is done by adding the FormsModule to the imports[] array in the AppModule.

You then also need to add the import from @angular/forms in the app.module.ts file: import { FormsModule } from '@angular/forms';

Upvotes: 1

Bahri Gungor
Bahri Gungor

Reputation: 2319

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.

Upvotes: 26

Thomas Gotwig
Thomas Gotwig

Reputation: 4449

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

Upvotes: 33

arturh
arturh

Reputation: 6106

Using ngcWebpack Plugin I got this error when not specifying a mainPath or entryModule.

Upvotes: -1

Aman Jain Hingerh
Aman Jain Hingerh

Reputation: 21

I had the same problem and couldn't solve it after reading all the above answers. Then I noticed that an extra comma in declarations was creating a problem. Removed it, problem solved.

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

Upvotes: 2

rohit-biswas
rohit-biswas

Reputation: 845

Late answer, but this might help someone. I got the same error, tried out all the previously mentioned suggestions, banged my head against the wall, but nothing worked.

On careful observation, I noticed the following in app.module.ts:

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

So I banged my head some more. The extra comma, very innocently higlighted, by WebStorm, as a mild warning, wreaked havoc by inserting an empty slot in the Array. Watchout fot the elision trap ;)

Upvotes: 6

Louis Beullens
Louis Beullens

Reputation: 41

I had this issue when i cloned from a git repository and I had it resolved when I created a new project and re-inserted the src folder from the old project.

The src folder is the only folder needed when deploying your angular application but you must reconfigure the dev environment, using this solution.

Upvotes: 1

DJDaveMark
DJDaveMark

Reputation: 2855

With Angular 5, I solved a similar problem by ugrading to @angular/cli 1.6.1 from 1.5.5:

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

During ng serve the error I got was:

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)

Upvotes: 2

Alf Moh
Alf Moh

Reputation: 7437

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.

Upvotes: 105

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10834

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.

Upvotes: 41

Ignatius Andrew
Ignatius Andrew

Reputation: 8258

There are more reasons for getting this error. This means your application failed to build as expected.

Check for the following..

  • Check whether the node_modules version are not changed, this is the primary reason.
  • If you are moving from Some other Build tool to webpack, For example Systemjs to Webpack, If some of your dependencies are not modular in nature you may get this error, check for that too.
  • Check for Obsolete features of the framework, Ex: "HTTP_PROVIDERS" in angular 2 and remove them.
  • If you are upgrading, then make sure you are following the current syntax of the Framework, for Ex: routing syntax has been changed in Angular2..
  • Check the Bootstraping process and make sure you are loading the correct Module.

Upvotes: 3

micronyks
micronyks

Reputation: 55443

I'll give you few suggestions.Remove all these as mentioned below

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)

Upvotes: -1

nickspoon
nickspoon

Reputation: 1397

In your main.ts, you are bootstrapping both your AppModule and your App. It should just be the AppModule, which then bootstraps the App.

If you compare your main.ts to the docs you'll see the difference - just remove all references to App from main.ts

Upvotes: 2

Related Questions