Angular 2复刻矩形面积计算应用时遇资源加载404错误求助

嘿，作为Angular 2新手碰到这种404资源加载问题太正常啦！我当初刚学的时候也踩过不少类似的坑，咱们一步步来排查解决：

1. 先盯紧模板文件的路径和拼写 #

你在app.component.ts里用了templateUrl: './app.component.html'，首先得确认两件事：

• 这个HTML文件是不是和app.component.ts在同一个文件夹下？比如如果你的项目结构是src/app下同时放了这两个文件，那路径没问题；但如果HTML放在了src/app/templates这类子文件夹里，路径就得改成./templates/app.component.html或者绝对路径/src/app/app.component.html。
• 文件名的大小写要完全匹配！比如你代码里写的是app.component.html，但实际文件存成了App.Component.HTML，在Linux/macOS这类区分大小写的系统里，直接就会报404。

2. 检查TypeScript的编译配置 #

Angular 2依赖TypeScript编译，你得确认tsconfig.json里的配置没出错：

• 看outDir字段，比如如果设置的是"outDir": "./dist"，意味着编译后的JS文件都会输出到dist文件夹里。这时候你的index.html里引用的脚本路径必须指向dist下的文件，而不是直接引用src里的.ts或者未编译的.js。
• 确保compilerOptions里的module设置成了system或者commonjs（对应你用的模块加载器），不然编译后的模块可能无法被正确识别。

3. 核对index.html里的资源引用 #

很多404问题都出在这里：

• 检查systemjs.config.js的引用路径，如果你的配置文件放在src文件夹下，那index.html里应该写<script src="src/systemjs.config.js"></script>，而不是直接写<script src="systemjs.config.js"></script>（除非它在项目根目录）。
• 打开systemjs.config.js，确认map配置里的路径是否正确，比如：

map: {
  'app': './dist/app', // 这里要和tsconfig的outDir对应
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  // 其他Angular模块的映射也要确保路径正确
}

如果@angular相关的模块路径错了，也会导致加载失败报404。

4. 确认开发服务器的启动目录 #

如果你用的是lite-server或者早期的Angular CLI，一定要从项目根目录启动服务器！比如你不小心进到src文件夹里运行npm start，那服务器的根路径就是src，引用根目录下的文件（比如systemjs.config.js）就会找不到。正确的做法是回到项目根目录，再执行启动命令。

5. 精准定位出错的资源 #

开发者控制台里肯定会显示具体是哪个文件加载失败——是app.component.html？还是某个Angular的umd.js文件？还是systemjs.config.js？针对具体的文件去排查路径，比盲目找问题高效多了。比如如果是模板文件404，就重点查前面说的模板路径；如果是Angular核心模块404，就检查systemjs的映射或者有没有正确安装npm包（可以试试重新执行npm install）。

最后给你个小建议：如果是用Angular CLI创建的项目，尽量用CLI的命令生成组件（比如ng generate component app），它会自动帮你配置好所有路径和引用，能少踩很多手动配置的坑。

内容的提问来源于stack exchange，提问作者Anthony Knight