无法使用SystemJS在IIS下运行Angular 13应用程序

Question

我们有一个Visual Studio Web项目，该项目是MVC应用程序。使用剃须刀渲染HTML并注入角度应用。从Visual Studio运行时，该应用程序托管在IIS Express开发服务器中。 Angular所需的所有文件均通过SystemJS加载（版本0.19.39）。这一切都像魅力直到Angular 12。版本13使用.MJS扩展名使用Ecmasipt模块具有不同的分布。我设法更改了系统JS配置文件，因此映射加载正确的角文件，但是应用程序从未启动。 Main.js文件已加载，但拒绝运行。但是没有任何错误。我尝试了几件事：使用不同的转介剂（Traceur，Babel，Typescript），但无效。我设法发现了一件事。 main.js包含一些需要电话。我在main.js上添加了一个simpel警报调用，但它从未执行。当我评论“要求呼叫”时，执行了警报。但是，没有任何错误。

main.js在主HTML页面中加载以这种方式加载：

    <script>
        System.import("Scripts/main.js").then(null, console.error.bind(console));
    </script>

main.js是从打字稿文件main.ts.生成的。生成的main.js看起来如下：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
alert("main.js executing!");
var core_1 = require("@angular/core");
var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
var environment_1 = require("./environments/environment");
var app_module_1 = require("./app/app.module");
if (environment_1.environment.production) {
    (0, core_1.enableProdMode)();
}
(0, platform_browser_dynamic_1.platformBrowserDynamic)().bootstrapModule(app_module_1.AppModule);
//# sourceMappingURL=main.js.map

第3行上的警报永远不会执行（没有错误！）。当我在警报后删除行时，执行警报。

SystemJS配置看起来像这样：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global)
{
    System.config({

        transpiler: 'Babel',
        babelOptions: {
            //presets: ['env']
        },

        paths: {
            // paths serve as alias
            'npm:': 'node_modules/',
            'angular:': 'node_modules/@angular/',
            'angularmat:': 'node_modules/@angular/material/',
            'clipboard-copy': 'node_modules/clipboard-copy/index.js',
            'mobile-detect': 'node_modules/mobile-detect/mobile-detect.js',
            'moment': 'node_modules/moment/moment.js',
            'moment-es6': 'node_modules/moment-es6/index.js',
            'simplestorage.js': 'node_modules/simplestorage.js/simplestorage.js'
        },
        // map tells the System loader where to look for things
        map: {

            // our app is within the app folder
            app: 'app',
            text: 'Scripts/systemjs-text-plugin.js',

            // transpiler
            'Babel': 'npm:@babel/standalone/babel.js',

            // angular bundles
            '@angular/http': 'angular:common/fesm2015/http.mjs',
            '@angular/common': 'angular:common/fesm2015/common.mjs',
            '@angular/common/http': 'angular:common/fesm2015/http.mjs',
            '@angular/core': 'angular:core/fesm2015/core.mjs',
            '@angular/animations': 'angular:animations/fesm2015/animations.mjs',
            '@angular/compiler': 'angular:compiler/fesm2015/compiler.mjs',
            '@angular/forms': 'angular:forms/fesm2015/forms.mjs',
            '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/fesm2015/platform-browser-dynamic.mjs',
            '@angular/platform-browser': 'angular:platform-browser/fesm2015/platform-browser.mjs',
            '@angular/animations/browser': 'angular:animations/fesm2015/browser.mjs',
            '@angular/platform-browser/animations': 'angular:platform-browser/fesm2015/animations.mjs',
            '@angular/router': 'angular:router/fesm2015/router.mjs',

            // angular material/cdk bundles
            '@angular/material/button': 'angularmat:esm2020/button/button.mjs',
            '@angular/material/core': 'angularmat:esm2020/core/index.mjs',
            '@angular/material/checkbox': 'angularmat:esm2020/checkbox/checkbox.mjs',
            '@angular/material/dialog': 'angularmat:esm2020/dialog/dialog.mjs',
            '@angular/material/slide-toggle': 'angularmat:esm2020/slide-toggle/slide-toggle.mjs',
            '@angular/material/snack-bar': 'angularmat:esm2020/snack-bar/snack-bar.mjs',
            '@angular/cdk': 'angular:cdk/fesm2015/cdk.mjs',
            '@angular/cdk/a11y': 'angular:cdk/fesm2015/a11y.mjs',
            '@angular/cdk/accordion': 'angular:cdk/fesm2015/accordion.mjs',
            '@angular/cdk/bidi': 'angular:cdk/fesm2015/bidi.mjs',
            '@angular/cdk/coercion': 'angular:cdk/fesm2015/coercion.mjs',
            '@angular/cdk/collections': 'angular:cdk/fesm2015/collections.mjs',
            '@angular/cdk/drag-drop': 'angular:cdk/fesm2015/drag-drop.mjs',
            '@angular/cdk/keycodes': 'angular:cdk/fesm2015/keycodes.mjs',
            '@angular/cdk/layout': 'angular:cdk/fesm2015/layout.mjs',
            '@angular/cdk/observers': 'angular:cdk/fesm2015/observers.mjs',
            '@angular/cdk/overlay': 'angular:cdk/fesm2015/overlay.mjs',
            '@angular/cdk/platform': 'angular:cdk/fesm2015/platform.mjs',
            '@angular/cdk/portal': 'angular:cdk/fesm2015/portal.mjs',
            '@angular/cdk/rxjs': 'angular:cdk/fesm2015/rxjs.mjs',
            '@angular/cdk/scrolling': 'angular:cdk/fesm2015/scrolling.mjs',
            '@angular/cdk/text-field': 'angular:cdk/fesm2015/text-field.mjs',
            '@angular/cdk/stepper': 'angular:cdk/fesm2015/stepper.mjs',
            '@angular/cdk/table': 'angular:cdk/fesm2015/table.mjs',

            // other libraries
            'rxjs': 'npm:rxjs/dist/esm/',
            'rxjs/operators': 'npm:rxjs/dist/esm/operators/index.js',
            'tslib': 'npm:tslib/tslib.js',
            'big.js': 'npm:big.js/big.js',
            'ng2-file-upload': 'npm:ng2-file-upload/bundles/ng2-file-upload.umd.js',
            'ngx-extended-pdf-viewer': 'npm:ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs',
            'ngx-pinch-zoom': 'npm:ngx-pinch-zoom/bundles/ngx-pinch-zoom.umd.js',
            'angular-resizable-element': 'npm:angular-resizable-element/bundles/angular-resizable-element.umd.js',
            'mousetrap': 'npm:mousetrap/mousetrap.js',
            'pidcrypt': 'npm:pidcrypt/index.js',
            'rsa': 'npm:pidcrypt/rsa.js',
            'ua-parser-js': 'npm:ua-parser-js/dist/ua-parser.min.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                defaultExtension: 'mjs'
            },

            Scripts: {
                defaultExtension: 'js',

                meta: {
                    './*.mjs': {
                        loader: 'Scripts/systemjs-angular-loader.js'
                    },
                    './*.js': {
                        loader: 'Scripts/systemjs-angular-loader.js',
                    },
                    'systemjs-angular-loader.js': {
                        loader: false,
                    }
                }
            },
            angular: {
                defaultExtension: 'mjs',
            },
            angularmat: {
                defaultExtension: 'mjs',
            },
            rxjs: {
                defaultExtension: 'js',
                main: 'index.js'
            }
        }
    });
})(this);

我尝试了很多事情，但是我迷路了。不知道接下来要做什么。我希望这里有人有任何想法。

谢谢大家！请询问您是否需要更多信息。