search

jhipster / generator-jhipster

JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.
https://www.jhipster.tech
Apache License 2.0
21.48k stars 4.02k forks source link

[Feature] Webpack Migration of ng2 #4392

Closed sendilkumarn closed 7 years ago

sendilkumarn commented 7 years ago

The discussion started from here

Migrating System Js into Webpack, to align more towards angular-cli.

cc @deepu105 @mraible @TheLarkInn

TODO:

TheLarkInn commented 7 years ago

Some things I think worth asking that I'll leave here:

sendilkumarn commented 7 years ago

Do you want to have the webpack configuration (whether it be in a JS file with the node api, or webpack.config.js) to the user?

IMO, I think we have to give that to users, the decision is upto them to use what. We can give an optimum solution but it is upto them to play around.

If this replaces gulp, then the defacto method of running scripts would be through npm scripts or node scripts. Thoughts?

Yes of course, with ng2 we are planning to remove bower completely. so npm will be defacto

deepu105 commented 7 years ago

@TheLarkInn regarding your questions

  1. I guess since we are not that familiar with webpack, I would prefer if you could suggest a default for the config
  2. If webpack has some mechanism to do everything we do currently (live reload, browsersync, sass, uglify, minify, inject, sourcemaps, css minify and uglify, image optimizations etc) then yes we will like to use that but if any of this requires a custom script which has nothing to do with webpack than I would rather use gulp for that. I'm not a fan of writing everything with NPM just for the sake of its. Its ugly
  3. I'm not sure what you have seen what we currently have for client side is just a single page app with spring MVC serving REST endpoints on serverside for both monolith and microservice architecture
  4. we only have a simple index.html file and I really dont know anything about the plugin you mentioned 😄
deepu105 commented 7 years ago

@TheLarkInn here are the questions I wanted to ask regarding webpack and also will give some insights into our architecture and limitations since its a java app @jhipster/developers please correct me if I'm wrong about anything

a) We have 2 profiles for build dev and prod which are triggered by maven/gradle b) Since we generate a maven/gradle project it needs to follow certain conventions for the frontend assets

  1. The source code needs to be in the src/main/webapp folder and we have the angular code in the app folder here along with index.html. The content folder holds static assets like css, images etc. image
  2. currently we have all the js karma and protractor tests in the test/javascript/ folder. It means the test files are not in same folder as the src like how Angular CLI does. This can be changed if required for JS tests but our users are used to this since the Java/Gatling/Cucumber tests will be in the test folder alongside src folder
  3. For the front end code to be served while running the java app it needs to be served from target|build/www folder and all assets including js, css, html, images needs to be here. Thats why currently we use a gulp task to copy the required node_modules folders to the www/vendor folder. I dont know if there is a way to do this without copying all the node modules here image

c) Currently we have ts source in src/main/webapp/app and we compile this to js into the target|build/www/app folder with sourcemaps. we would like to keep the src clean without compiled js/sourcemaps there

d) during development we use gulp serve task to run a browsersync instance with live reload along with gulp watch. Here we do tasks like clean target/www, copy node_module plugins to target/www/vendor, wiredep/inject files to index.html, create ng2 constants, copy i18n files, ts compile, some troubleshooting and finally spawn a browsersync and start a watch which compiles changed ts files, copies html into vendor folder, compiles sass on the fly etc.

e) during production build we do all the above and additionally we do tasks like optimize html files and convert them to a js map template cache, optimize image, svg files, compile sass, auto prefix, minify and uglify css with revisioning and sourcemaps, minify and uglify js into vendor.js and app.js with revisioning and sourcemaps etc. we also copy all the static assets into the www folder

f) apart from this we also trigger karma and protractor tests from gulp

Hope I covered most use cases

Now my questions

  1. what of the above are directly possible with webpack or a webpack plugin?
  2. can browsersync coexist with webpack as I understand the sync feature is not available in webpack
  3. how are the ng2 lib and plugins in node_module loaded and used? currently with systemJS i'm able to load them from the vendor folder I explained above, is the same possible with webpack?
  4. If any of the above cannot be done with webpack can the same be done via gulp? can both coexist and communicate?
  5. We would like to drop bower but untill all the bower plugins we use have an npm equivalent how can this be managed?

Sorry for such long comment

TheLarkInn commented 7 years ago

Thanks for all the questions!! I will be away from the interwebs for most of today (jury duty). So if I don't respond here right away that's why.

deepu105 commented 7 years ago

@TheLarkInn no worries take your time

deepu105 commented 7 years ago

@TheLarkInn did you find time to have a look at this?

deepu105 commented 7 years ago

@flaviencathala I have fixed some issues in the ng2-webpack branch but still there are few as below

Can you try to create a fresh app withh all default options from this branch and try it out. 

ERROR in ./src/main/webapp/content/images/logo-jhipster.png
Module build failed: Error: /home/deepu/workspace/temp/jh-webpack/node_modules/pngquant-bin/vendor/pngquant: error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory

    at Promise.all.then.arr (/home/deepu/workspace/temp/jh-webpack/node_modules/execa/index.js:170:11)
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./~/css-loader!./src/main/webapp/content/css/main.css 6:2439-2477
 @ ./src/main/webapp/content/css/main.css
 @ ./src/main/webapp/app/vendor.ts

ERROR in ./src/main/webapp/content/images/hipster2x.png
Module build failed: Error: /home/deepu/workspace/temp/jh-webpack/node_modules/pngquant-bin/vendor/pngquant: error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory

    at Promise.all.then.arr (/home/deepu/workspace/temp/jh-webpack/node_modules/execa/index.js:170:11)
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./~/css-loader!./src/main/webapp/content/css/main.css 6:3803-3837
 @ ./src/main/webapp/content/css/main.css
 @ ./src/main/webapp/app/vendor.ts

ERROR in ./src/main/webapp/content/images/hipster.png
Module build failed: Error: /home/deepu/workspace/temp/jh-webpack/node_modules/pngquant-bin/vendor/pngquant: error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory

    at Promise.all.then.arr (/home/deepu/workspace/temp/jh-webpack/node_modules/execa/index.js:170:11)
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./~/css-loader!./src/main/webapp/content/css/main.css 6:3225-3257
 @ ./src/main/webapp/content/css/main.css
 @ ./src/main/webapp/app/vendor.ts

ERROR in ./src/main/webapp/content/css/main.css
Module build failed: ModuleBuildError: Module build failed: Error: /home/deepu/workspace/temp/jh-webpack/node_modules/pngquant-bin/vendor/pngquant: error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory

    at Promise.all.then.arr (/home/deepu/workspace/temp/jh-webpack/node_modules/execa/index.js:170:11)
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at /home/deepu/workspace/temp/jh-webpack/node_modules/webpack/lib/NormalModule.js:143:35
    at /home/deepu/workspace/temp/jh-webpack/node_modules/loader-runner/lib/LoaderRunner.js:359:11
    at /home/deepu/workspace/temp/jh-webpack/node_modules/loader-runner/lib/LoaderRunner.js:225:18
    at context.callback (/home/deepu/workspace/temp/jh-webpack/node_modules/loader-runner/lib/LoaderRunner.js:106:13)
    at imagemin.buffer.then.catch.err (/home/deepu/workspace/temp/jh-webpack/node_modules/image-webpack-loader/index.js:48:9)

ERROR in /home/deepu/workspace/temp/jh-webpack/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/home/deepu/workspace/temp/jh-webpack/node_modules/style-loader/index.js!/home/deepu/workspace/temp/jh-webpack/node_modules/css-loader/index.js!/home/deepu/workspace/temp/jh-webpack/src/main/webapp/content/css/main.css doesn't export content

ERROR in [default] /home/deepu/workspace/temp/jh-webpack/src/main/webapp/app/blocks/config/localstorage.config.ts:1:9 
Module '"/home/deepu/workspace/temp/jh-webpack/node_modules/ng2-webstorage/dist/app"' has no exported member 'KeyStorageHelper'.

ERROR in [default] /home/deepu/workspace/temp/jh-webpack/src/main/webapp/app/shared/language/jhi-missing-translation.config.ts:3:13 
Class 'JhiMissingTranslationHandler' incorrectly implements interface 'MissingTranslationHandler'.
  Types of property 'handle' are incompatible.
    Type '(key: string) => string' is not assignable to type '(params: MissingTranslationHandlerParams) => any'.
      Types of parameters 'key' and 'params' are incompatible.
        Type 'MissingTranslationHandlerParams' is not assignable to type 'string'.
deepu105 commented 7 years ago

I merged the PR but i'm keeping the ticket open as we have some things to do. I'm gonna jot them down above

deepu105 commented 7 years ago

@flaviencathala can you let me know which items in TODO above can be marked as done?

deepu105 commented 7 years ago

btw really great job @flaviencathala sorry if I was bit tough :)

deepu105 commented 7 years ago

@TheLarkInn will you be able to take a look at what we done and give your inputs?

flaviencathala commented 7 years ago

@deepu105 Thank you ! :-) Except the migration to webpack nothing is 100% done yet, there is still a few ng1 code :-/ @victorADS is working on interceptors.

deepu105 commented 7 years ago

Can you mark down if there are more TODO here please

Thanks & regards, Deepu

On 30 Nov 2016 10:21 a.m., "Flavien Cathala" notifications@github.com wrote:

@deepu105 https://github.com/deepu105 Thank you ! :-) Except the migration to webpack nothing is 100% done yet, there is still a few ng1 code :-/ @victorADS https://github.com/victorADS is working on interceptors.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/4392#issuecomment-263823351, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF7j4G9SHUPDWXWSwZTx6GYld322Tks5rDUAcgaJpZM4Kh767 .

flaviencathala commented 7 years ago

@deepu105 Are you ok with this ?

wmarques commented 7 years ago

Awesome job guys, can't wait to setup my new machine to test this and help you finish it :smile:

deepu105 commented 7 years ago

@flaviencathala im still getting the same errors with images as above after your fixes as well. I think it has somthing to do with these errors during npm install

BTW im on linux

gifsicle@3.0.4 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully

> mozjpeg@4.1.1 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg
> node lib/install.js

  âš  The `/home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg/vendor/cjpeg` binary doesn't seem to work correctly
  âš  mozjpeg pre-build test failed
  ℹ compiling from source
  ✖ Error: autoreconf -fiv && ./configure --disable-shared --prefix="/home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg/vendor" --bindir="/home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg/vendor" --libdir="/home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg/vendor" && make --jobs=8 && make install --jobs=8
Command failed: autoreconf -fiv
/bin/sh: 1: autoreconf: not found

    at ChildProcess.exithandler (child_process.js:206:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:498:12)

> optipng-bin@3.1.2 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> pngquant-bin@3.1.1 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/pngquant-bin
> node lib/install.js

  âš  The `/home/deepu/workspace/temp/jh-webpack/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
  âš  pngquant pre-build test failed
  ℹ compiling from source
  ✖ Error: pngquant failed to build, make sure that libpng-dev is installed
    at ChildProcess.exithandler (child_process.js:206:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

> yo@1.8.5 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/yo
> yodoctor
deepu105 commented 7 years ago

did you forget to add any lib to package.json

dimeros commented 7 years ago

This error has been produced with the default settings to the console:

main.bundle.js:44100 EXCEPTION: Cannot read property 'Symbol(Symbol.iterator)' of undefinedErrorHandler.handleError @ main.bundle.js:44100 main.bundle.js:44105 ORIGINAL STACKTRACE:ErrorHandler.handleError @ main.bundle.js:44105 main.bundle.js:44106 TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined at Object.subscribeToResult (main.bundle.js:1319) at CatchSubscriber.error (main.bundle.js:80107) at CatchSubscriber.error (main.bundle.js:80102) at XMLHttpRequest.onLoad (main.bundle.js:46249) at ZoneDelegate.invokeTask (polyfills.bundle.js:1589) at Object.onInvokeTask (main.bundle.js:29109) at ZoneDelegate.invokeTask (polyfills.bundle.js:1588) at Zone.runTask (polyfills.bundle.js:1478) at XMLHttpRequest.ZoneTask.invoke (polyfills.bundle.js:1659)ErrorHandler.handleError @ main.bundle.js:44106 main.bundle.js:519 Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined(…)

flaviencathala commented 7 years ago

@deepu105 No I don't think I forgot a lib, I use image-webpack-loader and it is supposed to install all the dependencies needed itself. This is the first time I hear about this problem.

deepu105 commented 7 years ago

Did you try a fresh project with node_modules installed from scratch?

Thanks & Regards, Deepu

On Wed, Nov 30, 2016 at 2:12 PM, Flavien Cathala notifications@github.com wrote:

@deepu105 https://github.com/deepu105 No I don't think I forgot a lib, I use image-webpack-loader and it is supposed to install all the dependencies needed itself. This is the first time I hear about this problem.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/4392#issuecomment-263869988, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF0cOnNmlmv570aQ0WG4S5LMSqWA6ks5rDXZUgaJpZM4Kh767 .

flaviencathala commented 7 years ago

@deepu105 Yes I always work this way. A lot of people already tried to clone JHipster from my webpack branch and they never had this problem. As you can see @dimeros don't have it either.

dimeros commented 7 years ago

I am running this scenario on windows. Maybe it is a linux issue.

flaviencathala commented 7 years ago

@dimeros I and @victorADS are on Ubuntu, @jdubois is on MacOS... :-/

flaviencathala commented 7 years ago

@dimeros I fixed the critical bug you had.

deepu105 commented 7 years ago

@flaviencathala @victorADS I'm on ubuntu as well and its defineteley an issue coz of below fails during npm install are you using npm or yarn? im using npm. I'll try with yarn as well

May be you already have the mozjpeg and pngquant binaries compiled in your system

gifsicle@3.0.4 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully

> mozjpeg@4.1.1 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg
> node lib/install.js

  âš  The `/home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg/vendor/cjpeg` binary doesn't seem to work correctly
  âš  mozjpeg pre-build test failed
  ℹ compiling from source
  ✖ Error: autoreconf -fiv && ./configure --disable-shared --prefix="/home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg/vendor" --bindir="/home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg/vendor" --libdir="/home/deepu/workspace/temp/jh-webpack/node_modules/mozjpeg/vendor" && make --jobs=8 && make install --jobs=8
Command failed: autoreconf -fiv
/bin/sh: 1: autoreconf: not found

    at ChildProcess.exithandler (child_process.js:206:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:498:12)

> optipng-bin@3.1.2 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> pngquant-bin@3.1.1 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/pngquant-bin
> node lib/install.js

  âš  The `/home/deepu/workspace/temp/jh-webpack/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
  âš  pngquant pre-build test failed
  ℹ compiling from source
  ✖ Error: pngquant failed to build, make sure that libpng-dev is installed
    at ChildProcess.exithandler (child_process.js:206:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

> yo@1.8.5 postinstall /home/deepu/workspace/temp/jh-webpack/node_modules/yo
> yodoctor
deepu105 commented 7 years ago

Ok seems like an issue with libpng12-0 used by those library. I tried to install with sudo apt-get install libpng12-0 but it says no such release candidate. I'm on Ubuntu 16.10

flaviencathala commented 7 years ago

@deepu105 We use npm. I'm not saying there is no issue I'm saying I can't reproduce it and I have no idea from where it could come. I tried to run mozjpeg and pngquant but the system don't know these commands.

deepu105 commented 7 years ago

I know its strange

deepu105 commented 7 years ago

may be we can disable imagemin untill we find the source of the issue and add it to our TODO

flaviencathala commented 7 years ago

Ok try to remove this part ?bypassOnDebug&optimizationLevel=7&interlaced=false in webpack.common.js line 69. Or remove the entire line.

flaviencathala commented 7 years ago

@deepu105 I will not be available until Monday, if you have any trouble try to see with @victorADS.

deepu105 commented 7 years ago

Ok I got the issue solved by installing libpng-dev sudo apt-get install libpng-dev in ubuntu I think we need to document this incase anyone else runs into the same

mraible commented 7 years ago

I just created a new project with the angular-2 branch and there's no information on how to run it. 

└── UNMET PEER DEPENDENCY zone.js@0.7.2

npm WARN @angular/http@2.2.3 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN @angular/core@2.2.3 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN @angular/core@2.2.3 requires a peer of zone.js@^0.6.21 but none was installed.
npm WARN string-replace-webpack-plugin@0.0.4 requires a peer of webpack@^1.4.2 but none was installed.

Server app generated successfully.

Client app generated successfully.

I assumed you could run webpack, but that doesn't work. Shouldn't we make this as simple as possible so user's familiar with webpack can run webpack or webpack -w?

[mraible:~/blog] 28m55s $ webpack
No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
Use --help to display the CLI options.

After looking at package.json, I figured out I needed to run npm run webpack-dev, which is a lot compared to simply gulp.

deepu105 commented 7 years ago

yes we should show more info. I guess we can print the info on how to start webpack-dev or we can just autostart it after npm install

dimeros commented 7 years ago

I have installed maven. Executing mvn is installed automatically.

deepu105 commented 7 years ago

@dimeros what do you mean?

deepu105 commented 7 years ago

@wmarques @sendilkumarn @jdubois we need more hands testing this

dimeros commented 7 years ago

Executing the mvn command, the 'npm run webpack-dev' is executed automatically.

deepu105 commented 7 years ago

Yes but it doesnt launch a watch server I guess. You still need to run the command to start a watch server dont you?

Thanks & Regards, Deepu

On Wed, Nov 30, 2016 at 5:54 PM, dimeros notifications@github.com wrote:

Executing the mvn command 'npm run webpack-dev' is executed automatically.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/4392#issuecomment-263928285, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlFwxmeoA8ekpCGZagFkunnvMqgrUEks5rDapPgaJpZM4Kh767 .

dimeros commented 7 years ago

Yes you are right. I need to start it manually.

mraible commented 7 years ago

Does anyone know of a Karma + webpack 2 example? All the webpack + karma projects I can find use webpack v1.

mraible commented 7 years ago

Here's one that looks like it might work: https://github.com/AngularClass/angular2-webpack-starter

wmarques commented 7 years ago

@deepu105 I'll try this on the weekend

flaviencathala commented 7 years ago

@sendilkumarn All the following points are done:

deepu105 commented 7 years ago

@flaviencathala but i dont see anything for error notifications? did i miss anything?

flaviencathala commented 7 years ago

@deepu105 Webpack print errors when it build, I thought you were talking about that.

deepu105 commented 7 years ago

Nope I was talking about the gulp plugin which shows desktop notifications. its not important though just cool to have :)

Thanks & Regards, Deepu

On Mon, Dec 12, 2016 at 4:58 PM, Flavien Cathala notifications@github.com wrote:

@deepu105 https://github.com/deepu105 Webpack print errors when it build, I thought you were talking about that.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/4392#issuecomment-266468369, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF_cvSu6u7I_O8xI5FZdrY9MpwcHeks5rHW8ggaJpZM4Kh767 .

deepu105 commented 7 years ago

closing this and moving todo items to #4794