Skip to content
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.

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

Angular 12 AngularWebpackPlugin is not compatible with some webpack plugins #21290

Closed
2 of 15 tasks
dpraul opened this issue Jul 6, 2021 · 2 comments · Fixed by #21296
Closed
2 of 15 tasks

Angular 12 AngularWebpackPlugin is not compatible with some webpack plugins #21290

dpraul opened this issue Jul 6, 2021 · 2 comments · Fixed by #21296
Labels
area: @ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Milestone

Comments

@dpraul
Copy link

dpraul commented Jul 6, 2021

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 11.x

Description

As of Angular 12, the AngularWebpackPlugin throws an error when used in conjunction with the git-revision-webpack-plugin. The git-revision-webpack-plugin creates additional outputs that do not specify the optional sourceFilename field, but the AngularWebpackPlugin requires this field.

🔬 Minimal Reproduction

A webpack.config.js that specifies both plugins will fail:

const { AngularWebpackPlugin } = require('@ngtools/webpack');
const { GitRevisionPlugin } = require('git-revision-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        loader: '@ngtools/webpack',
      },
    ],
  },
  plugins: [
    new AngularWebpackPlugin(),
    new GitRevisionPlugin(),
  ],
};

🔥 Exception or Error

/app/node_modules/@ngtools/webpack/src/resource_loader.js:207
                            throw new Error(`'${name}' asset info 'sourceFilename' is 'undefined'.`);
                            ^

Error: 'COMMITHASH' asset info 'sourceFilename' is 'undefined'.
    at /app/node_modules/@ngtools/webpack/src/resource_loader.js:207:35
    at /app/node_modules/webpack/lib/Compiler.js:538:11
    at /app/node_modules/webpack/lib/Compiler.js:1106:17
    at Hook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/app/node_modules/tapable/lib/Hook.js:18:14)
    at /app/node_modules/webpack/lib/Compiler.js:1102:33
    at finalCallback (/app/node_modules/webpack/lib/Compilation.js:2249:11)
    at /app/node_modules/webpack/lib/Compilation.js:2540:11
    at Hook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/app/node_modules/tapable/lib/Hook.js:18:14)

🌍 Your Environment

Angular CLI: 12.1.1
Node: 14.15.1
Package Manager: yarn 1.22.5
OS: linux x64

Angular: 12.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, upgrade

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.1
@angular-devkit/build-angular   12.1.1
@angular-devkit/core            12.1.1
@angular-devkit/schematics      12.1.1
@ngtools/webpack                12.1.1
@schematics/angular             12.1.1
rxjs                            6.6.7
typescript                      4.3.5
webpack                         5.41.1

Anything else relevant?

Related issue in the git-revision-webpack-plugin repo: pirelenito/git-revision-webpack-plugin#69

@alan-agius4 alan-agius4 added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews area: @ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix labels Jul 6, 2021
@ngbot ngbot bot added this to the Backlog milestone Jul 6, 2021
@alan-agius4 alan-agius4 removed the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Jul 6, 2021
clydin added a commit to clydin/angular-cli that referenced this issue Jul 6, 2021
…sources

The asset caching for Angular component resources previously required that all assets had an originating file. However, some Webpack plugins may generate assets that do not originate from on-disk files and are instead synthetic. These type of assets are now supported by generating a cache key based on the output name of the asset. These assets will persist within the cache due to the lack of knowledge on the dependencies of these assets which results in the inability to invalidate the assets. Updated assets of the same output name will, however, replace older versions of the asset on rebuilds.

Fixes: angular#21290
filipesilva pushed a commit that referenced this issue Jul 9, 2021
…sources

The asset caching for Angular component resources previously required that all assets had an originating file. However, some Webpack plugins may generate assets that do not originate from on-disk files and are instead synthetic. These type of assets are now supported by generating a cache key based on the output name of the asset. These assets will persist within the cache due to the lack of knowledge on the dependencies of these assets which results in the inability to invalidate the assets. Updated assets of the same output name will, however, replace older versions of the asset on rebuilds.

Fixes: #21290
(cherry picked from commit 7536338)
filipesilva pushed a commit that referenced this issue Jul 9, 2021
…sources

The asset caching for Angular component resources previously required that all assets had an originating file. However, some Webpack plugins may generate assets that do not originate from on-disk files and are instead synthetic. These type of assets are now supported by generating a cache key based on the output name of the asset. These assets will persist within the cache due to the lack of knowledge on the dependencies of these assets which results in the inability to invalidate the assets. Updated assets of the same output name will, however, replace older versions of the asset on rebuilds.

Fixes: #21290
@dpraul
Copy link
Author

dpraul commented Jul 15, 2021

Can confirm that this is fixed in 12.1.2 - thank you!

@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 Aug 15, 2021
ikjelle pushed a commit to ikjelle/angular-cli that referenced this issue Mar 26, 2024
…sources

The asset caching for Angular component resources previously required that all assets had an originating file. However, some Webpack plugins may generate assets that do not originate from on-disk files and are instead synthetic. These type of assets are now supported by generating a cache key based on the output name of the asset. These assets will persist within the cache due to the lack of knowledge on the dependencies of these assets which results in the inability to invalidate the assets. Updated assets of the same output name will, however, replace older versions of the asset on rebuilds.

Fixes: angular#21290
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: @ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants