Angular2 not working with Visual Studio 2015 Update
Question
I am trying get started with Angular2 in VS 2015. I am following this article .
But when running index.html file, its get stuck on ' Loading ...'.
Here are some configurations/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>
Getting the following screenshots while debugging with Firebug:
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']);
2 answers
solution1
1 2016-07-26 17:53:42
Try out this link, it has latest Angular 2 RC bits, ASP.NET Core 1.0 RTM. There is GITHUB repo on that link
http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/
solution2
1 ACCPTED 2016-08-03 09:48:27
After a lot of searching and tries, I found the solution, and I am posting it here, so that, it could help someone facing the similar problem.
Since I am using VS 2015 Update 3, TypeScript 1.8.35.0, npm version 3.10.6. After updating to get all these versions(before I was using an older version of npm, after reading some posts I found that it should be updated to latest version), then I make changes in package.json file. For example, changes the line "@angular/core": "2.0.0-rc.1", to "@angular/core": "2.0.0-rc.4", .
So my final package.json file becomes:
{
"name": "WebApplication8",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@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"
}
Of-course, when you save the file, give Visual Studio some time to restore/install all dependencies.
And finally it works, just showing the message:
My First Angular 2 App
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.