Angular-cli: CSS style file is generated with a random string in its name - AOT mode

Created on 4 Jan 2017  路  13Comments  路  Source: angular/angular-cli

Please provide us with the following information:

OS?

Windows 10.

Versions.

angular-cli: 1.0.0-beta.24
node: 5.11.0
os: win32 ia32
@angular/common: 2.1.1
@angular/compiler: 2.1.1
@angular/core: 2.1.1
@angular/forms: 2.1.1
@angular/http: 2.1.1
@angular/platform-browser: 2.1.1
@angular/platform-browser-dynamic: 2.1.1
@angular/router: 3.1.1

Question or bug

Generation command:
ng build --aot --prod --no-sourcemap --verbose

With the below standalone and lazy style generation config:
{ "input": "assets/scss/accessibility.style.scss", "output": "accessibility.style.css", "lazy": true }

... generates angular-cli in AOT mode the filename with a random string. Like this:
accessibility.style.**027b05e9f06e48912b48**.bundle.css

That is very frustrating, because I need to know what is the generated file name to injext - with lazy option.

Is there any way to turn off that behaviour? It works fine with ng build command.

Expected generated file name in AOT mode:
accessibility.style.bundle.css

Related thread: #3401

Thank you for your help!

devkibuild-angular feature
Source
picture fuitattila
👍4

Most helpful comment

ohh, i have the same issue...

picture jasonkrot on 4 Jan 2017
👍2 😄1

All 13 comments

ohh, i have the same issue...

jasonkrot picture jasonkrot on 4 Jan 2017
👍2 😄1

@filipesilva do you have any idea?

fuitattila picture fuitattila on 5 Jan 2017

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.

filipesilva picture filipesilva on 5 Jan 2017
👍1

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: https://github.com/angular/angular-cli/commit/73ee82905466fe457b123d2da2a87b4e6f10e0cf

@filipesilva

aegyed-91 picture aegyed-91 on 5 Jan 2017
👍1

@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.

clydin picture clydin on 6 Jan 2017

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.

fuitattila picture fuitattila on 6 Jan 2017

@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 https://github.com/angular/angular-cli/pull/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.

filipesilva picture filipesilva on 6 Jan 2017

@filipesilva roger, will modify the PR after i get home from work

aegyed-91 picture aegyed-91 on 6 Jan 2017

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.

jerousseau picture jerousseau on 11 Sep 2017

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",
riemerio picture riemerio on 18 Jan 2018
👍2

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

AndreiShostik picture AndreiShostik on 5 Apr 2018
👍1

This has been corrected as of 6.1.0.

clydin picture clydin on 17 Aug 2018

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[bot] picture angular-automatic-lock-bot[bot] on 8 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rajjejosefsson picture rajjejosefsson  路  3Comments
NCC1701M picture NCC1701M  路  3Comments
rwillmer picture rwillmer  路  3Comments
IngvarKofoed picture IngvarKofoed  路  3Comments
gotschmarcel picture gotschmarcel  路  3Comments