angular-cli icon indicating copy to clipboard operation
angular-cli copied to clipboard

Dynamic inline module import is not working anymore

Open elementalTIMING opened this issue 1 year ago • 0 comments

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

elementalTIMING avatar May 24 '24 05:05 elementalTIMING