javascript - Kan inte starta Angular 13-applikation som körs under IIS med SystemJS
Vi har ett Visual Studio Web-projekt som är en MVC-applikation. Html renderas med Razor och injicerar en Angular-applikation. När man kör från Visual Studio, är applikationen värd på IIS Express utvecklingsserver. Alla filer som Angular behöver laddas via SystemJS (version 0.19.39). Allt detta fungerade perfekt fram till Angular 12. Men sedan Angular 13 och 14, faller allt samman. Version 13 har en annan distribution som använder Ecmascript-moduler med .mjs-tillägget. Jag lyckades ändra SystemJS konfigurationsfilen, så att mappningarna laddar rätt Angular-fil, men applikationen startar aldrig. Huvud.js-filen laddas, men den vägrar att köras. Men inga fel uppstår. Jag har provat flera saker: använda olika transpilers (traceur, babel, typescript), men inget fungerar. Det finns en sak som jag lyckades upptäcka. main.js innehåller några require-anrop. Jag lade till ett enkelt alert-anrop i main.js men det kördes aldrig. När jag kommenterade ut require-anropen, kördes alerten. Men återigen, inga fel uppstår.
main.js laddas på detta sätt i huvudsidan:
<script>
System.import("Scripts/main.js").then(null, console.error.bind(console));
</script>
main.js genereras från en TypeScript-fil main.ts. Den genererade main.js ser ut som följer:
"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 på rad 3 körs aldrig (och inga fel!). När jag tar bort raderna efter alert, körs alerten.
SystemJS-konfigurationen ser ungefär ut så här:
/**
* 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);
Jag har provat så många saker, men jag är vilse. Vet inte vad jag ska prova härnäst. Jag hoppas att någon här har någon idé.
Tack på förhand allihop! Fråga gärna om ni behöver mer information.