今天将Angular 2的7个官方教程从头到尾实验了一遍,在其中进行第七个教程“HTTP”部分时,在应用编译启动时显示编译成功,但应用显示不正常,console中始终显示错误:
<pre><code>
404 GET /node_modules/angular2-in-memory-web-api/ Error loading http://localhost:3000/node_modules/angular2-in-memory-web-api as "angular2-in-memory-web-api" from http://localhost:3000/app/main.js
</code></pre>
自行排查代码错误未果,在相应的ts文件中引入方式正确,国内的论坛、cnblog等处关于Angular 2这一项错误尚未有人做出记录,在查阅了Google、StackOverflow之后发现,是Angular 2的官方引导教程中,其中一项配置项的错误导致的。
在本版本的Angular 2教程中,第七篇章“HTTP”使用到angular2-in-momery-web-api
。报错的原因在于angular2-in-memory-web-api
已更新至0.0.10版本,原Angular 2的配置文件systemjs.config.js
的内容如下:
<pre><code> `
/**
- System configuration for Angular 2 samples
- Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
defaultExtension: 'js'
},
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['@angular/' + pkgName] = {
main: pkgName + '.umd.js',
defaultExtension: 'js'
};
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);`
</code></pre>
在实际的使用中,该系统配置项的'angular2-in-memory-web-api'
应修改为:
<pre><code>'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
</code></pre>
此时在启动编译启动应用,即不会发生错误。
Reference: Angular2 Tutorial (Tour of Heroes): Cannot find module 'angular2-in-memory-web-api' — StackOverflow