Angular 2 application not working in an ASP.NET 5 Environment

Question

I have an Angular 2 application (In an ASP.NET 5 environment) that is working when running in Chrome, when running in IE 11 I'm getting the following error message in the console

Error: SyntaxError: Syntax error

at ZoneDelegate.prototype.invoke (http://localhost:52801/lib/angular2-polyfills.js:347:14)
at Zone.prototype.run (http://localhost:52801/lib/angular2-polyfills.js:242:18)
at Anonymous function (http://localhost:52801/lib/angular2-polyfills.js:597:18)

From what I have read there are problems when running Angular 2 applications from IE 11, most of these problems can be resolved by including the various shim and polyfills files in the correct order. Here are my javascript files that I include

<script src="~/lib/es6-shim.js"></script>
<script src="~/lib/systemjs/dist/system-polyfills.js"></script>
<script src="~/lib/shims_for_ie.js"></script>
<script src="~/lib/angular2-polyfills.js"></script>
<script src="~/lib/systemjs/dist/system.js"></script>
<script src="~/lib/rx.js"></script>
<script src="~/lib/angular2.dev.js"></script>
<script src="~/lib/router.dev.js"></script>

and my system config

<script>
    System.config({ packages: { app: { defaultExtension: 'js' } } });
    System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

Is there anything else that I have to do to get the application to run in IE 11?

github.com/angular/angular/issues/8122#issuecomment-223199997 It has been recommended to use core-js instead of es6-shim for shimming, see #8112 (comment). Might be worth a try. What Angular2 version are you using? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 2, 2016 at 6:35
Ok, I added core-js and read that the file that is supposed to be used is now called shim.js, it's all very confusing (documentation available is not consistent). I'm now getting a 'require is undefined' error. I'm using Angular 2.0.0-beta.17 — Andre Lombaard
– Andre Lombaard, Commented Jun 2, 2016 at 10:02
I'm using Dart therefore don't know about polyfills and systemjs configuration. I just stumbled over above linked issue just before I saw your question. Maybe stackoverflow.com/questions/34730010/… provides something useful. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 2, 2016 at 10:05
Thanks for the help, it's just to get these initial issues out of the way — Andre Lombaard
– Andre Lombaard, Commented Jun 2, 2016 at 10:31

Andre Lombaard · Accepted Answer · 2016-06-14 06:00:13Z

You can also work through my Setting up Angular 2 in an ASP.NET 5 environment article on Code Project and download the source files.

After a lot of research I finally managed to get Angular 2 working within an ASP.NET 5 environment.

First of all make sure that you at least have the following versions of the IDE and other software tools installed.

Visual Studio 2015 14.0.24720.00 Update 1
Resharper Ultimate 2016.1.2 (If you are using ReSharper)
TypeScript 1.8.6
nodejs 4.4.5

To successfully setup an Angular 2 application you would need the following files

[Project Root Folder]/typings.json containing

{
    "globalDependencies": 
    {
        "core-js": "registry:dt/core-js#0.0.0+20160317120654",
        "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
        "node": "registry:dt/node#4.0.0+20160509154515"
    }
}

[Project Root Folder]/package.json containing

{
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "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",
    "angular2-in-memory-web-api": "0.0.11",
   "bootstrap": "^3.3.6"
 },
 "devDependencies": {
    "gulp": "3.9.1", 
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

[Project Root Folder]/gulpfile.js containing

var gulp = require('gulp');
var rimraf = require('rimraf');

var paths = {
    npm: './node_modules/',
    angular: './wwwroot/lib/@angular/',
    angular2InMemoryWebApi: './wwwroot/lib/angular2-in-memory-web-api/',
    rxjs: './wwwroot/lib/rxjs/',
    lib: './wwwroot/lib/'
};

var angular = [
    paths.npm + '@angular/**/*'
];

var angular2InMemoryWebApi = [
    paths.npm + 'angular2-in-memory-web-api/**/*'
];

var rxjs = [
    paths.npm + 'rxjs/**/*'
];

var libs = [
    paths.npm + 'core-js/client/shim.min.js',
    paths.npm + 'zone.js/dist/zone.js',
    paths.npm + 'reflect-metadata/Reflect.js',
    paths.npm + 'systemjs/dist/system.src.js'
];

gulp.task('angular', function() {
    return gulp.src(angular).pipe(gulp.dest(paths.angular));
});

gulp.task('angular2InMemoryWebApi', function () {
    return gulp.src(angular2InMemoryWebApi)
           .pipe(gulp.dest(paths.angular2InMemoryWebApi));
});

gulp.task('rxjs', function () {
    return gulp.src(rxjs).pipe(gulp.dest(paths.rxjs));
});

gulp.task('libs',function() {
    return gulp.src(libs).pipe(gulp.dest(paths.lib));
});

gulp.task('clean', function(callback) {
    rimraf(paths.lib, callback);
});

Remember to execute these gulp tasks that will move the Angular 2 dependencies to the [Project Root Folder]/wwwroot.

[Project Root Folder]/scripts/app.component.ts file containing

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: Congratulations on your fisrt Angular 2 application in an   ASP.NET 5 environment!'
})
export class AppComponent { }

[Project Root Folder]/scripts/main.ts file containing

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

[Project Root Folder]/tsconfig.json file containing

{
    "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "wwwroot/app/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

[Project Root Folder]/wwwroot/systemjs.config.js file containing

/**
* 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': 'lib/@angular',
        'angular2-in-memory-web-api': 'lib/angular2-in-memory-web-api',
        'rxjs': 'lib/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: 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);

[Project Root Folder]/wwwroot/index.html file containing

<html>
    <head>
        <title>Angular 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="lib/shim.min.js"></script>
        <script src="lib/zone.js"></script>
        <script src="lib/reflect.js"></script>
        <script src="lib/system.src.js"></script>
       <script src="systemjs.config.js"></script>
       <script>
          System.import('app').catch(function(err){ console.error(err); });
        </script>
       </head>
    <body>
        <my-app>Loading...</my-app>
    </body>
</html>

Thank you so much for this! I've been struggling for 2 days trying to set up an Angular 2 rc1 app with .NET Core rc2. Using your approach worked. Well done! I published it in IIS and it works well - so far.
Hi @hholtij, glad my answer was of value to you, I submitted a CodeProject article with a lot more detail and will post the link here.

Collectives™ on Stack Overflow

Angular 2 application not working in an ASP.NET 5 Environment

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related