angular / angular/angular-cli

Angular build fails to resolve CSS when package is externalized

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

描述

### Which @angular/* package(s) are the source of the bug?

compiler

### Is this a regression?

No

### Description

Hi there 👋

In a micro-frontend architecture, our goal is to compile CSS utilities while relying on importmap to load all JavaScript. I'm not sure if I’ve missed a configuration step or if this is expected behavior.

However, in the Vite ecosystem, when using the option to externalize dependencies, all the CSS is correctly resolved, but the JavaScript is excluded from the import.

```js
export default defineConfig((env) => {
return {
build: {
rollupOptions: {
external: ["bootstrap"],
},
},
});
```

However, in the Angular environment, this approach causes the build to fail because it can't locate the CSS.

```json
"projects": {
"test-angular": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"externalDependencies": ["bootstrap"],
```

To isolate the issue, I created a minimal reproduction using Bootstrap.

Thank you very much for the awesome work 🚀

### Please provide a link to a minimal reproduction of the bug

https://github.com/Tragio/angular-externalize-repro

### Please provide the exception or error you saw

```true
> ng build

Application bundle generation failed. [1.968 seconds]

✘ [ERROR] Can't find stylesheet to import.

2 │ @use "bootstrap/scss/bootstrap";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

src/styles.scss 2:1 root stylesheet [plugin angular-sass]

angular:styles/global:styles:1:8:
1 │ @import 'src/styles.scss';
╵ ~~~~~~~~~~~~~~~~~
```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 19.2.14
Node: 22.14.0
Package Manager: npm 10.9.2
OS: darwin arm64

Angular: 19.2.14
... cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1902.14
@angular-devkit/build-angular 19.2.14
@angular-devkit/core 19.2.14
@angular-devkit/schematics 19.2.14
@schematics/angular 19.2.14
rxjs 7.8.2
typescript 5.7.3
zone.js 0.15.1
```

### Anything else?

_No response_

贡献指南

打开贡献指南

调研方向

从链接的最小复现开始,重点查看 angular.json 和 src/styles.scss,并在 externalDependencies 中列出 bootstrap 后运行 ng build。跟踪 Angular Sass/全局样式构建期间如何处理外部化依赖;当 JavaScript 仍保持外部依赖,同时 bootstrap/scss/bootstrap 成功解析时,即表示完成。

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

评估

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

把新 issue 发到你的邮箱

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