Wildcard imports without an extension are not supported in application builder
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 14h 23m
- Merged PRs (30d)
- 162
Description
### Which @angular/* package(s) are the source of the bug?
Don't known / other
### Is this a regression?
Yes
### Description
We have a set of auto-generated files that contain locale information for countries that's based off of CLDR information.
**Example File**
```
Filename: src/app/auto-generated/countries/XX.ts` where XX is the locale id (e.g. `en-us`).
export const data: [string, string][] = [['US', 'United States'], ['CA', 'Canada'], ...];
```
We used a Resolver class to retrieve this information.
```
export class CountryResolver implements Resolver {
constructor(@Inject(LOCALE_ID) private readonly localeId: string) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise {
return this.getCountries(this.localeId);
}
getCountries(localeId: string): Promise {
const locale = toLower(localeId);
// Attempt to import locales, otherwise import default locale 'en'
return import(`../../../auto-generated/countries/${locale}`)
.then(({ data } => resolve(data))
.catch(() => import(`../../../auto-generated/countries/en`))
.then(({ data } => resolve(data)));
}
```
This has worked, even in Angular 15.
I have just upgraded to Angular 17, this no longer works. I now get the following error:
```
[ERROR] File 'src/app/auto-generated/countries/en.d.ts' is missing from the TypeScript compilation. [plugin angular-compiler]
src/app/pages/input/input.resolve.ts:4:16:
4 │ ...urn import(`../../auto-generated/countries/${locale}...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Ensure the file is part of the TypeScript program via the 'files' or 'include' property.
```
It outputs that error for every file name in that directory.
I have tried adding the following to `tsconfig.app.json` as well as `tsconfig.json` but it doesn't do anything:
```
include: ['src/app/auto-generated/**/*.ts']
```
### Please provide a link to a minimal reproduction of the bug
[https://stackblitz.com/edit/stackblitz-starters-gzddrv?file=package.json](https://stackblitz.com/edit/stackblitz-starters-gzddrv?file=package.json)
### Please provide the exception or error you saw
```true
[ERROR] File 'src/app/auto-generated/countries/zh-hant.d.ts' is missing from the TypeScript compilation. [plugin angular-compiler]
src/app/pages/input/input.resolve.ts:4:16:
4 │ ...urn import(`../../auto-generated/countries/${locale}...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Ensure the file is part of the TypeScript program via the 'files' or 'include' property.
```
### Please provide the environment you discovered this bug in (run `ng version`)
```true
Angular CLI: 17.0.2
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64
Angular: 17.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.2
@angular-devkit/build-angular 17.0.2
@angular-devkit/core 17.0.2
@angular-devkit/schematics 17.0.2
@angular/cli 17.0.2
@angular/ssr 17.0.2
@schematics/angular 17.0.2
ng-packagr 17.0.2
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2
```
### Anything else?
I have also tried just converting the files to JSON, placing them in the `assets` folder and importing those via
```
import(`../../assets/path/to/${localeId}.json?raw`)
```
Btut I always get a console error saying that `../../assets/path/to/file/en.json` doesn't exist.
I ended up just using `fetch` with the files in the `assets` folder, however, it looks like this might not work with SSR.
Contributor guide
Research direction
Start by reproducing the extensionless dynamic import failure in the linked StackBlitz project with Angular CLI 17, then inspect how the application builder and tsconfig.app.json handle those imports. Trace the reported angular-compiler error for the generated country files; the work is done when the reproduction builds successfully or the supported limitation is clearly established with coverage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100