We have a Visual Studio Web project which is a MVC application. Html is rendered using Razor and injects an Angular application. When running from Visual Studio, the application is hosted in IIS Express development server. All files needed by Angular are loaded via SystemJS (version 0.19.39). This all worked like a charm up until Angular 12. However since Angular 13 and 14, everything falls apart. Version 13 has a different distribution using Ecmascript modules using the .mjs extension. I managed to change the System js config file, so mappings load the right Angular file, but the application never starts. The main.js file is loaded, but it refuses to run. But no errors are raised. I tried several things: using different transpilers (traceur, babel, typescript), but nothing works. There is one thing that I managed to discover. main.js contains a few require calls. I added a simpel alert call to main.js but it never executed. When I commented out the require calls, the alert was executed. However again, no errors are raised.
The main.js is loaded this way in the main html page:
<script>
System.import("Scripts/main.js").then(null, console.error.bind(console));
</script>
main.js is generated from a typescript file main.ts. The generated main.js looks as follows:
"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 on line 3 is never executed (and no errors!). When I remove the lines after alert, the alert is executed.
SystemJS config looks something like this:
/**
* 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);
I've tried so many things, but I'm lost. Don't know what to try next. I hope someone over here has any idea.
Thank you all in advance! Please ask if you need more information.