Angular 2 : No NgModule metadata found
AngularTypescriptWebpackAngular Problem Overview
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.
Angular Solutions
Solution 1 - Angular
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.
Solution 2 - Angular
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.
Solution 3 - Angular
Try to remove node_modules
rm -rf node_modules and package-lock.json rm -rf package-lock.json,
after that run npm install.
Solution 4 - Angular
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.
Solution 5 - Angular
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.
-
Delete node_module folder.
-
Clear cache by using following command.
npm cache clean --force
-
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 :)
-
Celebrate :)
Solution 6 - Angular
>I would recommend restarting the application. Most of the cases editor won't be able to detect the changes in the lazy loaded module.
Solution 7 - Angular
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 ;)
Solution 8 - Angular
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.
Solution 9 - Angular
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
Solution 10 - Angular
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)
Solution 11 - Angular
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,
**,**
],
})
Solution 12 - Angular
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'
Solution 13 - Angular
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...
Solution 14 - Angular
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.
Solution 15 - Angular
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';
Solution 16 - Angular
I finally found the solution.
- 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:
- Delete node_module folder.
- 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 step 4 again. It will work.
Solution 17 - Angular
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.
Solution 18 - Angular
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/cli@1.7.4
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.
Solution 19 - Angular
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.
Solution 20 - Angular
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": [] }
Solution 21 - Angular
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.
Solution 22 - Angular
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)
}
Solution 23 - Angular
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 {
}
Solution 24 - Angular
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.
Solution 25 - Angular
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.
Solution 26 - Angular
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);
}
Solution 27 - Angular
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
Solution 28 - Angular
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)
Solution 29 - Angular
Using ngcWebpack Plugin I got this error when not specifying a mainPath or entryModule.