inlineCriticalCss not working with SSR.

🐞 Bug report

What modules are related to this issue?

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

Is this a regression?

not sure

Description

With inlineCriticalCss set to true, the below error occurs. I found that in ‘embedLinkedStylesheet’ the href value is undefined when it tries to process this element; <link rel="stylesheet" href="styles.162799855ab4c03c113b.css">

Since the file path isn’t a url the ‘href’ value is undefined. Not sure if this is a change that needs to happen in Critters or in Angular. I did find this similar issue in a different project: https://github.com/GoogleChromeLabs/critters/issues/71

🔥 Exception or Error

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:124:11)
    at Object.resolve (path.js:139:9)
    at CrittersExtended.getCssAsset (C:\Users\X\repos\X\dist\Project\server\main.js:137185:31)
    at CrittersExtended.embedLinkedStylesheet (C:\Users\X\repos\X\dist\Project\server\main.js:137265:37)
    at C:\Users\X\repos\X\dist\Project\server\main.js:137114:79
    at Array.map (<anonymous>)
    at C:\Users\X\repos\X\dist\Project\server\main.js:137114:61
    at CrittersExtended.process (C:\Users\X\repos\X\dist\Project\server\main.js:137116:8)
    at InlineCriticalCssProcessor.<anonymous> (C:\Users\X\repos\X\dist\Project\server\main.js:137609:44)
    at Generator.next (<anonymous>)

🌍 Your Environment

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

Angular CLI: 12.0.0
Node: 14.15.1
Package Manager: npm 6.14.8
OS: win32 x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@nguniversal/builders           12.0.0
@nguniversal/common             12.0.0
@nguniversal/express-engine     12.0.0
@schematics/angular             12.0.0
rxjs                            6.6.2
typescript                      4.2.4

[ericfowler303]

@alan-agius4 I believe I have figured out the issue. I have a custom caching layer in the rendering process, mostly to save cached outputs of already rendered pages for a specified time.

I realized that I wasn’t passing through every renderOption through as I should. The main one I forgot here was ‘publicPath’ which caused different behavior here potentially: https://github.com/angular/universal/blob/master/modules/common/engine/src/engine.ts#L68

After passing through the ‘publicPath’ RenderOption, I was able to get the proper async CSS and no errors when rending with ‘inlineCriticalCss’ set to true. Looks as this was an issue in my custom implantation, not an issue with the new inlineCriticalCss functionality.

[angular-automatic-lock-bot[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.}