Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

`ng new --view-encapsulation` has no effect on generated components

Geschlossen
  • Stimmt etwas nicht?
#34,388 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Ein zugehöriger Pull Request wurde bereits gemerged.

  • #34389 von @MeAkib — gemerged

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Veraltet
Tech-Stack
angular, typescript
Bereich
build-system, cli

Rechercherichtung

The issue identifies the ng new and ng generate application paths, the generated root App component, angular.json component schematic defaults, and main.ts bootstrap options. Trace how --view-encapsulation flows through those generation paths and compare the generated files with the reproduction steps. Done means the selected mode affects the initial component and later generated components under AOT.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area: @schematics/angular
Command

new

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

The --view-encapsulation option of ng new / ng generate application is documented as "Sets the view
encapsulation mode for components in the initial project", but it currently has no effect:

  1. The root App component is generated without encapsulation, so its styles stay scoped (Emulated).
  2. The value is not saved to the project's @schematics/angular:component defaults in angular.json, so components
    generated later with ng g c also use Emulated.
  3. For --no-standalone apps, main.ts gets bootstrapModule(AppModule, { defaultEncapsulation: ViewEncapsulation.X }).
    defaultEncapsulation is only read by the JIT compiler, so it has no effect with AOT, which is the default for
    ng build and ng serve.

This looks like #13689 again: it was fixed in 89797900db by setting the encapsulation on the root component and in
bootstrapModule, but the root component part was removed in 58bc5b8f2a (for #13742, invalid generated code), leaving
only the JIT-only option.

Minimal Reproduction
  1. ng new ve-repro --defaults --view-encapsulation=None (same result with --no-standalone)
  2. Add h1 { color: red; } to src/app/app.css
  3. ng build --configuration development
  4. The output contains h1[_ngcontent-%COMP%], i.e. the styles are still encapsulated.
  5. angular.json has no viewEncapsulation under projects.ve-repro.schematics, so ng g c foo also generates an
    Emulated component.
Exception or Error
Your Environment
Latest
Anything else relevant?

Possible fix: set encapsulation on the generated root component, save viewEncapsulation in the component schematic
defaults, and drop defaultEncapsulation from main.ts. Happy to send a PR.

Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
1 T. 5 Std.
Gemergte PRs (30 T.)
240

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/angular-cli

Alle Issues in angular/angular-cli

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.