angular - 使用 outDir 引用 TypeScript 编译文件的正确方法

Question

我有一个简单的应用程序，有两个 .ts 文件，我使用以下 tsconfig.js 文件编译

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

运行以下命令(在项目的根目录下)

tsc -p client --outDir public/js

给我以下目录结构，这就是我想要的布局方式

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

到目前为止，一切顺利。然后我在我的 HTML 文件中使用 SystemJS 引用我的 app.js 文件:

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

我在我的开发工具中看到一个 404:

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

我错过了什么？此时我什至需要 systemJS 还是应该在我的 HTML 文件中引用普通的旧 JS 文件？

应用.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);

标题.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 1

原来这是我用 systemjs

设置包的方式

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

我正在设置一个名为 app 的包，但它应该被称为 js 因为这是我所有转译的 JS 文件所在的地方。正确的版本如下所示:

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

我在导入时不需要 .js 扩展名。