Menu
I have spent way too much time on this, but I am stuck and can't figure out how to get Angular2 with Typescript to run. I keep getting a 404 for the components:
Error loading http://localhost:5000/angular2/platform/browser as "angular2/platform/browser" from http://localhost:5000/appScripts/boot.js
Here is my folder structure:
My index.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular 2 with ASP.NET Core</title>
<!-- 1. Load libraries -->
<script src="libs/es6-shim/es6-shim.min.js"></script>
<script src="libs/zone.js/dist/zone.js"></script>
<script src="libs/reflect-metadata/Reflect.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="./appScripts/config.js"></script>
<script>
System.import('appScripts/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
The boot.ts:
/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app'
bootstrap(AppComponent);
The app.ts:
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/angularjs/angular-route.d.ts" />
/// <reference path="../typings/angularjs/angular.d.ts" />
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: 'My First Angular 2 App'
})
export class AppComponent { }
The config.js
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'appScripts', // 'dist',
'rxjs': 'libs/rxjs',
'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
'@angular': 'libs/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
Here is more of the folder structure to give you a better idea of the project structure.
Here is my package.json
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.7"
},
"devDependencies": {
"gulp": "^3.9.0",
"gulp-autoprefixer": "~3.1.0",
"gulp-concat": "~2.6.0",
"gulp-imagemin": "~2.4.0",
"imagemin-pngquant": "~4.2.0",
"jshint": "2.9.2",
"gulp-jshint": "2.0.0",
"jshint-stylish": "~2.1.0",
"rimraf": "~2.5.1",
"gulp-minify-css": "~1.2.4",
"gulp-sass": "2.2.0",
"gulp-uglify": "~1.5.1",
"gulp-sourcemaps": "~1.6.0",
"gulp-plumber": "1.1.0",
"gulp-notify": "2.2.0",
"beepbeep": "1.2.0",
"gulp-rename": "1.2.2",
"gulp-sourcemap": "1.0.1",
"gulp-clean-css": "2.0.6",
"main-bower-files": "2.13.0",
"gulp-filter": "4.0.0",
"typescript": "^1.8.10",
"gulp-typescript": "^2.13.1",
"live-server": "1.0.0",
"typings": "^1.0.4",
"gulp-tsc": "^1.1.5"
}
}
Thank you in advance for your help and please let me know if I can provide some more details.
752
You're using rc.1 version of angular but trying to import beta version.
You need to use @angular/.. like this:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component } from '@angular/core'; // instead of 'angular2/core'
....
For more details see also changelog https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02
To import various symbols please adjust the paths in the following way:
angular2/core -> @angular/core
angular2/compiler -> @angular/compiler
angular2/common -> @angular/common
angular2/platform/browser -> @angular/platform-browser + @angular/platform-browser-dynamic
angular2/platform/server -> @angular/platform-server
angular2/testing -> @angular/core/testing
angular2/upgrade -> @angular/upgrade
angular2/http -> @angular/http
angular2/router -> @angular/router-deprecated (from beta.17 for backwards compatibility)
new package: @angular/router - component router with several breaking changes
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
