我正在使用Visual Studio 2017开发一个承载在MVC应用程序（.Net 4.6）中的Angular 4.1 SPA应用程序。我使用@ angular / cli创建了Angular部件，然后将其合并到现有的MVC应用程序中。它的结构如CandorDeveloper文章（http://candordeveloper.com/2017/04/12/how-to-use-angular-cli-with-visual-studio-2017/）中所述。
这一切都运行良好但是@ angular / cli使用Webpack时效果很慢。对Html，typescript或css的任何更改都需要大约4分钟的构建。我之前有一个应用程序设置相同，但没有使用@ angular / cli或Webpack。它仍然是托管Angular 4.1 SPA应用程序的Visual Studio 2017 MVC应用程序（.Net 4.6），但它使用了SystemJs。构建速度非常快，我在VS2017中拥有与任何.net Web应用程序相同的出色调试体验。因此我想我会尝试使用SystemJs和Webpack。
我的想法是在VS2017“调试”模式下使用SystemJs构建应用程序以获得速度和便利性，然后使用Webpack进行“发布”模式来构建生产版本并能够使用AOT。为了实现这一点，我将以下内容放在_Layout.cshtml文件中：
@if(!HttpContext.Current.IsDebuggingEnabled)
{
<script type="text/javascript" src="~/Scripts/NgApp/inline.bundle.js"></script>
<script type="text/javascript" src="~/Scripts/NgApp/polyfills.bundle.js"></script>
<script type="text/javascript" src="~/Scripts/NgApp/styles.bundle.js"></script>
<script type="text/javascript" src="~/Scripts/NgApp/vendor.bundle.js"></script>
<script type="text/javascript" src="~/Scripts/NgApp/main.bundle.js"></script>
}
else
{
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="~/MyAppCli/node_modules/core-js/client/shim.min.js"></script>
<script src="~/MyAppCli/node_modules/zone.js/dist/zone.js"></script>
<script src="~/MyAppCli/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/MyAppCli/src/systemjs.config.js"></script>
<script>
System.import('src/main.js')
.catch(function (err) { console.error(err); });
</script>
}
对于我项目的预建活动，我补充道：
if $(ConfigurationName) == Release (
echo "cd $(SolutionDir)MyApp\MyAppCli" &&^
cd "$(SolutionDir)MyApp\MyAppCli" &&^
echo "building v" &&^
npm run build
)
然后我将systemjs添加到package.json文件的devDependencies并创建了一个适当的systemjs.config.js文件。
我的systemjs.config.js：
(function (global)
{
System.config({
paths: {
// paths serve as alias
'npm:': MyAppCli/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'src',
// angular bundles
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@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/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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
'cldr-data': 'npm:cldr-data',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'jszip': 'npm:jszip',
'systemjs-plugin-json': 'npm:systemjs-plugin-json',
// Kendo UI for Angular scopes
'@progress': 'npm:@progress',
'@telerik': 'npm:@telerik'
},
meta: {
'*.json': {
loader: 'systemjs-plugin-json'
}
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
},
jszip: {
defaultExtension: 'js',
main: './dist/jszip.js'
},
'systemjs-plugin-json': {
defaultExtension: 'js',
main: 'json.js'
},
// Kendo UI for Angular packages
'npm:@progress/kendo-angular-buttons': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-charts': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-dateinputs': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-dropdowns': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-dialog': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-grid': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-inputs': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-intl': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-l10n': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-excel-export': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-layout': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-scrollview': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-sortable': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-popup': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-resize-sensor': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-angular-upload': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-charts': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-data-query': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-date-math': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-drawing': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-file-saver': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-intl': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-ooxml': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@progress/kendo-popup-common': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@telerik/kendo-draggable': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@telerik/kendo-dropdowns-common': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@telerik/kendo-intl': {
main: './dist/npm/main.js',
defaultExtension: 'js'
},
'npm:@telerik/kendo-inputs-common': {
main: './dist/npm/main.js',
defaultExtension: 'js'
}
}
});
})(this);
项目工作在“发布”中找到（使用Webpack），可以使用@ angular / cli构建或提供。问题是尝试使用SystemJs在“Debug”中运行它。它开始正常并加载main.js文件但无法加载app.module。我收到错误： “（SystemJS）XHR错误（404 Not Found）loading http://localhost/MyApp/MyAppCli/src/app/app.module 从http://localhost/MyApp/MyAppCli/src/app/app.module“
将http://localhost/MyApp/MyAppCli/src/main.js加载为”./ app / app.module“时出错主要文件和应用程序结构是：
MyApp
|-----MyAppCli
| |----src
| | |----app
| | | |----app.module.js
| | |
| | |----main.js
| | |----systemjs.config.js
| | |----systemjs-angular-loader.js
| |
| |----node_modules
| |----package.json
|
|-----Views
| |----Shared
| |----_Layout.cshtml
|
|-----web.config
是否可以同时使用Systemjs和Webpack，如果可以，我怎样才能使用它？
请帮忙。
答案 0 :(得分：1)
谢谢yurzui！您最后的评论是解决这个问题的原因。一旦我有了地图＆＃39;：{app：＆＃39; MyAppCli / src＆＃39;在_Layout.cshtml中的systemjs.config.js和System.import（＆＃39; app / main＆＃39;）（我没有使用Index.html）它工作。我现在能够在我的项目中使用Systemjs和Webpack。唯一奇怪的是，IE11的加载速度非常慢，但可以快速关闭，而Chrome加载非常快，但关闭VS2017调试器需要很长时间。我猜这是一个VS2017错误，它具有IE和Chrome的新调试功能，因为Firefox快速加载和卸载但在VS2017中没有断点调试。
再次感谢！