Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Way to load additional css files with hash in filename after app init. #23362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
SvenBudak opened this issue Jan 29, 2020 · 8 comments
Closed

Way to load additional css files with hash in filename after app init. #23362

SvenBudak opened this issue Jan 29, 2020 · 8 comments
Labels
2022Q3 Fixit Candidates for the Q3 2022 fix-it needs: more info Reporter must clarify the issue

Comments

@SvenBudak
Copy link

SvenBudak commented Jan 29, 2020 •
edited
Loading

I am working on a good solution for dark / light theming depends on prefers-color-scheme. This is what i got: https://medium.com/@svenbudak/how-to-implement-dark-light-mode-in-angular-mateiral-with-prefers-color-scheme-ce3e980e2ea5

The problem in this solution is that both themes are includet inside the app. Which can be cool, because if there are just some some little lines they overwrite some basic colors, there will be no loading time while switching theme. But if there are some more lines of theming css, its overhead to load both.

So i added to angular.json:

"styles": [
    "src/scss/styles.scss",
    {
        "input": "src/scss/prefers-color-scheme/dark.scss",
        "bundleName": "dark"
    },
    {
        "input": "src/scss/prefers-color-scheme/light.scss",
        "bundleName": "light"
    }
]

Which is working very well. It generates me this 2 files:

dark.4dec7b0304c3dec40370.css
light.33e2a5c89c5f95e86528.css

I also asked in the @angular/components issue board, but i think this is a angular task.

I know i can add in the angular.json the inject attribute, then they have no hashes and i can load them easy with renderer2. But then the PWA support will gets lost. (Because the Angular Serviceworker needs the hashes in the filenames to understand when a file has updated: https://angular.io/guide/service-worker-communications#version-updates) They are any plans to make it possible to get somehow filenames like this after the app gets initialized? Because i need to check in app first the prefers-color-scheme (i will make this check in js file, because i do some more then only read it from browser).
@tomayac
Copy link

tomayac commented Jan 31, 2020

Would dynamically querying the file names help?

const darkCSS = document.querySelector('link[rel="stylesheet"][href^="dark"]').href;

@SvenBudak
Copy link
Author

SvenBudak commented Jan 31, 2020 •
edited
Loading

I don't think so. Check the service i wrote. It is important to give people the possibility to overwrite the OS specific selected prefered-color-scheme by writing it into the localStorage.

First we have to check the result of the service, THEN we have to load (depends on the result) the light or dark theme. (Which filename we don't have)

Maybe something like a env.cache makes sense that gets generated while build task, where the filenames get stored... But I think this will anoy alot people only for prefered-color stuff...

@mhevery mhevery added the feature Issue that requests a new feature label Mar 3, 2020
@angular-robot angular-robot bot added the feature: votes required Feature request which is currently still in the voting phase label Jun 4, 2021
@angular-robot
Copy link
Contributor

angular-robot bot commented Jun 4, 2021

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

@angular-robot
Copy link
Contributor

angular-robot bot commented Jun 25, 2021

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

@angular-robot angular-robot bot added the feature: insufficient votes Label to add when the not a sufficient number of votes or comments from unique authors label Jun 25, 2021
@jessicajaniuk jessicajaniuk transferred this issue from angular/angular Jun 13, 2022
@alan-agius4 alan-agius4 added needs: more info Reporter must clarify the issue and removed core: stylesheets feature Issue that requests a new feature feature: votes required Feature request which is currently still in the voting phase feature: insufficient votes Label to add when the not a sufficient number of votes or comments from unique authors labels Jun 14, 2022
@alan-agius4
Copy link
Collaborator

Hi @SvenBudak,

Can you elaborate why using the inject option would break PWA support?

@SvenBudak
Copy link
Author

SvenBudak commented Jun 26, 2022 •
edited
Loading

@alan-agius4

Because the Angular Serviceworker needs the hashes in the filenames to understand when a file has updated: https://angular.io/guide/service-worker-communications#version-updates

I updated the Topic and added this information.

@alan-agius4 alan-agius4 added the 2022Q3 Fixit Candidates for the Q3 2022 fix-it label Jun 30, 2022
@alan-agius4
Copy link
Collaborator

@SvenBudak, the service-worker doesn't need filename with hashes to understand when a file has been updated as it relies on the content hashes.

In the linked document it is also mentioned that in some cases using filenames with hashes can cause unrecoverable states.

More information about this can be read https://angular.io/guide/service-worker-devops#service-worker-and-caching-of-app-resources

@alan-agius4 alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale Jun 30, 2022
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
2022Q3 Fixit Candidates for the Q3 2022 fix-it needs: more info Reporter must clarify the issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@mhevery @tomayac @pkozlowski-opensource @kara @SvenBudak @alan-agius4 @AndrewKushnir