angular / angular/angular-cli

Wildcard imports without an extension are not supported in application builder

Aperta
#26,615 11 commenti 0 reazioni 0 assegnatari Vedi su GitHub
angular/build:application area: @angular-devkit/build-angular needs: investigation
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.