Angular 2项目中main.ts.js文件加载失败求助

嘿，刚看了你的问题，作为踩过不少Angular初期坑的老玩家，一眼就发现几个关键问题，帮你一步步捋清楚怎么解决：

1. 先把SystemJS的入口配置掰正 #

你的systemjs.config.js里，packages.app的main设成了./boot.js，但你的入口明明是main.ts啊！而且它还不在app文件夹里，是在WebContent根目录下。这就导致SystemJS找错地方了。

两种调整方案选一个就行：

• 方案1：保持main.ts在根目录
  把packages部分改成这样：

  packages: {
    '.': { main: './main.ts', defaultExtension: 'ts' },
    app: { defaultExtension: 'ts' },
    rxjs: { defaultExtension: 'js' }
  }
  

• 方案2：把main.ts移到app文件夹里
  更规范的做法是把入口文件放到app目录下，然后改packages配置：

  packages: {
    app: { main: './main.ts', defaultExtension: 'ts' },
    rxjs: { defaultExtension: 'js' }
  }
  

2. 别漏了TypeScript的编译配置 #

报错里出现main.ts.js，说明SystemJS在找编译后的JS文件，但你的TS文件可能没被正确编译。赶紧检查有没有tsconfig.json，没有的话新建一个，内容如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

这个配置会把TS文件自动编译成同目录下的JS文件，SystemJS才能找到它。

3. 检查index.html里的加载代码 #

确保你在index.html里正确引入了SystemJS和入口文件，路径别错：

<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
  // 如果main.ts在根目录，就这么写
  System.import('main.ts').catch(err => console.error(err));
  // 如果移到app文件夹了，就改成 System.import('app/main.ts')
</script>

4. 让文件结构和配置对应上 #

你的systemjs里map.app设的是'app'，意思是所有app/开头的模块都会指向服务器根目录下的app文件夹。现在你的main.ts在根目录，和这个映射不匹配，要么按我上面说的移文件，要么调整映射，总之得让两者对应上。

给你个标准的文件结构参考：

WebContent/
├── app/
│   ├── app.module.ts
│   └── main.ts
├── environments/
│   └── environment.ts
├── node_modules/
├── systemjs.config.js
└── index.html

总结一下，你现在的核心问题就是SystemJS配置的入口和实际文件位置不搭，加上可能缺了TS编译配置，按上面的步骤调整完，应该就能解决加载失败的问题了！

内容的提问来源于stack exchange，提问作者Arpit Gupta