angular 2 在单独的 javascript 文件和 typescript 文件之后调整 System.config()

Question

我的项目文件夹结构和快速入门ToH一样https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

为了分离 .ts 文件和 .js 文件，我在 tsconfig.json 中添加了"outDir": "dist"。 tsc 然后将所有 .js 和 .map 文件编译到 dist 文件夹中。到现在为止还挺好。 dist 文件夹与 app 文件夹平行。

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "outDir": "dist",
    "suppressImplicitAnyIndexErrors":true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
} 

接下来我更改了 index.html 中的 system.import

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      services: {defaultExtension: 'js'}
    }
  });
  //System.import('app/main')
  System.import('./dist/app/main')
        .then(null, console.error.bind(console));
</script>

现在在 npm start 之后，浏览器给了我

 system.src.js:1154 GET http://localhost:3000/dist/app/main 404 (Not Found)

如何让系统导入函数找到main.js？

文件夹结构如下所示

root
  |--app            // all .ts files are here
  |--dist
       |--app       // all .js and .map files are here

Answer 1

如果您想将主 HTML 文件保留在根文件夹中，我会利用 map 块：

<script>
  System.config({
    map: {
      app: 'dist/app' // <-----
    },
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      services: {defaultExtension: 'js'}
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>