I'm trying to start my own starter project for Angular2 + Typescript (+ SystemJS + Gulp4), but I had some problems when switching from compiling TypeScript to the same folder as JavaScript and with access to the folder node_modulesto put everything in the folder dist(with dist/jsfor compiled JavaScript and dist/js/libfor 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) .
Someone wants to take a gander and see what I'm doing wrong? This is probably SystemJSconfig in index.html, because depending on what configuration I'm trying to do, I either don’t get any real download boot.js(the network tab shows that everything has been downloaded, but the promise is System.import()never resolved) or errors like core_1.Component is not a functionor core_1.Input is not a functionwhen I also add InputComponent.
Note: before you think about marking this as a duplicate, I searched the network and StackOverflow for the last couple of days, and tried all the options that I could find, so this is not a really recurring problem (although there are many similar questions).
Here are some fragments that, in my opinion, may matter if you do not want to watch the full project:
TypeScript (Gulp4 ):
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">
<script>
System.config({
baseUrl: './',
transpiler: 'typescript',
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 ( Angular2 , , , )
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './components/app.component';
bootstrap(AppComponent, []);
app.component.ts ( Angular2 , , , )
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 ( Angular2 , , , )
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;
}
}