javascript - Nu se poate porni aplicația Angular 13 care rulează sub IIS folosind SystemJS
Avem un proiect web Visual Studio care este o aplicație MVC. HTML-ul este redat folosind Razor și injectează o aplicație Angular. Când rulăm din Visual Studio, aplicația este găzduită pe serverul de dezvoltare IIS Express. Toate fișierele necesare de Angular sunt încărcate prin SystemJS (versiunea 0.19.39). Toate acestea au funcționat perfect până la Angular 12. Totuși, din Angular 13 și 14, totul se destramă. Versiunea 13 are o distribuție diferită folosind module Ecmascript cu extensia .mjs. Am reușit să modific fișierul de configurare SystemJS, astfel încât mapările să încarce fișierul Angular corect, dar aplicația nu pornește niciodată. Fișierul main.js este încărcat, dar refuză să ruleze. Dar nu apar erori. Am încercat mai multe lucruri: folosirea diferiților transpileri (traceur, babel, typescript), dar nimic nu funcționează. Există un lucru pe care am reușit să-l descopăr. main.js conține câteva apeluri require. Am adăugat un apel simplu de alert în main.js, dar acesta nu a fost niciodată executat. Când am comentat apelurile require, alert-ul a fost executat. Totuși, din nou, nu apar erori.
Fișierul main.js este încărcat astfel în pagina principală HTML:
<script>
System.import("Scripts/main.js").then(null, console.error.bind(console));
</script>
main.js este generat dintr-un fișier TypeScript main.ts. main.js generat arată astfel:
"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
alert pe linia 3 nu este niciodată executat (și fără erori!). Când elimin liniile după alert, alertul este executat.
Configurarea SystemJS arată cam așa:
/**
* 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);
Am încercat atât de multe lucruri, dar sunt pierdut. Nu știu ce să încerc în continuare. Sper că cineva de aici are vreo idee.
Vă mulțumesc tuturor anticipat! Vă rog să întrebați dacă aveți nevoie de mai multe informații.