Angular 2, Visual Studio 2015, ASP 5 - 'System' is Undefined, 'Require' is Undefined

3,372 views
Skip to first unread message

Chris RykrSmith

unread,
Nov 6, 2015, 12:30:37 PM11/6/15
to AngularJS
I am attempting to get the Quick Start to run in Visual Studio 2015 using ASP-5 Empty Template.  I downloaded the angular2 and systemjs last week.

The problem I am getting is when I run it as it with this piece of code in the html.index
<script>
        System.config({
            packages: { 'app': { defaultExtension: 'js' } }
        });
        System.import('app/app');
    </script>

I receive the following error
0x800a1391 - JavaScript runtime error: 'System' is undefined 

This is highlighted:  System.config({
            packages: { 'app': { defaultExtension: 'js' } }
        });

If I remove the code above and replace it with
<script src="app/app.js"></script>

0x800a1391 - JavaScript runtime error: 'require' is undefined
Inside the App.ts file the following line of code is highlighted:  import {Component, View, bootstrap} from 'angular2/angular2';




Folder Layout

Project Folder
  • Node_Modules
    • angular2 (install via  'npm install angular2'
    • systemjs (installed via 'npm install systemjs')
  • src
    • WebApplication6
      • Node_Modules
        • angular2
          • bundles
            • typings
              • angular2
                • angular2.d.ts
                • http.d.ts
                • router.d.ts
                • testing.d.ts
              • es6-shim
                • es6-shim.d.ts
              • jasmine
                • jasmine.d.ts
            • angular2.dev.ts
        • systemjs
          • dist
            • system.js
    • Scripts
      • app.ts
      • tsconfig.json
    • wwwroot
      • app
        • app.js
      • index.html
      • web.config

Index.html File  *Note I have replaced the script source files with the ones provided on the angular.io page and get the exact same results.
<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 QuickStart</title>

    <script src="../node_modules/systemjs/dist/system.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
        System.config({
            packages: { 'app': { defaultExtension: 'js' } }
        });
        System.import('app/app');
    </script>
    
</head>
<body>
    
    <my-app>loading...</my-app>
</body>
</html>


app.ts
/// <reference path="../node_modules/angular2/bundles/typings/angular2/angular2.d.ts" />


import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
    selector: 'my-app'
})
@View({
    template: '<h1>Hello {{ name }} </h1>'
})


class AppComponent {
    name: string;

    constructor() {
        this.name = 'Alice';
    }
}


bootstrap(AppComponent);

tsconfig.json
/// <reference path="../node_modules/angular2/bundles/typings/angular2/angular2.d.ts" />


import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
    selector: 'my-app'
})
@View({
    template: '<h1>Hello {{ name }} </h1>'
})


class AppComponent {
    name: string;

    constructor() {
        this.name = 'Alice';
    }
}


bootstrap(AppComponent);

startup.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Http;
using Microsoft.Framework.DependencyInjection;

namespace WebApplication6
{
    public class Startup
    {
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IApplicationBuilder app)
        {
            // Add the platform handler to the request pipeline.
            app.UseIISPlatformHandler();

            app.UseDefaultFiles();
            app.UseStaticFiles();
        }
    }
}



Any thoughts would greatly be appreciated

Eric Martinez

unread,
Nov 6, 2015, 9:49:46 PM11/6/15
to AngularJS
Chris,

what browser and version, are you using? Try adding after system.js the file system-polyfill.js (it's in the same folder). This shouldn't be necessary depending on your browser. Give it a try and tell us.

Chris RykrSmith

unread,
Nov 12, 2015, 8:38:57 AM11/12/15
to AngularJS
Sorry for the Delay.

Adding the system-polyfill.js to the project corrected the debugger error messages.  I am using IE 11  (11.0.10240.16431)  in Windows 10.  and using IIS Express in VS 2015 to launch it.

Just aw the last Appendix page, and added the es6-shim.min.js script to my project and referenced it first.  Everything seems to be running correctly now.

Thank you so much for the help
Chris

Chris RykrSmith

unread,
Dec 11, 2015, 10:26:57 AM12/11/15
to AngularJS
Adding an Update to this.

After installing Visual Studio 2015 Update 1, and using Alpha 52 from NPM

I still have to add a reference to the system-pollyfills.js file for Visual studio to not throw a debugging System is undefined error.  Using IE 11 on Windows 10.

Chris
Reply all
Reply to author
Forward
0 new messages