Starting my journey with Angular2 in Visual Studio 2015. Following advice from this helpful article.
Encountering an issue when running the index.html file, it gets stuck on 'Loading...'.
Here are the key configurations and code files being used. Package.json file:
{
"name": "WebApplication8",
"version": "1.0.0",
"description": "",
"main": "index.js",
"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",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
},
"devDependencies": {
"typings": "^1.0.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Startup.js file:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(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.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'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);
app.components.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
And index.html:
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/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="startup.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
Test
<br />
<my-app>Loading...</my-app>
</body>
</html>
Screenshots obtained while debugging using Firebug: https://i.stack.imgur.com/qEpbD.png
https://i.stack.imgur.com/obJkw.png
Gulp.js file:
var gulp = require('gulp');
gulp.task('thirdparty', function () {
gulp.src('./node_modules/core-js/**/*.js')
.pipe(gulp.dest('./wwwroot/node_modules/core-js'));
gulp.src('./node_modules/@angular/**/*.js')
.pipe(gulp.dest('./wwwroot/node_modules/@angular'));
gulp.src('./node_modules/zone.js/**/*.js')
.pipe(gulp.dest('./wwwroot/node_modules/zone.js'));
gulp.src('./node_modules/systemjs/**/*.js')
.pipe(gulp.dest('./wwwroot/node_modules/systemjs'));
gulp.src('./node_modules/reflect-metadata/**/*.js')
.pipe(gulp.dest('./wwwroot/node_modules/reflect-metadata'));
gulp.src('./node_modules/rxjs/**/*.js')
.pipe(gulp.dest('./wwwroot/node_modules/rxjs'));
});
gulp.task('copy', function () {
gulp.src('./app/**/*.*')
.pipe(gulp.dest('./wwwroot/app'));
});
gulp.task('watch', function () {
gulp.watch('./app/**/*.*', ['copy']);
});
gulp.task('default', ['thirdparty', 'copy', 'watch']);