How can you make Angular2 work in a generated distribution folder?

Question

I'm trying to get my own starter project for Angular2+Typescript (+SystemJS+Gulp4) going, but I've run into some problems when switching from compiling the TypeScript in the same folder as the JavaScript and with access to node_modules folder to putting everything in a dist folder (with dist/js for compiled JavaScript and dist/js/lib for the vendor files ( angular2.dev.js , http.dev.js , router.dev.js , Rx.js , system.src.js etc.)).

You can find the complete project on github (souldreamer/event-planner) .

Is someone willing to take a gander and see what I'm doing wrong? It's probably the SystemJS config in index.html because depending on what config I try, I either get no actual loading of boot.js (the network tab shows that everything was loaded though, but the System.import() promise never resolves), or errors like core_1.Component is not a function or core_1.Input is not a function when I also add the InputComponent .

Note: before you think about marking this as a duplicate, I've been searching the net & StackOverflow for the past couple of days, and tried every variation I could find, so it's not really a duplicate problem (even though there are many similar questions).

Included here are some pieces I think might be relevant, in case you don't want to look at the full project:

TypeScript compilation ( Gulp4 task):

 function tsCompile() { var tsResult = gulp .src(['./app/**/*.ts', './typings/**/*.ts']) .pipe(sourcemaps.init()) .pipe(tsc(tsc.createProject('tsconfig.json'))); return merge([ tsResult.dts.pipe(gulp.dest('./typings/typescriptApp.d.ts')), tsResult.js .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./dist/js')) ]); }

tsconfig.json

 { "compilerOptions": { "outDir": "dist/js", "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true }, "exclude": [ "node_modules" ] }

index.html

 <head> <base href="/"> <link rel="stylesheet" href="styles.css"> <!-- inject:libs --> <!-- add wanted libs to gulpfile --> <!-- this is replaced by the gulp task runner --> <!-- lib order: --> <!-- angular2-polyfills, system.src, Rx, --> <!-- angular2.dev, router.dev, http.dev --> <!-- endinject --> <script> System.config({ baseUrl: './', // same result with this omitted transpiler: 'typescript', // same result with this omitted defaultJSExtensions: true, bundles: { './js/lib/angular2.dev.js': ['angular2/*'] }, packages: { js: { format: 'register', defaultExtension: 'js' } }, paths: { 'angular/http': './js/lib/router.dev.js', 'angular/router': './js/lib/http.dev.js', 'angular2/*': './js/lib/angular2.dev.js', 'rx/*': './js/lib/Rx.js' } }); System.import('js/boot') .then( function() {console.log('loaded')}, console.error.bind(console) ); </script> </head> <body> <main-app>Loading...</main-app> </body> </html>

boot.ts (the actual Angular2 app is inconsequential, it should work as-is, the error is not here, included for completeness' sake)

 import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from './components/app.component'; bootstrap(AppComponent, []);

app.component.ts (the actual Angular2 app is inconsequential, it should work as-is, the error is not here, included for completeness' sake)

 import {Component} from 'angular2/core'; import {InputComponent} from './input.component'; @Component({ selector: 'main-app', template: `<h1>Hi!</h1> <input-component label="A"></input-component> <input-component label="B"></input-component> `, directives: [InputComponent] }) export class AppComponent { }

input.component.ts (the actual Angular2 app is inconsequential, it should work as-is, the error is not here, included for completeness' sake)

 import {Component, Input} from 'angular2/core'; @Component({ selector: 'input-component', template: ` <label [attr.for]="inputName">{{label}} <input #input [attr.id]="inputName" type="text"></label> `, styles: [ `label { color: red; }` ] }) export class InputComponent { public static latestId: number = 0; private inputId: number = InputComponent.latestId; @Input() public label: string = ''; constructor() { InputComponent.latestId++; } get inputName(): string { return 'input-' + this.inputId; } }

Answer 1

I managed to find the solution, the System.config() parameters were wrong. This is the working version for whoever has similar problems:

    System.config({
      packages: {
        js: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });

The rest of it apparently takes care of itself.

How can you make Angular2 work in a generated distribution folder?

Question

1 answers

solution1
1 ACCPTED 2016-01-13 11:10:00

How can you make Angular2 work in a generated distribution folder?

Question

1 answers

solution1 1 ACCPTED 2016-01-13 11:10:00

solution1
1 ACCPTED 2016-01-13 11:10:00