Angular build fails to resolve CSS when package is externalized

Ouverte
#30,412 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
angular, bootstrap, sass
Domaine
build-system

Piste de recherche

Commencez par la reproduction minimale liée, en particulier angular.json et src/styles.scss, et exécutez ng build avec bootstrap listé dans externalDependencies. Suivez la manière dont les dépendances externalisées sont gérées lors du build Sass/styles globaux d’Angular ; le travail est considéré comme terminé lorsque JavaScript reste externe tandis que bootstrap/scss/bootstrap est résolu avec succès.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
16 h 35 min
PR mergées (30 j)
176

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.