I am currently working on a simple app that consists of two .ts files. These files are compiled using the following tsconfig.js file:
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
To compile these files, I run the following command at the root of my project:
tsc -p client --outDir public/js
This setup gives me the desired directory structure as follows:
myproj
|
|-- src
| |-- tsconfig.js
| |-- app.ts
| |-- header.ts
|
|-- public
|--js
|
|-- app.js
|-- app.js.map
|-- header.js
|-- header.js.map
Next, I reference the app.js file using SystemJS in my HTML file:
<script src="js/system.src.js"></script>
<script src="js/angular2.dev.js"></script>
<script>
System.config({
packages: {'app': {defaultExtension: 'js'}}
});
System.import('js/app.js');
</script>
However, when I check my dev tools, I see a 404 error:
GET http://localhost:3000/js/header 404 (Not Found)
I am now trying to figure out what I might be missing. Should I continue using SystemJS or should I switch to referencing plain JS files in my HTML?
Here is a snippet from my app.ts file:
import {bootstrap, Component} from 'angular2/angular2';
import {AppHeader} from './header';
@Component({
selector: 'get-er-done',
templateUrl: 'templates/app.html',
directives: [AppHeader]
})
class AppComponent { }
bootstrap(AppComponent);
And here is a snippet from my header.ts file:
import {bootstrap, Component} from 'angular2/angular2';
declare var user: any;
@Component({
selector: 'app-header',
templateUrl: 'templates/app-header.html'
})
export class AppHeader {
public luser = user;
}