angular / angular/angular-cli

Wildcard imports without an extension are not supported in application builder

未关闭
#26,615 11 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
angular/build:application area: @angular-devkit/build-angular needs: investigation
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
14 小时 23 分钟
30 天内合并 PR
162

描述

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

贡献指南

打开贡献指南

调研方向

首先,在使用 Angular CLI 17 的关联 StackBlitz 项目中复现无扩展名动态导入失败,然后检查 application builder 和 tsconfig.app.json 如何处理这些导入。跟踪针对生成的国家文件报告的 angular-compiler 错误;当复现项目成功构建,或通过覆盖率明确确定受支持的限制时,这项工作就完成了。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
build-system
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。