我拿起了 ng-book 2，因为它似乎是了解 Angular2 的优质方法。需要注意的是，我以前从未使用过任何这些模块加载器或任何东西，而且我对 npm 和 node 的使用非常有限，因此所有术语和假定的知识可能会非常困惑。
ng-book 2 使用 Node，但我想我也可以开始使用我常用的 .NET MVC 服务器，因为这就是我在工作中将 Angular 2 与它配对的服务器。
我当前的问题显然是在模块加载中，因为当 systemjs 尝试加载 Angular 包时，我不断收到 404 错误。
app.ts
/**
* A basic hello-world Angular 2 app
*/
import {
NgModule,
Component
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@Component({
selector: 'hello-world',
template: `
<div>
Hello World
</div>
`
})
class HelloWorld {
}
@NgModule({
declarations: [HelloWorld],
imports: [BrowserModule],
bootstrap: [HelloWorld]
})
class HelloWorldAppModule { }
platformBrowserDynamic().bootstrapModule(HelloWorldAppModule);
systemjs.config.js
// See also: https://angular.io/docs/ts/latest/quickstart.html
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app/app',
'rxjs': 'app/node_modules/rxjs',
'@angular': 'app/node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'rxjs': { defaultExtension: 'js' }
};
var angularPackages = [
'core',
'common',
'compiler',
'platform-browser',
'platform-browser-dynamic',
'http',
'router',
'forms',
'upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
angularPackages.forEach(function(pkgName) {
packages['@angular/' + pkgName] = {
main: 'bundles/' + pkgName + '.umd.js',
defaultExtension: 'js'
};
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
index.cshtml
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<script src="~/app/node_modules/core-js/client/shim.min.js"></script>
<script src="~/app/node_modules/zone.js/dist/zone.js"></script>
<script src="~/app/node_modules/reflect-metadata/Reflect.js"></script>
<script src="~/app/node_modules/systemjs/dist/system.src.js"></script>
<link rel="stylesheet" type="text/css" href="~/app/resources/vendor/semantic.min.css" />
<link rel="stylesheet" type="text/css" href="~/app/styles.css" />
</head>
<body>
<script resource="~/app/resources/systemjs.config.js"></script>
<script>
System.import('/app/app.js')
.then(null, console.error.bind(console));
</script>
<hello-world></hello-world>
</body>
</html>
项目的布局是这样的
我最终得到的是这样的请求
zone.js:101 GET http://localhost:18481/@angular/core 404 (Not Found)
最佳答案
我看到的第一件事是你的 systemjs 配置可能没有应用，因为你有
<script resource="~/app/resources/systemjs.config.js"></script>
为什么你这里有资源？ systemjs.config.js 包含纯 JavaScript 代码，应像任何其他脚本一样执行。
关于javascript - 如何使 systemjs 模块加载与 .net mvc 一起工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39400872/