Skip to content

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 #27403

Closed
@tclyit

Description

@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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions