Angular build fails to resolve CSS when package is externalized

オープン
#30,412 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
angular, bootstrap, sass
領域
build-system

調査の方向性

リンクされた最小再現、特に angular.json と src/styles.scss から始め、bootstrap を externalDependencies に指定して ng build を実行します。Angular の Sass/グローバルスタイルのビルド中に外部化された依存関係がどのように処理されるかを追跡します。JavaScript が外部のまま維持され、bootstrap/scss/bootstrap が正常に解決されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

angular/build:application area: @angular/build freq1: low severity3: broken
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.

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.

  "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
> 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)
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

主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
16時間 35分
マージ済み PR(30日)
176

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/angular-cli のほかの issue

angular/angular-cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。