Wildcard imports without an extension are not supported in application builder
- Vorherrschende Sprache
- TypeScript
- Sterne
- 27k
- Forks
- 11.8k
- Ø Merge
- 14 Std. 23 Min.
- Gemergte PRs (30 T.)
- 162
Beschreibung
### 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.
Beitragsleitfaden
Rechercherichtung
Beginne damit, den Fehler bei dynamischen Imports ohne Dateiendung im verknüpften StackBlitz-Projekt mit Angular CLI 17 zu reproduzieren, und untersuche anschließend, wie der Application Builder und tsconfig.app.json mit diesen Imports umgehen. Verfolge den gemeldeten angular-compiler-Fehler für die generierten Länderdateien; die Arbeit ist abgeschlossen, wenn der Reproduktionsfall erfolgreich erstellt wird oder die unterstützte Einschränkung mit entsprechender Abdeckung eindeutig festgestellt ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- build-system
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 38/100