Include scripts with filenames containing hash using custom webpack config

[mboughaba]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

angular/cli 6 supports custom webpack config were one can specify a custom application bootstrap.

"projects": {
  "custom-name": {
    // ...
    "architect": {
      // ...
      "build": {
        "builder": "@angular-devkit/build-webpack:webpack",
        "options": {
          "webpackConfig": "webpack.config.js"
        }
      }
    }

custom webpack config can be specified as such

 const path = require('path');
 const config = {
   entry: './src/custom-app.js',
   mode: 'production',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'custom-app.js'
   }
 };
 module.exports = config;

then the output bundle can be reference in angular.json

"scripts": [
  { "input": "dist/custom-app.js", "lazy": true }
]

and then used as such

export class AppComponent {
  ngOnInit(): void {
    const customApp = new Worker('custom-app.js');
  }
}

Problem/Question/Request

Caching might become a problem with the setup above! What if we need to hash the custom-app.js bundle using webpack hashcontent?

 const path = require('path');
 const config = {
   entry: './src/custom-app.js',
   mode: 'production',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: '[name][contenthash].js'
   }
 };
 module.exports = config;

This will no longer result in custom-app.js but instead something like custom-app1247989898989.js.

Is there a way to load the hashed file in angular?

I am sorry if this might looks as a support question, but I got no luck on SE https://stackoverflow.com/questions/52785348/angular-cli-reference-a-hashed-scripts

[alan-agius4]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

That said, considering that from what I am understanding you have 2 builds, there would be no way to reference the hashed file in the previous file.

[mboughaba]

@alan-agius4 thanks for the reply

there is already a StackOverflow question for this. It is useless to suggest to do so again.

According to your last paragraph

That said, considering that from what I am understanding you have 2 builds, there would be no way to reference the hashed file in the previous file.

This is a valid feature request which is getting rejected because of technical limitation, I am right?

[mboughaba]

For future readers...

This can be achieved using webpack file-loader

Check #5885 (comment)

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