Menu
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.
318
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.
123
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
