CSS style file is generated with a random string in its name - AOT mode #3853
Comments
|
ohh, i have the same issue... |
|
@filipesilva do you have any idea? |
|
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
added
command: build
P5
|
A lot of if not all backend solutions provide cache busting mechanism. For example in symfony the 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 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. |
|
Another problem is for lazy generated JS files is that angular-cli injects newly generated JS files, to the end of <!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 This is very annoying, if we need just a plain JS on top of |
|
@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. |
|
@filipesilva roger, will modify the PR after i get home from work |
|
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. |
|
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 |
filipesilva
added
feature
|
nice. |
filipesilva
added
area: @angular-devkit/build-angular
and removed
comp: cli/build
labels
|
This has been corrected as of 6.1.0. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
OS?
Versions.
Question or bug
Generation command:
ng build --aot --prod --no-sourcemap --verboseWith 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.cssThat 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.cssRelated thread: #3401
Thank you for your help!
The text was updated successfully, but these errors were encountered: