I tried to get Angular2 to run with my ASP.net Core application, seems fine so far, the only problem I run into is this error when I start my application:
Error: Error: XHR error (404 Not Found) loading http://localhost:51435/traceur(…)
I don't have a clue why, I removed the comments from my systemjs.config.js and googled about 1 hour, nothing seems to work. Maybe one of you can help me.
My package.json
{
"version": "1.0.0",
"name": "projecthome",
"private": true,
"scripts": {
"typings": "typings",
"postinstall": "typings install"
},
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/compiler-cli": "0.5.0",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.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-rc.1",
"@angular/upgrade": "2.0.0-rc.5",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.17",
"bootstrap": "^3.3.6",
"jquery": "2.2.2",
"font-awesome": "^4.6.3"
},
"devDependencies": {
"gulp": "3.9.1",
"gulp-typescript": "^2.13.6",
"typescript": "^1.8.10",
"typings": "^1.3.2"
}}
My _Layout.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@ViewBag.Title</title>
<base href="/">
<link href="~/lib/css/bootstrap.css" rel="stylesheet" />
<link href="~/lib/css/font-awesome.css" rel="stylesheet" />
@RenderSection("styles", required: false)
@*Solve IE 11 issues *@
@*<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>*@
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="~/lib/js/systemjs.config.js"></script>
<script src="~/lib/js/jquery.js"></script>
<script src="~/lib/js/bootstrap.js"></script>
</head>
<body>
<div>
@RenderBody()
</div>
@RenderSection("scripts", required: false)
<script type="text/javascript">
@RenderSection("customScript", required: false)
</script>
</body>
</html>
Index.cshtml
@{
ViewBag.Title = "ProjectHome";
}
@section styles
{
<link href="~/lib/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" />
}
<projecthome-app>
<div class="loading">Loading</div>
</projecthome-app>
@section scripts
{
}
@section customScript
{
System.import('app').catch(console.log.bind(console));
}
systemjs.config.js
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'projecthome-app',
template: '<h1>hello</h1>'
})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
And finally my project structure
My systejs.config.js will be copied to wwwroot/lib/js with gulp
