Minimal Angular2 App Receiving Unhandled Promise SystemJS Error

I am demoing an Angular 2 app for my team, showing the minimal setup required for an app to function.

This includes utilizing the http://unpkg.com CDN for all libraries and the following two files:

index.html main.ts

Below are the index.html and main.ts files:

index.html

<!DOCTYPE html>
    <head>
        <!-- polyfills must load before zone.js -->
        <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
        <script src="https://unpkg.com/[email protected]"></script>
        <script src="https://unpkg.com/[email protected]"></script>
        <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
        <script>
            System.config({
                transpiler: 'typescript',
                typescriptOptions: { emitDecoratorMetadata: true },
                map: {
                    'rxjs': 'https://unpkg.com/[email protected]=12',
                    '@angular/core': 'https://unpkg.com/@angular/[email protected]',
                    '@angular/common': 'https://unpkg.com/@angular/[email protected]',
                    '@angular/compiler': 'https://unpkg.com/@angular/[email protected]',
                    '@angular/platform-browser': 'https://unpkg.com/@angular/[email protected]',
                    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/[email protected]'
                },
                packages: {
                    '@angular/core': { main: 'index.js' },
                    '@angular/common': { main: 'index.js' },
                    '@angular/compiler': { main: 'index.js' },
                    '@angular/platform-browser': { main: 'index.js' },
                    '@angular/platform-browser-dynamic': { main: 'index.js' }
                }
            });
            System.import('main.ts');
        </script>
    </head>
    <body>
        <hello-world></hello-world>
    </body>
</html>

main.ts

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Component({
    selector: 'hello-world',
    template: '<h1>Hello {{ name }}!</h1>'
})

class HelloWorldComponent {
    name: string;

    constructor() {
        this.name = 'Angular Demo';
    }
}

@NgModule({
    imports: [ BrowserModule ],
    declarations: [ HelloWorldComponent ],
    bootstrap: [ HelloWorldComponent ]
})

export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

After loading both files on a server, and loading localhost:8080

The index.html file loads, registers the systemjs, tranpsiles the main.ts on the fly and should return Hello, Angular Demo!, however I receive the following error in the developer console (run on Google Chrome browser):

Unhandled Promise rejection: (SystemJS) HelloWorldComponent is not defined
    ReferenceError: HelloWorldComponent is not defined
        at eval (http://localhost:8080/main.ts!transpiled:47:40)
    at execute (http://localhost:8080/main.ts!transpiled:53:14)
    at ZoneDelegate.invoke (https://unpkg.com/[email protected]:323:29)
    Error loading http://localhost:8080/main.ts ; Zone: <root> ; Task: Promise.then ; Value: Error: (SystemJS) HelloWorldComponent is not defined
    ReferenceError: HelloWorldComponent is not defined
        at eval (http://localhost:8080/main.ts!transpiled:47:40)
        at execute (http://localhost:8080/main.ts!transpiled:53:14)
        at ZoneDelegate.invoke (https://unpkg.com/[email protected]:323:29)
    Error loading http://localhost:8080/main.ts
consoleError @ [email protected]:461
_loop_1 @ [email protected]:490
drainMicroTaskQueue @ [email protected]:494
ZoneTask.invoke @ [email protected]:426

I've gone over possible issues for the past 24 hours and cannot find the solution to this issue.

Any idea why I receive this particular error would be helpful.

UPDATE

I believe this Component error was some sort of cache issue during my coding, as after I restarted my server (http-server -> localhost:8080), I no longer receive this error, and now receive the following error:

Unhandled Promise rejection: Zone.assertZonePatched is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Zone.assertZonePatched is not a function
    at new NgZoneImpl (ng_zone_impl.js:20)
    at new NgZone (ng_zone.js:100)
    at PlatformRef_._bootstrapModuleFactoryWithZone (application_ref.js:262)
    at eval (application_ref.js:304)
    at ZoneDelegate.invoke ([email protected]:323)
    at Zone.run ([email protected]:216)
    at [email protected]:571
    at ZoneDelegate.invokeTask ([email protected]:356)
    at Zone.runTask ([email protected]:256)
    at drainMicroTaskQueue ([email protected]:474)
    at XMLHttpRequest.ZoneTask.invoke ([email protected]:426)
consoleError @ [email protected]:461
_loop_1 @ [email protected]:490
drainMicroTaskQueue @ [email protected]:494
ZoneTask.invoke @ [email protected]:426

Solution

Not sure if I should answer my question or just delete it (open to suggestions).

However, because everyone reaches a particular issue different ways (mine was resolving from one error to another), I will leave it here for posterity.

Again, open to suggestions.

SOLUTION

After receiving a new Zone.assertZonePatched is not a function error, I have found the answer at the following StackOverflow thread:

Zone.assertPatched is not a function

The issue was in my reference to the zone.js library:

<script src="https://unpkg.com/[email protected]"></script>

According to the thread, if I am using Angular 2.0.0 or above, I will need to update my zone.js library version to the following:

<script src="https://unpkg.com/[email protected]"></script>

That solved the issue.