Angular Universal logs error that it cannot find external CSS file

[tommueller]

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine

Is this a regression?

Yes, in version 11 I did not experience this bug.

Description

When adding an external stylesheet to either the index.html of a project, or dynamically via code, Angular Universal logs an error to the console. The error is just present in the output of the terminal running the project, not in the browser:
Unable to locate stylesheet: /home/user/sandbox/ext-css-repro/dist/ext-css-repro/browser/https:/cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css

In the browser everything seems fine. The styles from the file also load correctly.

🔬 Minimal Reproduction

ng new ext-css-repro
ng add @nguniversal/express-engine

add a link to an external stylesheet to the index.html. For example this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

🔥 Exception or Error

Unable to locate stylesheet: /home/user/sandbox/ext-css-repro/dist/ext-css-repro/browser/https:/cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css

🌍 Your Environment

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

Angular CLI: 12.0.2
Node: 14.15.5
Package Manager: npm 6.14.11
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.2
@angular-devkit/build-angular   12.0.2
@angular-devkit/core            12.0.2
@angular-devkit/schematics      12.0.2
@nguniversal/builders           12.0.1
@nguniversal/express-engine     12.0.1
@schematics/angular             12.0.2
rxjs                            6.6.7
typescript                      4.2.4

[jjaone]

I have the same issue, how is that fix: "skip processing of remote stylesheets" above by @alan-agius4 to be applied?

No explanation is given why dev builds work normally but issue apppear only when building with production option?

Is this a problem in Angular/CLI or our code?

[daemonraco]

Hi, I know this is not the solution to this issue, but it's at least a workaround that worked for me.

Instead of adding the the tag <link/> in index.html, you can add this line in the file styles.scss:

@import url("https:/cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css");

Of course, this requires you to use SCSS in your project, and probably, the best solution for this idea is to download Bootstrap with npm install bootstrap and then import from node_modules becuase I have the feeling that the Express server might be downloading from the CDN on every response (but not sure).

Regards, I hope it helps.

[DavidBowdoin]

@lyczos found a solution angular/angular-cli#20794 (comment) I no longer get the bothersome error messages!

I'm having the same issue while using https://github.com/angular/universal Turning off inlineCriticalCss in ngExpressEngine options seems to work for me at least for SSR.

// server.ts
ngExpressEngine({
      bootstrap: AppServerModule,
      inlineCriticalCss: false
})

As far as I see it is caused by Critters:getCssAsset() - it's trying to resolve external assets (ex. from CDN) on local path

 var normalizedPath = href.replace(/^\//, '');
                    var pathPrefix = (publicPath || '').replace(/(^\/|\/$)/g, '') + '/';
                    if (normalizedPath.indexOf(pathPrefix) === 0) {
                        normalizedPath = normalizedPath.substring(pathPrefix.length).replace(/^\//, '');
                    }
                    var filename_1 = path.resolve(outputPath, normalizedPath);
                    var sheet_1;
                    var _temp5 = _catch(function () {
                        return Promise.resolve(_this3_1.readFile(filename_1)).then(function (_this3$readFile) {
                            sheet_1 = _this3$readFile;
                        });
                    },

[GreatKostya]

I've added next code to my server.ts and it helped me to fix this issue with Critters

server.set('views', `${pathToDistFolder}`);

Maybe it can be useful for some cases

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided.
Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue.
Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and add the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}