angular / angular/angular-cli

Wildcard imports without an extension are not supported in application builder

Ouverte
#26,615 11 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
angular/build:application area: @angular-devkit/build-angular needs: investigation
Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
14 h 23 min
PR mergées (30 j)
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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire l’échec de l’importation dynamique sans extension dans le projet StackBlitz lié avec Angular CLI 17, puis examinez la manière dont l’application builder et tsconfig.app.json gèrent ces importations. Suivez l’erreur angular-compiler signalée pour les fichiers de pays générés ; le travail est terminé lorsque la reproduction se construit correctement ou que la limitation prise en charge est clairement établie avec une couverture.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
build-system
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.