Wildcard imports without an extension are not supported in application builder
- Lingua principale
- TypeScript
- Stelle
- 27k
- Fork
- 11.8k
- Merge medio
- 14h 23m
- PR unite (30g)
- 162
Descrizione
### 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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia riproducendo il fallimento dell’import dinamico senza estensione nel progetto StackBlitz collegato con Angular CLI 17, quindi esamina come l’application builder e tsconfig.app.json gestiscono questi import. Traccia l’errore angular-compiler segnalato per i file dei paesi generati; il lavoro è completato quando la riproduzione viene compilata correttamente oppure la limitazione supportata viene stabilita chiaramente con una coverage.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- build-system
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100