CSS style file is generated with a random string in its name - AOT mode #3853

Activity

1. jasonkrot commented on Jan 4, 2017

   

   jasonkrot

   on Jan 4, 2017

   Last edited by jasonkrot

   More actions

   ohh, i have the same issue...

   👍React with 👍2Reacted by Fehér Norbert and Jonah Jordan

   😄React with 😄1Reacted by F. Attila
2. fuitattila commented on Jan 5, 2017

   

   fuitattila

   on Jan 5, 2017

   Author

   More actions

   @filipesilva do you have any idea?
3. filipesilva commented on Jan 5, 2017

   

   filipesilva

   on Jan 5, 2017

   Contributor

   More actions

   There is no way to disable the hash for prod build currently. But I agree that it should be disabled by default for the lazy loaded scripts/styles.

   👍React with 👍1Reacted by F. Attila
4. filipesilva

   self-assigned this

   on Jan 5, 2017
5. filipesilva

   added

   command: build

   P5The team acknowledges the request but does not plan to address it, it remains open for discussionThe team acknowledges the request but does not plan to address it, it remains open for discussion

   on Jan 5, 2017
6. aegyed91 commented on Jan 5, 2017

   

   aegyed91

   on Jan 5, 2017

   More actions

   A lot of if not all backend solutions provide cache busting mechanism. For example in symfony the asset method: <script type="text/javascript" src="{{ asset("inline.bundle.js") }}"></script>.

   I had to fork angular-cli and implement it myself, i did it in a non-destructive way (with cli flag). Will do a PR today i think.

   Here are the changes: 73ee829

   @filipesilva

   👍React with 👍1Reacted by F. Attila
7. clydin commented on Jan 6, 2017

   

   clydin

   on Jan 6, 2017

   Member

   More actions

   @filipesilva what about a separate webpack config for the lazy styles? (scripts too?) It could run in parallel and since they're lazy they shouldn't have any overlap with the rest of the app.
8. fuitattila commented on Jan 6, 2017

   

   fuitattila

   on Jan 6, 2017

   Author

   More actions

   Another problem is for lazy generated JS files is that angular-cli injects newly generated JS files, to the end of index.html, like that:

   <!DOCTYPE html><html>
   <head>
     <base href="">
   <script type="text/javascript" src="lazy.bundle.js">
   </head>
   <body>
   <app></app>
   <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
   </html>

   And the webpack helper plugin contains inline.bundle.js. But I want to use some lazy loaded JS in <head></head> - @see: lazy.bundle.js - because of performance considerations.

   This is very annoying, if we need just a plain JS on top of index.html.
9. filipesilva commented on Jan 6, 2017

   

   filipesilva

   on Jan 6, 2017

   Contributor

   More actions

   @clydin that would work I suppose. I'm not too familiar with the multiple config setup and it's limitations (if any). Can you tell me how it would be better than having the single config? Is it faster to have separate configs for instance?

   If there are such benefits then I don't see why it shouldn't be done even regardless of the chunk hashes.

   One thing to keep in mind is that it would be preferable to not have the command fail when there is no entry for that config (like #3867 tries to do).

   @fuitattila lazy generated files are not auto-injected, or at least they shouldn't be. I suppose it would be useful for some cases to choose where stuff is injected but since order matters that's not very easy to orchestrate.
10. aegyed91 commented on Jan 6, 2017

    

    aegyed91

    on Jan 6, 2017

    More actions

    @filipesilva roger, will modify the PR after i get home from work
11. jerousseau commented on Sep 11, 2017

    

    jerousseau

    on Sep 11, 2017

    More actions

    I have the same issue, with the version 1.4 the script with output name and lazy does not include the hash but the style always include the hash.
12. riemerio commented on Jan 18, 2018

    

    riemerio

    on Jan 18, 2018

    More actions

    For anyone who want to use global css scipts in .angular-cli.json lazy loaded without hash I wrote following script (e.g. patch-ng-cli.js)

    const fs = require('fs');
    
    const stylesFileToPatch = "node_modules/@angular/cli/models/webpack-configs/styles.js";
    
    const regex = /extraPlugins\.push\(.*\}\)\)\;/;
    const patchContent = `
            // PATCHED CONTENT START
            const globalStyles = utils_1.extraEntryParser(appConfig.styles, appRoot, 'styles');
            extraPlugins.push(new ExtractTextPlugin({ filename: getPath => {
                const generatedFileName = getPath(\`[name]\${hashFormat.extract}.bundle.css\`);
                const name = generatedFileName.split(".")[0];
                const globalAppStylesConfigEntry = globalStyles.find(path => path.output === name);
                if (globalAppStylesConfigEntry && globalAppStylesConfigEntry.lazy){
                    console.log(\`\${name} will not be hashed due to lazy loading\`);
                    return \`\${name}.bundle.css\`
                }
                console.log(generatedFileName);
                return generatedFileName;
            }}));
            // PATCHED CONTENT END
    `;
    
    
    fs.readFile(stylesFileToPatch, (err, data) => {
        if (err) { throw err; }
    
        const text = data.toString();
    
        const isAlreadyPatched = !!text.match("PATCHED CONTENT");
    
        if (isAlreadyPatched) return console.warn("-- already patched --", stylesFileToPatch);
    
        console.log('-- Patching ng-cli: ', stylesFileToPatch);
        const patchedContent = text.replace(regex, patchContent);
    
        const file = fs.openSync(stylesFileToPatch, 'r+');
        fs.writeFile(file, patchedContent, () => console.log("-- Patching -- OK"));
        fs.close(file);
    });

    Then run this script after npm install via npm scripts in package.json

    "postinstall": "node ./patch-ng-cli.js",
    

    👍React with 👍2Reacted by rafalkaczmarek and Daniel Campodonico
13. hansl

    unassigned

    filipesilva

    on Feb 1, 2018
14. filipesilva

    added

    featureLabel used to distinguish feature request from other issuesLabel used to distinguish feature request from other issues

    and removed

    P5The team acknowledges the request but does not plan to address it, it remains open for discussionThe team acknowledges the request but does not plan to address it, it remains open for discussion

    on Feb 1, 2018
15. AndreiShostik commented on Apr 5, 2018

    

    AndreiShostik

    on Apr 5, 2018

    More actions

    nice.
    instead of the process simplification you need to struggle with angular-cli

    👍React with 👍1Reacted by Cristi Vîjdea
16. filipesilva

    added

    area: @angular-devkit/build-angular

    and removed

    comp: cli/build

    on Jun 8, 2018
17. clydin commented on Aug 17, 2018

    

    clydin

    on Aug 17, 2018

    Member

    More actions

    This has been corrected as of 6.1.0.
18. clydin

    closed this as completedon Aug 17, 2018
19. angular-automatic-lock-bot commented on Sep 8, 2019

    

    angular-automatic-lock-botBot

    on Sep 8, 2019

    More actions

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

    locked and limited conversation to collaborators on Sep 8, 2019