Ngx-chips: Webpack AOT build fails

[HarlesPilter]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request/question

Current behavior

AOT build fails in prod. In local with just regular webpack it runs fine.
Include "import {TagInputModule} from 'ng2-tag-input';" in module and AOT fails with a not very informative
17% building modules 61/62 modules 1 active ...rise\front\static\scss\bootstrap.scssModuleNotFoundError: Module not found: Error: Can't resolve './../aot/app/app.module.ngfactory'
Without the TagInputModule import it builds fine.

17% building modules 61/62 modules 1 active ...rise\front\static\scss\bootstrap.scssModuleNotFoundError: Module not found: Error: Can't resolve './../aot/app/app.module.ngfactory' in 'C:\Users\Harles\Documents\Projects\vitarise\front\app'
at factoryCallback (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\webpack\lib\Compilation.js:260:39)
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\webpack\lib\NormalModuleFactory.js:243:19
at onDoneResolving (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\webpack\lib\NormalModuleFactory.js:59:20)
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\webpack\lib\NormalModuleFactory.js:132:20
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\async\dist\async.js:3694:9
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\async\dist\async.js:356:16
at iteratorCallback (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\async\dist\async.js:934:13)
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\async\dist\async.js:840:16
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\async\dist\async.js:3691:13
at apply (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\async\dist\async.js:21:25)
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\async\dist\async.js:56:12
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\webpack\lib\NormalModuleFactory.js:124:22
at onResolved (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\Resolver.js:70:11)
at loggingCallbackWrapper (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at afterInnerCallback (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\Resolver.js:138:10)
at loggingCallbackWrapper (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at Resolver.applyPluginsAsyncSeriesBailResult1 (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\tapable\lib\Tapable.js:181:46)
at innerCallback (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\Resolver.js:125:19)
at loggingCallbackWrapper (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\tapable\lib\Tapable.js:283:15
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:38:4
at loggingCallbackWrapper (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at afterInnerCallback (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\Resolver.js:138:10)
at loggingCallbackWrapper (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at Resolver.applyPluginsAsyncSeriesBailResult1 (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\tapable\lib\Tapable.js:181:46)
at innerCallback (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\Resolver.js:125:19)
at loggingCallbackWrapper (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\tapable\lib\Tapable.js:283:15
at innerCallback (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\Resolver.js:123:11)
at loggingCallbackWrapper (C:\Users\Harles\Documents\Projects\vitarise\front\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
resolve './../aot/app/app.module.ngfactory' in 'C:\Users\Harles\Documents\Projects\vitarise\front\app'
using description file: C:\Users\Harles\Documents\Projects\vitarise\front\package.json (relative path: ./app)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\Users\Harles\Documents\Projects\vitarise\front\package.json (relative path: ./app)
using description file: C:\Users\Harles\Documents\Projects\vitarise\front\package.json (relative path: ./aot/app/app.module.ngfactory)
as directory
C:\Users\Harles\Documents\Projects\vitarise\front\aot\app\app.module.ngfactory doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Harles\Documents\Projects\vitarise\front\aot\app\app.module.ngfactory doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Harles\Documents\Projects\vitarise\front\aot\app\app.module.ngfactory.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Harles\Documents\Projects\vitarise\front\aot\app\app.module.ngfactory.js doesn't exist
.html
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Harles\Documents\Projects\vitarise\front\aot\app\app.module.ngfactory.html doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Harles\Documents\Projects\vitarise\front\aot\app\app.module.ngfactory.css doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Harles\Documents\Projects\vitarise\front\aot\app\app.module.ngfactory.scss doesn't exist

Expected behavior

AOT build runs without errors

Minimal reproduction of the problem with instructions (if applicable)

What is the motivation / use case for changing the behavior? (if applicable)

What do you use to build your app? (SystemJS, Webpack, angular-cli, etc.). Please specify the version

Webpack and
Webpack AOT

Angular version:

Angular 4.2.2
Webpack 2.3.3
@ngtools/webpack 1.4.1

ng2-tag-input version:

ng-tag-input 1.3.3

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

all

[Gbuomprisco]

Strange, this version fixed all AOT issues. Can you remove TagInputModule and try if AOT works without it?

[HarlesPilter]

Removing TagInputModule and the component itself makes the AOT build run fine. Sorry that I can't provide a more informative stracktrace as @ngtools/webpack doesn't do a very good job at it.

[HarlesPilter]

It seems that the issue is soley with ng2-tag-input and @ngtools/webpack AOT build plugin. When I tested the project on simple angular cli AOT, then it worked just fine.

[dbusacca]

Maybe is an scss compilation problem. I've got A LOT of problem to figure out how to make it work with @ngtools/webpack and I've resolved with the following webpack loaders configuration:

{
    // the module's CSS/SCSS files MUST be inlined using the raw-loader
    test: /\.scss$/,
    include: [/node_modules/],
    use: ['raw-loader', 'css-loader', 'sass-loader']
},
{
    // our project scss files extracted with extract-text-webpack-plugin
    test: /\.scss$/,
    exclude: [/node_modules/],
    use: ExtractTextPlugin.extract({
        use: ['css-loader', 'sass-loader'],
        fallback: "style-loader"
    })
},

[Gbuomprisco]

Well, the scss is compiled and distributed through the bundle, so it's really odd that it was the cause in the 1st place, unless some weirdness was going on

[dbusacca]

My webpack configuration for modules including scss wasn't correct but it was difficut to find out the problem because the sass-loader simply hang without an error

[kadosh1000]

I am facing the same issue. It works great without AOT. when I compile it using AOT it seems that the css is not loading correctly or at all :

@dbusacca I have tried adding the loaders you've specified but the result hasn't changed.

@Gbuomprisco Any news regarding this issue?

[Gbuomprisco]

It's not something I've been able to reproduce

[xtianus79]

@Gbuomprisco I am having this issue too...

Are you using ngtools/webpack or are you using angular-cli...there is an incompaitibility issue with a dependency they have used and it is creeping up again.

here is the error I get

    ERROR in ./node_modules/ngx-chips/dist/modules/components/tag-input/tag-input.style.scss
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
        at Object.pitch (/Users/xxx/xxx/xxx/frontend/node_modules/extract-text-webpack-plugin/dist/loader.js:53:11)
Child node_modules/ngx-chips/dist/modules/components/icon/icon.scss:
     1 asset
       1 module

    ERROR in ./node_modules/ngx-chips/dist/modules/components/icon/icon.scss
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
        at Object.pitch (/Users/xxx/xxx/xxxx/frontend/node_modules/extract-text-webpack-plugin/dist/loader.js:53:11)
Child node_modules/ngx-chips/dist/modules/components/tag-input-form/tag-input-form.style.scss:
     1 asset
       1 module

    ERROR in ./node_modules/ngx-chips/dist/modules/components/tag-input-form/tag-input-form.style.scss
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
        at Object.pitch (/Users/xxx/Repos/xxx/frontend/node_modules/extract-text-webpack-plugin/dist/loader.js:53:11)
Child node_modules/ngx-chips/dist/modules/components/tag/tag-component.style.scss:
     1 asset
       1 module

    ERROR in ./node_modules/ngx-chips/dist/modules/components/tag/tag-component.style.scss
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
        at Object.pitch (/Users/xxx/Repos/xxx/frontend/node_modules/extract-text-webpack-plugin/dist/loader.js:53:11)
Child node_modules/ng2-material-dropdown/dist/src/modules/components/menu-item/style.scss:

[xtianus79]

@Gbuomprisco checkout out this issue

https://github.com/angular/angular-cli/issues/4551

and here

https://github.com/angular/angular-cli/issues/7125#issuecomment-317683022

[olezt]

Still not working. Exactly same as @kadosh1000
Did you find a solution on this?

[unbeatableDeepak]

@Gbuomprisco I'm having the same problem getting this error

ERROR in ./node_modules/ngx-chips/dist/modules/components/tag-input/tag-input.style.scss Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example at Object.pitch (/Users/xxx/xxx/xxx/frontend/node_modules/extract-text-webpack-plugin/dist/loader.js:53:11) Child node_modules/ngx-chips/dist/modules/components/icon/icon.scss: 1 asset 1 module

Did you find any solution for this?

[olezt]

@unbeatableDeepak I guess you use the plugin somehow to load the scss.
What worked for me without the plugin: stackOverflow answer

Add these loaders for the scss files of the ngx-chips.
You may also install explicitly node-sass if it's not installed automatically with the sass-loader.

```
{
test: /.scss$/,
use: [
'raw-loader',
'sass-loader'
]
}
````

Otherwise check this this extract-text-webpack-plugin issue or similar.

[unbeatableDeepak]

@olezt Thanks for the reply, I've tried without plugin but it gives this error:

Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

[olezt]

@unbeatableDeepak For your case you may need to also add css-loader between the two loaders I suggested as mentioned in this sass-loader issue. You may import also other kind of files that need to be compiled such as less, check your node modules.