Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webpack AOT build fails #451

Closed
HarlesPilter opened this issue Jun 16, 2017 · 15 comments
Closed

Webpack AOT build fails #451

HarlesPilter opened this issue Jun 16, 2017 · 15 comments

Comments

@HarlesPilter
Copy link

HarlesPilter commented Jun 16, 2017 •
edited

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
Copy link
Owner

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

@HarlesPilter
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Owner

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
Copy link
Contributor

dbusacca commented Jul 7, 2017

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
Copy link

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 :
image

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

@Gbuomprisco Any news regarding this issue?

@Gbuomprisco
Copy link
Owner

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

@xtianus79
Copy link

xtianus79 commented Aug 30, 2017 •
edited

@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
Copy link

@Gbuomprisco checkout out this issue

angular/angular-cli#4551

and here

angular/angular-cli#7125 (comment)

@xtianus79 xtianus79 mentioned this issue Aug 30, 2017
Closed
@mattlewis92 mattlewis92 mentioned this issue Aug 31, 2017
Closed
@olezt
Copy link

olezt commented Nov 8, 2017 •
edited

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

@unbeatableDeepak
Copy link

@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
Copy link

olezt commented Nov 16, 2017

@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
Copy link

@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
Copy link

olezt commented Nov 16, 2017 •
edited

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@kadosh1000 @Gbuomprisco @dbusacca @xtianus79 @olezt @unbeatableDeepak @HarlesPilter