Error: Error: No NgModule metadata found for 'AppComponent'

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:

Error: Error: No NgModule metadata found for 'AppComponent'.
at new BaseException (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27)
at NgModuleResolver.resolve (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:12956:27)
at CompileMetadataResolver.getNgModuleMetadata (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:13200:51)
at RuntimeCompiler._compileComponents (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51)
at RuntimeCompiler._compileModuleAndComponents (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41)
at RuntimeCompiler.compileModuleAsync (http://user:8000/ng/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25)
at PlatformRef_._bootstrapModuleWithZone (http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9991:29)
at PlatformRef_.bootstrapModule (http://user:8000/ng/node_modules/@angular/core//bundles/core.umd.js:9984:25)
at Object.eval (http://user:8000/ng/src/main.js:5:53)
at eval (http://user:8000/ng/src/main.js:17:4)
Evaluating http://user:8000/ng/src/main.js
Error loading http://user:8000/ng/src/main.js

Part of package.json file:

"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"},

main.ts:

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';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts:

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 { }

index.html:

<script>
  window.ANGULAR_URL = "";
  System.import('/ng/src/main.js').catch(function(err){
      console.error(err);
  });
</script>

I have set ANGULAR_URL in settings.py file of Django. It shows /ng/ on browser. I searched a lot and tried changing the dependencies in package.json so many times. I made sure I did npm install every time I made changes in package.json. 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: npm 4.1.1 and node v4.8.3. I am running Django on port 8000.

via phanny