'Force Angular 13 to emit non-module script files
One of the changes in Angular 13 is that it emits <script type=module> by default. This however breaks applications that relies on loading files from local disk, such as Adobe CEP extensions, or Electron. See this GitHub issue: https://github.com/angular/angular-cli/issues/22159.
There are some suggestion for patching the webpack.config file Angular uses, that however is not a proper solution in the long term. And Adobe likely won't change how CEP apps are loaded either.
In the same vein Lazy Loading also doesn't work, likely as that relies on the browser loading things as modules.
So how do I make loading work with a local file system, without running an entire web server on the client, and without having to resort to patching things in node_modules? The list of breaking changes says Script imports are modules by default, so indicates that it can be changed.
As a temporary workaround I have made a "plugin" with ngx-build-plus:
const path = require('path');
const fs = require('fs');
exports.default = {
config: function (cfg) {
cfg.output.scriptType = 'text/javascript';
return cfg;
},
post: function (options) {
const output = path.join(options.outputPath, 'index.html');
const content = fs.readFileSync(output, {
encoding: 'utf8',
});
const updated = content.replaceAll('type="module"', '');
fs.writeFileSync(output, updated, {
encoding: 'utf8',
});
},
};
This plugin makes webpack build the old style script files, and then removes the type="module" part from the index.html.
After actually digging through the Angular-cli source code, there doesn't actually seem to be a way to prevent it from emit modules, it seems to be pretty damn hardcoded: https://github.com/angular/angular-cli/blob/d23a168b8d558ae9d73c8c9eed4ff199fc4d74b9/packages/angular_devkit/build_angular/src/utils/package-chunk-sort.ts#L32-L39, which leads me to believe this should probably be a feature request to Angular-cli.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
