title: Error: Error: No NgModule metadata found for 'AppComponent'
body: <p>I am trying to use Django with Angular2. I have a working Django project. I am getting this error while trying to use Angular2 with it: </p>
  
  <blockquote>
    <p>Error: Error: No NgModule metadata found for 'AppComponent'.<br>
    at new BaseException (<a href="http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27" rel="nofollow noreferrer">http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27</a>)<br>
    at NgModuleResolver.resolve (<a href="http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:12956:27" rel="nofollow noreferrer">http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:12956:27</a>)<br>
    at CompileMetadataResolver.getNgModuleMetadata (<a href="http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:13200:51" rel="nofollow noreferrer">http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:13200:51</a>)<br>
    at RuntimeCompiler._compileComponents (<a href="http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51" rel="nofollow noreferrer">http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51</a>)<br>
    at RuntimeCompiler._compileModuleAndComponents (<a href="http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41" rel="nofollow noreferrer">http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41</a>)<br>
    at RuntimeCompiler.compileModuleAsync (<a href="http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25" rel="nofollow noreferrer">http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25</a>)<br>
    at PlatformRef_._bootstrapModuleWithZone (<a href="http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9991:29" rel="nofollow noreferrer">http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9991:29</a>)<br>
            at PlatformRef_.bootstrapModule (<a href="http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9984:25" rel="nofollow noreferrer">http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9984:25</a>)<br>
            at Object.eval (<a href="http://user:8000/ng/src/main.js:5:53" rel="nofollow noreferrer">http://user:8000/ng/src/main.js:5:53</a>)<br>
            at eval (<a href="http://user:8000/ng/src/main.js:17:4" rel="nofollow noreferrer">http://user:8000/ng/src/main.js:17:4</a>)<br>
        Evaluating <a href="http://user:8000/ng/src/main.js" rel="nofollow noreferrer">http://user:8000/ng/src/main.js</a><br>
        Error loading <a href="http://user:8000/ng/src/main.js" rel="nofollow noreferrer">http://user:8000/ng/src/main.js</a></p>
  </blockquote>
  
  <p>Part of package.json file:</p>
  
  <pre><code>"dependencies": {
  "@angular/common":  "2.0.0-rc.5",
  "@angular/compiler":  "2.0.0-rc.5",
  "@angular/core":  "2.0.0-rc.5",
  "@angular/forms": "0.2.0",
  "@angular/http":  "2.0.0-rc.5",
  "@angular/platform-browser":  "2.0.0-rc.5",
  "@angular/platform-browser-dynamic":  "2.0.0-rc.5",
  "@angular/router":  "3.0.0-beta.2",
  "@angular/router-deprecated":  "2.0.0-rc.2",
  "@angular/upgrade":  "2.0.0-rc.5",
  
  "systemjs": "0.19.27",
  "core-js": "^2.4.0",
  "reflect-metadata": "^0.1.3",
  "rxjs": "5.0.0-beta.6",
  "zone.js": "^0.6.12",
  
  "angular2-in-memory-web-api": "0.0.15",
  "bootstrap": "^3.3.6"},
  </code></pre>
  
  <p>main.ts:</p>
  
  <pre><code>import { bootstrap } from '@angular/platform-browser-dynamic';
  import { AppComponent } from './app/app.component';
  import {appRouterProviders} from "./app/app.route";
  import {HTTP_PROVIDERS} from "@angular/http";
  import {enableProdMode} from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module'; &lt;-- Added this as per an answer below. Error is still there. 
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { RouterModule } from '@angular/router';
  import { routes } from './app.routes';
  
  import { AppComponent }  from './app.component';
  
  @NgModule({
    imports:      [ BrowserModule,FormsModule,HttpModule, 
  RouterModule.forRoot( ROUTES, { useHash: true } ) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;script&gt;
    window.ANGULAR_URL = "{{ ANGULAR_URL }}";
    System.import('/ng/src/main.js').catch(function(err){
        console.error(err);
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have set ANGULAR_URL in <code>settings.py</code> file of Django. It shows /ng/ on browser. I searched a lot and tried changing the dependencies in <code>package.json</code> so many times. I made sure I did <code>npm install</code> every time I made changes in <code>package.json</code>. I have seen many syntax changes with different versions. If this  might be the issue, here are the npm and node versions I am using:
  <code>npm 4.1.1</code>  and <code>node v4.8.3</code>. I am running Django on port 8000.</p>
  
  <p>app.component.ts file:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES } from '@angular/router';
  @Component({
  selector: 'my-app',
  template: `
      &lt;h1&gt;My First Angular 2 App&lt;/h1&gt;
      &lt;nav&gt;
        &lt;a routerLink="/component1" routerLinkActive="active"&gt;Component 1&lt;/a&gt;
        &lt;a routerLink="/component2" routerLinkActive="active"&gt;Component 2&lt;/a&gt;
      &lt;/nav&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  `,
  directives: [ROUTER_DIRECTIVES]
  })
  export class AppComponent { }
  </code></pre>
  
  <p><strong>UPDATE-1</strong></p>
  
  <p>scripts part of package.json file:</p>
  
  <pre><code>"scripts": {
  "start": "tsc &amp;&amp; concurrently \"tsc -w\" \"lite-server\" ",
  "docker-build": "docker build -t ng2-quickstart .",
  "docker": "npm run docker-build &amp;&amp; docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
  "pree2e": "npm run webdriver:update",
  "e2e": "tsc &amp;&amp; concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
  "lint": "tslint ./app/**/*.ts -t verbose",
  "lite": "lite-server",
  "postinstall": "typings install",
  "test": "tsc &amp;&amp; concurrently \"tsc -w\" \"karma start karma.conf.js\"",
  "test-once": "tsc &amp;&amp; karma start karma.conf.js --single-run",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "typings": "typings",
  "webdriver:update": "webdriver-manager update"
  },
  </code></pre>
  
  <p>By the way, I have been following <a href="https://4sw.in/blog/2016/django-angular2-tutorial/" rel="nofollow noreferrer">this</a> to use Angular with Django.</p>
  
  <p><strong>UPDATE-2</strong></p>
  
  <p>I have just realised that my tsconfig.json and typings.json are not in same place. I put both in same place as package.json is present. Now I am getting the following error :</p>
  
  <blockquote>
    <p>error TS5023: Unknown compiler option 'lib'.</p>
  </blockquote>
  
  <p><strong>UPDATE-3</strong></p>
  
  <p>tsconfig.json file: </p>
  
  <pre><code>{
   "compilerOptions": { 
   "target": "es5",
   "module": "commonjs",
   "moduleResolution": "node",
   "sourceMap": true,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "lib": [ "es2015", "dom" ],
   "noImplicitAny": true,
   "suppressImplicitAnyIndexErrors": true
   }
  }
  </code></pre>
  
  <p>And my <code>tsc -v</code> gives <code>Version 2.1.5</code>. Now I have changed the <code>"typescript": "^1.8.10",</code> to <code>"typescript": "^2.1.5"</code>. So the error mentioned in update -2 i not there but it shows this: </p>
  
  <blockquote>
    <p>Error: TypeError: Cannot read property 'forRoot' of undefined   </p>
    
    <p>Error: TypeError: Cannot read property 'forRoot' of undefined<br>
            at Object.eval (<a href="http://user:8000/ng/src/app/app.module.js:22:114" rel="nofollow noreferrer">http://user:8000/ng/src/app/app.module.js:22:114</a>)<br>
            at eval (<a href="http://user:8000/ng/src/app/app.module.js:29:4" rel="nofollow noreferrer">http://user:8000/ng/src/app/app.module.js:29:4</a>)<br>
            at eval (<a href="http://user:8000/ng/src/app/app.module.js:30:3" rel="nofollow noreferrer">http://user:8000/ng/src/app/app.module.js:30:3</a>)<br>
            at eval (anonymous)<br>
        Evaluating <a href="http://user:8000/ng/src/app/app.module.js" rel="nofollow noreferrer">http://user:8000/ng/src/app/app.module.js</a><br>
        Evaluating <a href="http://user:8000/ng/src/main.js" rel="nofollow noreferrer">http://user:8000/ng/src/main.js</a><br>
        Error loading <a href="http://user:8000/ng/src/main.js" rel="nofollow noreferrer">http://user:8000/ng/src/main.js</a></p>
  </blockquote>