Angular 6 / 7 “the result of a dependency is an expression”

Question

I\'m trying to create an Angular 6 library and use it in an Angular 6 app. I\'ve boiled it down to a minimal test case. (Update: since Angular 7 is out, I\'ve tried that as

Answer 1

This error comes out when a JS dependency is expressed using an expression rather than a fixed string - for example, require('horse' + variable) or require(function() { return 'horse'+variable }). It is likely that something being imported by your WidgetsModule is importing a library that is doing that form of a require.

Webpack complains about this because it means it has to include all of the files in a folder, rather than being able to statically analyse what files to include. It will still work, but according to the discussion on this Webpack issue it should not be ignored and the dependency in question should be refactored.

I came across this error when in the process of upgrading Angular from v5 to v6 on a project recently, and if I recall correctly, it went away once I upgraded all the other dependencies as well to their latest versions - I can't say which dependency was causing the problem though, and unfortunately I did not commit between seeing the error and fixing it so I can't analyse what exact change addressed the error.

It does seem that many people are having similar issues though - see for example https://github.com/angular/angular/issues/20357

To clear the warning (without fixing the underlying problem), you would follow this process, adding:

plugins: [
    // Workaround for Critical dependency 
    // The request of a dependency is an expression in ./node_modules/@angular/core/fesm5/core.js
    new webpack.ContextReplacementPlugin(
        /\@angular(\\|\/)core(\\|\/)fesm5/,
        helpers.root('./src'),
        {}
    )
]

... to the webpack configuration. However, in the latest Angular CLI, you cannot manually edit the webpack configuration (the old ng eject command which used to allow this has been removed), so I don't believe you can fix the warning at this time.

All of which concludes that you would need the authors of either the Angular CLI to mask this error through the generated webpack configuration it uses internally, or the authors of Angular to change the way the core.js does its imports.