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

Question

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

编译了两个 .ts 文件

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

到目前为止，good.Then 我在我的 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 文件？

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 1

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?

没有。

将您的 systemjs 配置更改为：

System.config({
  "defaultJSExtensions": true,
});

Answer 2

原来这是我用 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 扩展。

Answer 3

查看根目录中的文件 "systemjs.config.js" 并检查项目的值：地图 -> 应用

(function (global) {
  System.config({
paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'public/js',
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  // other libraries
  'rxjs':                       'npm:rxjs',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './app.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  }
}
  });
 })(this);

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

Correct approach to reference TypeScript compiled files using outDir

typescript

systemjs

angular