在单独的javascript文件和打字稿文件之后，角度2调整System.config() [英] angular 2 adjust System.config() after separate javascript files and typescript files

问题描述

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

My project folder structure is the same as quick-start ToH https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

所以要分离.ts文件和.js文件，我用"outDir":"dist" 添加到tsconfig.json中.然后，tsc将所有.js和.map文件编译到dist文件夹中.到目前为止，一切都很好.dist文件夹与app文件夹平行.

So to separate .ts file and .js file, I added to the tsconfig.json with "outDir": "dist". tsc then compiled all the .js and .map files into the dist folder. So far so good. dist folder is parallel to app folder.

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

Next I changed the system.import in index.html

<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启动后，浏览器给了我

Now after npm start, the browser gave me

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

如何让系统导入功能找到main.js?

How can I let system import function find the main.js?

文件夹结构如下

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

推荐答案

如果要将主HTML文件保留在根文件夹中，则可以使用 map 块:

I would leverage a map block if you want to keep the main HTML file into the root folder:

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

这篇关于在单独的javascript文件和打字稿文件之后，角度2调整System.config()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！