angular / angular/angular-cli

Wildcard imports without an extension are not supported in application builder

Offen
#26,615 11 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
angular/build:application area: @angular-devkit/build-angular needs: investigation
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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.