我继承了一个旧的C#MVC / TypeScript / Angular项目,并使其得以执行。该过程的一部分涉及到几个节点程序包和nuget程序包的升级。因此,我偶尔会陷入一个项目,该项目以从未使用过的风格编写,而对于Angular等人现在的工作方式来说可能太旧了,我甚至不确定最终结果应该看起来像或做。但我很感激挑战。
作为升级的一部分,systemjs从v0.2 ish升级到2.1 ish。另外,Angular的东西是v2.ish,现在是v7.ish,一些软件包更改了名称,例如angular2-in-memory-web-api-> angular-in-memory-web-api
值得庆幸的是,这是一个项目的准系统,因此希望现阶段的问题是基本的。
我有一个如下所示的systemjs.config.ts(已成功编译为.js):
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/Scripts/Discussion',
shared: '/Scripts/shared',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
shared: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
包含我的应用程序的页面看起来像这样的HTML(MVC完成输出后)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<base href="/123/discussion/">
<title>_BoardLayout</title>
<script src="/Scripts/Libraries/jquery-2.2.2.js"></script>
<script src="/Scripts/Libraries/jquery.signalr-2.2.0.js"></script>
<script src="/Scripts/polyfills/Intl.js"></script>
<script src="/node_modules/core-js/client/shim.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script src="/Scripts/TinyMce/tinymce.min.js"></script>
<script src="/Scripts/Discussion/systemjs.config.js"></script>
<script>
window["localeStrings"] = {
strings: {
}
};
window["appConfig"] = { apiUrl: "/api/" };
window["sessionConfig"] = { token: '123', role: 'moderator', userId: 1 };
System.import('app').catch(function(err) { console.error(err); });
</script>
<link href="/Content/less/discussion.less" rel="stylesheet"/>
</head>
<body>
<discussion-app></discussion-app>
</body>
</html>
System.import
工作正常;我可以在控制台的自动完成功能中看到它,但是System.config
不存在。这些天我们要做什么替代品?
注意:我发现了这一点:System.config is not defined似乎暗示System.config已消失,而应该<script
>作为json块进行编辑,但我不明白我的意思在我的MVC /打字稿情况下需要使用它,特别是一种在Razor无需解释脚本中多个@angular
的情况下将其显示在页面上的简洁方法
最后,如果这些天我应该以其他方式加载模块,我不完全拒绝对systemjs进行分箱,在这种情况下,欢迎提供一些有关如何重新配置项目的指针