Build warnings after migrating to Angular 12.0.0 for external .css files Unable to locate stylesheet

[jlquijada]

Hi there!

After migrating my project to version 12.0.0, I get the following messages for external .css files when I issue the command ng build:

• Generating index html...Unable to locate stylesheet: C:\myproject\ClientApp\dist\https:\somedomain\somefile.min.css

Also when running the command ng serve, I get the corresponding warning messages for the same files.

The references (there are two such files) are in the section of my index.html

<link rel="stylesheet" href="https://somedomain/somefile.min.css">

The application is correctly compiling otherwise, and runs correctly.

Thanks a lot for your attention.

[petebacondarwin]

Transferring to the CLI project for triage.

[alan-agius4]

Hi @jlquijada,

It's not clear whether https://somedomain/ is set as being your deployUrl, baseHref or is just a remote url.

[jlquijada]

It is a remote url (external). I have also <script type="module" src="https://somedomain/somefile.js"></script> pointing to the .js files accompanying the .css, but there is no problem with those.

In any case, it is only a warning message during build, it gets loaded and it is used correctly during run time.

This was working with version 9,10, and 11 of Angular.

[alan-agius4]

In this case the warning is mostly for information purposes. What this means, is that the mentioned css file will not be analysed for critical CSS inlining.

[jlquijada]

The problem here is very simple: Files starting with http:// or https:// are external to the project and should not even be taken into account when making the package as they are not part of the projects' code.

But in case you decide to parse those files, do not attempt to look for them on
**file://project_folder/**http://whatever
this is wrong in any case, as you already have a full URL to the file in question, not a relative path.

in index.html, this is wrongly processed:

<link rel="stylesheet" href="https://some3rdpartydomain/somefile.min.css">

but this is correctly processed (or ignored as it is not relevant to building the package):

<script type="module" src="https://some3rdpartydomain/somefile.js"></script>

[grichards23]

I just came here to report the same thing.
All of our projects refer tot he same set of global styles at our organization so we add the following to the index.html of each project

Now with Angular 12, we get this warning every time we build..

Unable to locate stylesheet: C:\dist\https:\internalcdn.com\Apps\CSS\StyleSheet.css

As @jlquijada stated, the resulting build is still correct and the site works as expected.

[lyczos]

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;
                        });
                    },

[ashok2368]

Do we have any update on a fix for this issue?

[wiesnery]

We are loading css files from a "local" path location at runtime. So css files will be there when properly deployed but are not part of the angular project. While in debug mode we are using a proxy to access the css files.

Would be nice to have any simple option for exclusions.

[maxisam]

@filipesilva #21999 doesn't really close this. This also happens when deployUrl is set to a different path.

[filipesilva]

@alan-agius4 please see above

[alan-agius4]

@maxisam, please file an issue with a reproduction thanks

[maxisam]

@alan-agius4 here is the repo https://github.com/maxisam/angular-13/tree/ssr-deploy-url

I feel like it is the same issue causing by the same part of code like @lyczos mentioned. I can create one if you like.

I don't understand why SSR needs to do inline critical css. I thought this is done in the build process.

[alan-agius4]

@maxisam, your issue is slightly different, see: angular/universal#2019.

Note: deployUrl is deprecated and is recommended to replace it with baseHref and APP_BASE_HREF instead.

[maxisam]

@alan-agius4 Yeah, I just saw that on Angular 13. I didn't see that on 12. I will try to migrate it and see if it works

[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.}