mithun_daa mithun_daa - 2 months ago 31
TypeScript Question

Correct approach to reference Typescript compiled files using outDir

I have a simple app two

.ts
files that I compile using the following
tsconfig.js
file

{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}


Running the following command (at the root of the project)

tsc -p client --outDir public/js


Gives me the following directory structure and this is how I want it laid out

myproj
|
|-- src
| |-- tsconfig.js
| |-- app.ts
| |-- header.ts
|
|-- public
|--js
|
|-- app.js
|-- app.js.map
|-- header.js
|-- header.js.map


So far, so good.Then I reference my
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>


I see a
404
in my dev tools:

GET http://localhost:3000/js/header 404 (Not Found)


What am I missing? Do I even need systemJS at this point or should I be referencing plain old JS files in my HTML file?

app.ts

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);


header.ts

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;
}

Answer

Turns out it was the way I was setting up the package with systemjs

<script>
    System.config({
      packages: {'app': {defaultExtension: 'js'}}
    });
    System.import('js/app.js');
</script>

I was setting up a package called app but instead it should have been called js since that is where all my transpiled JS files lived. The correct version looks like this:

<script>
    System.config({
      packages: {'js': {defaultExtension: 'js'}}
    });
    System.import('js/app');
</script>

I do not need the .js extension while importing.

Comments