Dynamic inline module import is not working anymore
Command
serve
Is this a regression?
- [X] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
17.3
Description
In previous versions it was possible to import modules dynamically based on a variable inside of a method, like
initTemplates(moduleName: string): Observable<ScoreboardModule> {
// NOT WORKING ANYMORE
let promise = import(`./layouts/${moduleName}/${moduleName}.module`);
// THIS WORKS
// let promise = import(`./layouts/BER/BER.module`);
return from(promise).pipe(
map(mod => mod.ScoreboardModule),
map((module: any) => {
// do some stuff
return module;
})
);
}
The ng serve output shows
▲ [WARNING] The glob pattern import("./layouts/**/*/**/*.module") did not match any files [empty-glob]
src/app/mode.competition/components/scoreboard-viewer/scoreboardViewer.abstract.ts:30:29:
30 │ ...t promise = import(`./layouts/${moduleName}/${moduleName}.module`)
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
When accessing the code the application breaks with:
Error: Module not found in bundle: ./layouts/BER/BER.module
at chunk-SKK7EFDP.js:26:9
the additional paths are defined in tsconfig.app.json like this:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"skipLibCheck": true,
"outDir": "./out-tsc/app",
"types": ["node"]
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts", "src/app/mode.competition/components/scoreboard-viewer/layouts/**/*.ts"]
}
This code was running as described above at least since Angular 13 and breaks suddenly now in Angular 18.
I'm assuming that the vite interprets the tsconfig include path in a wrong way, because layouts/**/*/**/*.module is nowhere defined but layouts/**/*.ts
Any ideas, on how to fix?
Minimal Reproduction
The described issue is part of a real huge software package that cannot be extracted easily. I really hope that the error description is enough to identify the error, without a code example here.
Exception or Error
No response
Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 18.0.1
Node: 20.9.0
Package Manager: npm 10.8.0
OS: darwin arm64
Angular: 18.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker, youtube-player
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.1
@angular-devkit/build-angular 18.0.1
@angular-devkit/core 18.0.1
@angular-devkit/schematics 18.0.1
@angular/cli 18.0.1
@schematics/angular 18.0.1
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6
Anything else relevant?
No response