Angular Server Side Rendering (SSR) has error Unable to locate stylesheet: in console when using deployUrl or --deploy-url with path in the production build

[tclyit]

Command

build

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

10

Description

I am using angular 16 and Nx and I use deployUrl or --deploy-url in production build command. The reason that I use this deployUrl is it provides a lot of benefit to deploy application to different places (servers) with different path of JS and CSS files. I'd had not faced this issue with version 10. In this version 16, I got many errors in the log. The error looks like this below.

Unable to locate stylesheet: /dist/apps/{appName}/browser/{appName}/styles.ab877c333925063d.css

To disable this error, I tried to set this inlineCriticalCss with false value in server.ts file, but the problem is the page got flicker with blue links which caught user attention. I must force to remove this inlineCriticalCss and leave the log in the console.

Example:
... server.engine( 'html', ngExpressEngine({ bootstrap: AppServerModule, providers: [ { provide: 'someToken', useFactory: () => tokenData, deps: [] }, ], inlineCriticalCss: false }) ); ...
The log on this error kept increasing every day. I had done many research around this issue and still there is no solution so far. I am trying to create this issue here is not to duplicate what had been raised before but to support the idea to fix this issue in Angular CLI.

Minimal Reproduction

Reproduce codes: https://github.com/tclyit/app-ssr
app-ssr.zip

The code above is to reproduce the error in SSR log but it is not setup with Nx as my original issue.
To start SSR, run this npm run start:ssr and got to http://localhost:4000/home observe terminal or console log.

The information below is summary of what I am using to develop the application.

Command to run:

npm run build:ssr

Package.json file:

{ "name": "digital-app", "version": "0.0.0", "private": true, "scripts": { "affected": "nx affected", "build": "nx build", "build:ssr": "nx build appname --prod --deploy-url app-name/ ", "start": "..." }, "dependencies": { "@angular/animations": "^14.3.0", "@angular/common": "^14.3.0", "@angular/compiler": "^14.3.0", "@angular/core": "^14.3.0", "@angular/elements": "^14.3.0", "@angular/forms": "^14.3.0", "@angular/localize": "^14.3.0", "@angular/platform-browser": "^14.3.0", "@angular/platform-browser-dynamic": "^14.3.0", "@angular/platform-server": "^14.3.0", "@angular/router": "^14.3.0", "@nguniversal/common": "^14.2.3", "@nguniversal/express-engine": "^14.2.3", "@nrwl/angular": "^14.8.9", "@nrwl/cli": "^15.9.7", "@nrwl/eslint-plugin-nx": "^15.9.7", "@nrwl/node": "^14.8.9", "@nrwl/workspace": "^15.7.0", "...": "...", "zone.js": "0.13.0" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.13", "@angular-eslint/builder": "^14.2.0", "@angular-eslint/eslint-plugin": "14.0.4", "@angular-eslint/eslint-plugin-template": "14.0.4", "@angular-eslint/schematics": "^14.2.0", "@angular-eslint/template-parser": "14.2.0", "@angular/cli": "~14.2.0", "@angular/compiler-cli": "14.3.0", "@angular/language-service": "14.3.0", "...": "...", "nx": "^15.9.7", "ts-node": "10.9.1", "typescript": "4.8.4", }, }

Exception or Error

Unable to locate stylesheet: /dist/apps/{appName}/browser/{appName}/styles.ab877c333925063d.css

Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.13
Node: 14.19.0
Package Manager: npm 6.14.16 
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.13
@angular-devkit/build-angular   14.2.13
@angular-devkit/core            14.2.13
@angular-devkit/schematics      14.2.13
@angular/cli                    14.2.13
@nguniversal/common             14.2.3
@nguniversal/express-engine     14.2.3
@schematics/angular             14.2.13
rxjs                            7.5.7
typescript                      4.7.4

Anything else relevant?

No response

[alan-agius4]

Hey, to address the flickering issue, you'll want to disable critical CSS inlining during the build process as a temporary workaround. Check out this link for more details: https://angular.io/guide/workspace-config#styles-optimization-options

[tclyit]

Hey, to address the flickering issue, you'll want to disable critical CSS inlining during the build process as a temporary workaround. Check out this link for more details: https://angular.io/guide/workspace-config#styles-optimization-options

Hi @alan-agius4, thanks for the flickering issue temporary fix call out.

[tclyit]

Hey, to address the flickering issue, you'll want to disable critical CSS inlining during the build process as a temporary workaround. Check out this link for more details: https://angular.io/guide/workspace-config#styles-optimization-options

Hi @alan-agius4,
For flickering issue, I got interesting error on trying to disable inlineCritical followed documentation above.

[alan-agius4]

removeSpecialComments was only added in version 17.

[tclyit]

removeSpecialComments was only added in version 17.

It produces same build error in screenshot below.

In this v14, it looks like not allowing to have styles attribute as object but only boolean.