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
angular/angular#11580
webpack/webpack#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 : angular/angular.io#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,