javascript - ไม่สามารถเริ่มแอปพลิเคชัน Angular 13 ที่รันบน IIS โดยใช้ SystemJS

เรามีโปรเจกต์เว็บ Visual Studio ซึ่งเป็นแอปพลิเคชัน MVC HTML ถูกแสดงผลโดยใช้ Razor และฝังแอปพลิเคชัน Angular เมื่อรันจาก Visual Studio แอปพลิเคชันจะถูกโฮสต์ในเซิร์ฟเวอร์พัฒนา IIS Express ไฟล์ทั้งหมดที่ Angular ต้องการถูกโหลดผ่าน SystemJS (เวอร์ชัน 0.19.39) ทุกอย่างทำงานได้อย่างราบรื่นจนถึง Angular 12 แต่ตั้งแต่ Angular 13 และ 14 ทุกอย่างพัง เวอร์ชัน 13 มีการแจกจ่ายที่แตกต่างโดยใช้โมดูล Ecmascript และนามสกุล .mjs ฉันจัดการเปลี่ยนไฟล์คอนฟิก SystemJS เพื่อให้แมปโหลดไฟล์ Angular ที่ถูกต้อง แต่แอปพลิเคชันไม่เริ่มทำงานเลย ไฟล์ main.js ถูกโหลดแล้ว แต่กลับไม่ยอมรัน แต่ก็ไม่มีข้อผิดพลาดใด ๆ ปรากฏขึ้น ฉันได้ลองทำหลายอย่างแล้ว: ใช้ตัวแปลงโค้ดต่าง ๆ (traceur, babel, typescript) แต่ก็ไม่สำเร็จ มีสิ่งหนึ่งที่ฉันค้นพบได้คือ main.js มีคำสั่ง require อยู่บ้าง ฉันได้เพิ่มคำสั่ง alert แบบง่าย ๆ เข้าไปใน main.js แต่คำสั่งนั้นก็ไม่เคยรัน เมื่อลองคอมเมนต์คำสั่ง require คำสั่ง alert ก็ถูกเรียกใช้ แต่ก็ยังไม่มีข้อผิดพลาดใด ๆ เกิดขึ้น

ไฟล์ main.js ถูกโหลดในหน้า HTML หลักด้วยวิธีนี้:

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

main.js ถูกสร้างจากไฟล์ typescript ชื่อ 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 ไม่เคยถูกเรียกใช้งาน (และไม่มีข้อผิดพลาด!) เมื่อฉันลบบรรทัดหลังจาก alert แจ้งเตือนจะถูกเรียกใช้งาน

การกำหนดค่า 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);

ฉันลองทำหลายอย่างแล้ว แต่ฉันสับสน ไม่รู้ว่าจะลองอะไรต่อไป หวังว่ามีใครสักคนที่นี่อาจมีไอเดียบ้าง

ขอขอบคุณทุกคนล่วงหน้า! กรุณาถามถ้าคุณต้องการข้อมูลเพิ่มเติม