Hi - I'm working through a few Angular 2 examples but am having an issue separating an example into separate files. Maybe something you help? The code below shows the example that works, and the version that fails. The all together version has the component, module and bootstrap code all in one main.ts file. Thanks!
///////////// ALL TOGETHER CODE // the index.html file <!DOCTYPE html> <html> <head> <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]', '@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> // the main.ts file import { Component } from '@angular/core'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // Component @Component({ selector: 'hello-world', template: '<h1>Hello {{ name }}!</h1>' }) class HelloWorldComponent { name: string; constructor() { this.name = 'Angular'; } } // Module @NgModule({ imports: [ BrowserModule ], declarations: [ HelloWorldComponent ], bootstrap: [ HelloWorldComponent ] }) export class AppModule { } // App bootstrap platformBrowserDynamic().bootstrapModule(AppModule); ///////////// SEPARATED CODE that throws errors // NOTE - the index.html is the same as above // appcomponent.ts file for the component import { Component } from '@angular/core'; @Component({ selector: 'hello-world', template: '<h1>Hello {{ name }}!</h1>' }) class HelloWorldComponent { name: string; constructor() { this.name = 'Angular'; } } // appmodule.ts file for the module import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HelloWorldComponent } from './appcomponent'; @NgModule({ imports: [ BrowserModule ], declarations: [ HelloWorldComponent ], bootstrap: [ HelloWorldComponent ] }) export class AppModule { } // the main.ts file for bootstrapping import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './appmodule'; // App bootstrap platformBrowserDynamic().bootstrapModule(AppModule); -------- The above separated file version throws load errors. Maybe its the sequence? // errors in console Unhandled Promise rejection: (SystemJS) XHR error loading file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/appmodule ZoneDelegate.prototype.invokeTask@https://unpkg.com/[email protected]:225:23 Zone.prototype.runTask@https://unpkg.com/[email protected]:125:28 ZoneTask/this.invoke@https://unpkg.com/[email protected]:293:28 Error loading file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/appmodule as "./appmodule" from file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/main.ts ; Zone: <root> ; Task: Promise.then ; Value: Error: (SystemJS) XHR error loading file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/appmodule ZoneDelegate.prototype.invokeTask@https://unpkg.com/[email protected]:225:23 Zone.prototype.runTask@https://unpkg.com/[email protected]:125:28 ZoneTask/this.invoke@https://unpkg.com/[email protected]:293:28 Error loading file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/appmodule as "./appmodule" from file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/main.ts null [email protected]:344:13 Error: Uncaught (in promise): Error: (SystemJS) XHR error loading file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/appmodule ZoneDelegate.prototype.invokeTask@https://unpkg.com/[email protected]:225:23 Zone.prototype.runTask@https://unpkg.com/[email protected]:125:28 ZoneTask/this.invoke@https://unpkg.com/[email protected]:293:28 Error loading file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/appmodule as "./appmodule" from file:///C:/Data/Books/Angular2WithTypescript/SourceCode/chapter2/hello-world-ts-separated2/main.ts Stack trace: resolvePromise@https://unpkg.com/[email protected]:418:31 resolvePromise@https://unpkg.com/[email protected]:403:17 scheduleResolveOrReject/<@https://unpkg.com/[email protected]:451:17 ZoneDelegate.prototype.invokeTask@https://unpkg.com/[email protected]:225:23 Zone.prototype.runTask@https://unpkg.com/[email protected]:125:28 drainMicroTaskQueue@https://unpkg.com/[email protected]:357:25 ZoneTask/this.invoke@https://unpkg.com/[email protected]:297:25 -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
