Skip to content

@angular-devkit/build-angular:app-shell builder produces distribution index.html missing script tags referencing the main, runtime, and polyfills chunks when the source index.html contains a self-closing <app-root /> tag #27563

Closed as not planned
@rewento

Description

@rewento

Command

run

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

If a self-closing tag bearing the selector of the AppComponent (<app-root />) is included in the source index.html rather than both opening and closing tags bearing that selector (<app-root></app-root>), and a distribution with an app shell is built with the ng run my-app:app-shell:production Angular CLI command, the index.html of that distribution will lack <script> tags referencing the "main", "runtime", and "polyfills" bundle chunks.

Minimal Reproduction

Reproduction Steps

  1. Create a new Angular workspace with one application project with this shell command for the Angular CLI:
    new repro-app-shell-issue
    And respond like this to follow-up prompts:
    Would you like to add Angular routing? Yes
    Which stylesheet format would you like to use? CSS
  2. cd into the new repro-app-shell-issue directory and run this command for the Angular CLI:
    ng generate app-shell
  3. Create a distribution for the app project without an app shell with the ng build repro-app-shell-issue --configuration production Angular CLI command. Examine the index.html of the distribution (dist/repro-app-shell-issue/browser/index.html) and note that it contains <script> tags referencing the "main", "runtime", and "polyfills" bundle chunks.
  4. Create a distribution for the app project with an app shell with the ng run repro-app-shell-issue:app-shell:production Angular CLI command. Examine the index.html of the distribution (dist/repro-app-shell-issue/browser/index.html) and note that it contains <script> tags referencing the "main", "runtime", and "polyfills" bundle chunks.
  5. Modify the source index.html (src/index.html) so that the tag bearing the selector of the AppComponent is self closing. <app-root></app-root> --> <app-root />
  6. Create a distribution for the app project without an app shell with the ng build repro-app-shell-issue --configuration production Angular CLI command. Examine the index.html of the distribution (dist/repro-app-shell-issue/browser/index.html) and note that it contains <script> tags referencing the "main", "runtime", and "polyfills" bundle chunks.
  7. Create a distribution for the app project with an app shell with the ng run repro-app-shell-issue:app-shell:production Angular CLI command. Examine the index.html of the distribution (dist/repro-app-shell-issue/browser/index.html) and note that it DOES NOT CONTAIN <script> tags referencing the "main", "runtime", and "polyfills" bundle chunks.

Reproduction Source Repository
https://github.com/rewento/repro-app-shell-issue/tree/main

Exception or Error

No response

Your Environment

Angular CLI: 16.2.14
Node: 18.18.2
Package Manager: npm 10.5.2
OS: darwin arm64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.14
@angular-devkit/build-angular   16.2.14
@angular-devkit/core            16.2.14
@angular-devkit/schematics      16.2.14
@angular/cli                    16.2.14
@schematics/angular             16.2.14
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions