Angular build fails to resolve CSS when package is externalized
- 主要语言
- 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