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.
This question is related to
angular
typescript
webpack
There are more reasons for getting this error. This means your application failed to build as expected.
Check for the following..
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:
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:
That's is, all works nice.
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": []
}
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.
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'
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)
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.
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.
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.
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);
}
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.
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 :)
Using ngcWebpack Plugin I got this error when not specifying a mainPath or entryModule.
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)
}
If you are having this issue in Angular 8 or Angular 9 (like I was), after:
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...
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 ;)
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)
Try to remove node_modules
rm -rf node_modules and package-lock.json rm -rf package-lock.json,
after that run npm install.
I would recommend restarting the application. Most of the cases editor won't be able to detect the changes in the lazy loaded module.
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
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.
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,
**,**
],
})
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.
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 {
}
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.
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';
I finally found the solution.
npm remove webpack
npm install --save-dev @angular/cli@latest
after successfully test app, it will work :)
If not then follow below steps:
npm cache clean --force
npm install
npm install --save-dev @angular/cli@latest
Note: If failed, try step 4 again. It will work.
Source: Stackoverflow.com