Webpacker: WARNING in ./node_modules/@angular/core/esm5/core.js

[za4emnik]

Hello! I can't solve the problem when I start the angular with rails. I run rails new angular_todo --webpack=angular and all fine, I get a project with angular. After creation I create Procfile with code:

backend: bin/rails s -p 3000
frontend: bin/webpack-dev-server

After run foreman start and get errors:

23:11:19 frontend.1 |  10% building modules 2/2 modules 0 active                                         
23:11:19 frontend.1 | Project is running at http://localhost:3035/
23:11:19 frontend.1 | webpack output is served from /packs/
23:11:19 frontend.1 | Content not from webpack is served from /home/maxim/angular_todo/public/packs
23:11:19 frontend.1 | 404s will fallback to /index.html
Hash: 038007d5d2962753263c                                                              
23:11:43 frontend.1 | Version: webpack 3.8.1
23:11:43 frontend.1 | Time: 23612ms
23:11:43 frontend.1 |                                 Asset       Size  Chunks                    Chunk Names
23:11:43 frontend.1 | hello_angular-3ac3565e94ca47378b0c.js    7.32 MB       0  [emitted]  [big]  hello_angular
23:11:43 frontend.1 |   application-dd3d51a71e2d2ea7c8a6.js     856 kB       1  [emitted]  [big]  application
23:11:43 frontend.1 |                         manifest.json  138 bytes          [emitted]         
23:11:43 frontend.1 |   [30] (webpack)-dev-server/client?http://localhost:3035 7.95 kB {0} {1} [built]
23:11:43 frontend.1 |   [31] ./node_modules/url/url.js 23.3 kB {0} {1} [built]
23:11:43 frontend.1 |   [38] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built]
23:11:43 frontend.1 |   [40] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} {1} [built]
23:11:43 frontend.1 |   [41] (webpack)-dev-server/client/socket.js 1.05 kB {0} {1} [built]
23:11:43 frontend.1 |   [43] (webpack)-dev-server/client/overlay.js 3.73 kB {0} {1} [built]
23:11:43 frontend.1 |   [44] ./node_modules/ansi-html/index.js 4.26 kB {0} {1} [built]
23:11:43 frontend.1 |   [48] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} {1} [built]
23:11:43 frontend.1 |   [50] (webpack)/hot/emitter.js 75 bytes {0} {1} [built]
23:11:43 frontend.1 |   [92] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js 40 bytes {1} [built]
23:11:43 frontend.1 |   [93] ./app/javascript/packs/application.js 515 bytes {1} [built]
23:11:43 frontend.1 |   [94] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_angular.js 40 bytes {0} [built]
23:11:43 frontend.1 |   [95] ./app/javascript/packs/hello_angular.js 204 bytes {0} [built]
23:11:43 frontend.1 |   [96] ./app/javascript/hello_angular/index.ts 268 bytes {0} [built]
23:11:43 frontend.1 |  [179] ./app/javascript/hello_angular/app/app.module.ts 1.13 kB {0} [built]
23:11:43 frontend.1 |     + 166 hidden modules
23:11:43 frontend.1 | 
23:11:43 frontend.1 | WARNING in ./node_modules/@angular/core/esm5/core.js
23:11:43 frontend.1 | 6438:15-36 Critical dependency: the request of a dependency is an expression
23:11:43 frontend.1 |     at ImportLazyContextDependency.getWarnings (/home/maxim/angular_todo/node_modules/webpack/lib/dependencies/ContextDependency.js:39:18)
23:11:43 frontend.1 |     at Compilation.reportDependencyErrorsAndWarnings (/home/maxim/angular_todo/node_modules/webpack/lib/Compilation.js:703:24)
23:11:43 frontend.1 |     at Compilation.finish (/home/maxim/angular_todo/node_modules/webpack/lib/Compilation.js:561:9)
23:11:43 frontend.1 |     at applyPluginsParallel.err (/home/maxim/angular_todo/node_modules/webpack/lib/Compiler.js:506:17)
23:11:43 frontend.1 |     at /home/maxim/angular_todo/node_modules/tapable/lib/Tapable.js:289:11
23:11:43 frontend.1 |     at _addModuleChain (/home/maxim/angular_todo/node_modules/webpack/lib/Compilation.js:507:11)
23:11:43 frontend.1 |     at processModuleDependencies.err (/home/maxim/angular_todo/node_modules/webpack/lib/Compilation.js:477:14)
23:11:43 frontend.1 |     at _combinedTickCallback (internal/process/next_tick.js:131:7)
23:11:43 frontend.1 |     at process._tickCallback (internal/process/next_tick.js:180:9)
23:11:43 frontend.1 |  @ ./node_modules/@angular/core/esm5/core.js
23:11:43 frontend.1 |  @ ./app/javascript/hello_angular/app/app.module.ts
23:11:43 frontend.1 |  @ ./app/javascript/hello_angular/index.ts
23:11:43 frontend.1 |  @ ./app/javascript/packs/hello_angular.js
23:11:43 frontend.1 |  @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_angular.js
23:11:43 frontend.1 | 
23:11:43 frontend.1 | WARNING in ./node_modules/@angular/core/esm5/core.js
23:11:43 frontend.1 | 6458:15-102 Critical dependency: the request of a dependency is an expression
23:11:43 frontend.1 |     at ImportLazyContextDependency.getWarnings (/home/maxim/angular_todo/node_modules/webpack/lib/dependencies/ContextDependency.js:39:18)
23:11:43 frontend.1 |     at Compilation.reportDependencyErrorsAndWarnings (/home/maxim/angular_todo/node_modules/webpack/lib/Compilation.js:703:24)
23:11:43 frontend.1 |     at Compilation.finish (/home/maxim/angular_todo/node_modules/webpack/lib/Compilation.js:561:9)
23:11:43 frontend.1 |     at applyPluginsParallel.err (/home/maxim/angular_todo/node_modules/webpack/lib/Compiler.js:506:17)
23:11:43 frontend.1 |     at /home/maxim/angular_todo/node_modules/tapable/lib/Tapable.js:289:11
23:11:43 frontend.1 |     at _addModuleChain (/home/maxim/angular_todo/node_modules/webpack/lib/Compilation.js:507:11)
23:11:43 frontend.1 |     at processModuleDependencies.err (/home/maxim/angular_todo/node_modules/webpack/lib/Compilation.js:477:14)
23:11:43 frontend.1 |     at _combinedTickCallback (internal/process/next_tick.js:131:7)
23:11:43 frontend.1 |     at process._tickCallback (internal/process/next_tick.js:180:9)
23:11:43 frontend.1 |  @ ./node_modules/@angular/core/esm5/core.js
23:11:43 frontend.1 |  @ ./app/javascript/hello_angular/app/app.module.ts
23:11:43 frontend.1 |  @ ./app/javascript/hello_angular/index.ts
23:11:43 frontend.1 |  @ ./app/javascript/packs/hello_angular.js
23:11:43 frontend.1 |  @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_angular.js
23:11:43 frontend.1 | webpack: Compiled with warnings.

I've seen solutions like these:

new webpack.ContextReplacementPlugin(
/angular(\|/)core(\|/)@angular/,
path.resolve(__dirname, '../src')
)

but I don't understand what the '../src'? I think the problem is this.

And when I create rails with react everything is fine, no errors, it's only with angular.

rails 5.1.4

[gauravtiwari]

src sounds like source directory.

If you using latest webpacker, you could do this in config/webpack/environment.js

// environment.js
const webpack = require('webpack')
const { environment } = require('@rails/webpacker')
const config = require('@rails/webpacker/package/config')
const { resolve } = require('path')
// or just this if you are using master
// const { config } = require('@rails/webpacker')

environment.plugins.set('ContextReplacement',
  new webpack.ContextReplacementPlugin(
    /angular(\|/)core(\|/)@angular/,
    resolve(config.source_path) // or resolve(config.source_path, config.source_entry_path)
  )
)

[za4emnik]

Thanks for a quick response
If I used this regexp /angular(\|/)core(\|/)@angular/ I got SyntaxError: missing ) after argument list.
I changed this regexp to /angular(\\|\/)core(\\|\/)@angular/ and error was gone.
But the main error still remains WARNING in ./node_modules/@angular/core/esm5/core.js

[za4emnik]

Resolved issue. I just replaced regexp /angular(\|/)core(\|/)@angular/ to /angular(\\|\/)core(\\|\/)(@angular|esm5)/.

[gauravtiwari]

Great 👍

[irejwanul]

This is the solution working perfectly for me for Angular 4.0+ and 5.0+.
Please, replace 'esm5' with 'es5', if you got
./node_modules/@angular/core/@angular/core.es5.js

is an expression error.
new webpack.ContextReplacementPlugin(new RegExp(/\@angular(\\|\/)core(\\|\/)(\@angular|esm5)/), path.resolve(__dirname, './ClientApp') ),
[Not: This is only required in webpack.vendor.config.js]