angular / angular/angular-cli

Wildcard imports without an extension are not supported in application builder

Đang mở
#26,615 11 bình luận 0 reaction 0 người được giao Xem trên GitHub
angular/build:application area: @angular-devkit/build-angular needs: investigation
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện lỗi import động không có phần mở rộng trong dự án StackBlitz được liên kết với Angular CLI 17, sau đó kiểm tra cách application builder và tsconfig.app.json xử lý các import đó. Theo dõi lỗi angular-compiler được báo cáo đối với các tệp quốc gia được tạo; công việc hoàn tất khi bản tái hiện build thành công hoặc giới hạn được hỗ trợ được xác lập rõ ràng kèm coverage.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
build-system
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.