Ionic-framework: Ionic 3 and Webpack 2 warning

[ghaiat]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.0

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
Since i ve upgraded to ionic 3, i get this error in my webpack build:

WARNING in /xxx/app/~/ionic-angular/util/ng-module-loader.js
54:11-36 Critical dependency: the request of a dependency is an expression
    at ImportContextDependency.getWarnings (/xxx/app/node_modules/webpack/lib/dependencies/ImportContextDependency.js:28:4)
    at Compilation.reportDependencyErrorsAndWarnings (/xxx/app/node_modules/webpack/lib/Compilation.js:668:24)
    at Compilation.finish (/xxx/app/node_modules/webpack/lib/Compilation.js:531:9)
    at /xxx/app/node_modules/webpack/lib/Compiler.js:486:16
    at /xxx/app/node_modules/tapable/lib/Tapable.js:225:11
    at _addModuleChain (/xxx/app/node_modules/webpack/lib/Compilation.js:477:11)
    at processModuleDependencies.err (/xxx/app/node_modules/webpack/lib/Compilation.js:448:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Any idea why ?

Cheers

[jgw96]

Hello! Thanks for opening an issue with us! As this seems like more of a support question i will urge that you ask this question on our forum or on our slack channel. Thanks for using Ionic!

[marcoturi]

I run to the same issue updating ionic2-boilerplate to ionic 3 during unit testing command. It looks similar to those issues
https://github.com/angular/angular/issues/11580
https://github.com/webpack/webpack/issues/196

I got:

WARNING in ./~/ionic-angular/util/ng-module-loader.js
54:11-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ionic-angular/util/ng-module-loader.js
69:11-36 Critical dependency: the request of a dependency is an expression

@ghaiat Did you managed to resolve this issue ? Also could you provide a little more context about it?

[marcoturi]

For anyone having this issue, the fix is to add in you webpack configuration:

 new ContextReplacementPlugin(
                /ionic-angular/,
                path.resolve('./src'),
                {}
            ),

[cryo243]

And together with angular 4 warnings it becomes
new ContextReplacementPlugin( /(ionic-angular)|(angular(\\|\/)core(\\|\/)@angular)/, path.resolve('./src') , {} )

[maapteh]

Why is this issue closed? Since version 3 i also get these warnings

WARNING in ./~/ionic-angular/util/ng-module-loader.js
54:11-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ionic-angular/util/ng-module-loader.js
69:11-36 Critical dependency: the request of a dependency is an expression

which basically says there is a dynamic import and dynamic imports should not be used.

Since im using angular/cli and not ionic/cli (i only like the framework for build i simply use cordova and angular cli running ng build --prod --base-href ./ --output-path www --output-hashing=none) . Can this issue be fixed on library side?

[schacki]

@maapteh : https://github.com/angular/angular.io/issues/3514

[shanehughes3]

I'm getting this error when running karma/jasmine tests, and I don't have a webpack conf where I can add the aforementioned fix. The folks over at webpack seem to imply that this is an issue that shouldn't be suppressed, so shouldn't we be talking about a library fix?

[kamok]

@jgw96 Can you please reopen? I'm getting the same issue as @shanehughes3. I also don't have a webpack config and I have the problem when running karma/jasmine tests. This surfaced after upgrading to ionic 3.1.1

[cryo243]

I know this is not a final fix but both of you guys could have a different webpack config for your tests and implement the fix above(just so you can get rid of the warnings until ionic fixes it)' One issue is related to angular 4 the other one is from ionic native

[kamok]

@cryo243 I can't find a webpack config in my app. I don't know where it is. Is it in the node_modules/angular folder?

[cryo243]

@kamok if you are using karma/webpack to run your unit tests you should have created a webpack config.
in your karma.conf file you should have a webpack property that points to your custom webpack test file

[kamok]

@cryo243 I use angular/cli. Same set up as this seeder project: https://github.com/lathonez/clicker

[cryo243]

@kamok , that's because you are using angular cli together with karma. Angular cli uses webpack in the background but I'm not sure to what extent you can customize their Webpack config.
Rather use your own webpack config for unit tests and pass it to your karma.conf (you will need to install karma-webpack plugin though)
then in your karma.conf file replace
angularCli: { environment: 'dev' },
with
webpack: path/to/TestWebpackConfig,

[russcarver]

Can someone post the contents of just what such a "test" webpack config should look like?

[tinomen]

I get this warning twice. Is the current solution still to suppress them?

[jdnichollsc]

@jgw96 Any news guys? thanks in advance, it's really neccesary without eject the webpack configuration of angular to fix the issue! 👍

WARNING in ./~/ionic-angular/util/ng-module-loader.js
54:11-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ionic-angular/util/ng-module-loader.js
69:11-36 Critical dependency: the request of a dependency is an expression

[cryo243]

Hi guys,
I thought I would create very basic example feel free to check https://github.com/cryo243/ionic-unit-tests

[jdnichollsc]

@jgw96 Justin, please reopen this issue. it's generated from the library because this is an incompatibility with the "ng serve" of the angular-cli.
Thanks guys in advance! ✌️

[jdnichollsc]

@jgw96 @mlynch Any news about this item? it's very complicated? Any response from the Ionic team is really appreciated 🙏 (this would be like a Christmas gift)

[jdnichollsc]

Hi @danbucholtz, Is possible to create a new release of Ionic with the fix of the default webpack configuration with the following fix? https://github.com/ionic-team/ionic-unit-testing-example/pull/34/files
Thanks in advance guys!

[jdnichollsc]

Guys, what do you think about the following PR? https://github.com/ionic-team/ionic-app-scripts/pull/1360

[damsorian]

this issue is not resolved ...

[jdnichollsc]

@damsorian I'm waiting for Ionic 4 due to this issue...

[edwinm]

July 2nd 2018 and still not resolved...

WARNING in ./node_modules/ionic-angular/es2015/util/ng-module-loader.js
25:11-36 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/ionic-angular/es2015/util/ng-module-loader.js
 @ ./node_modules/ionic-angular/es2015/util/module-loader.js
 @ ./node_modules/ionic-angular/es2015/components/modal/modal-component.js
 @ ./node_modules/ionic-angular/es2015/index.js
 @ ./src/test.ts

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.