lbialy/play-ng2-webpack2

Play 2.6.0 + Angular with Angular-CLI + SBT - based build

play-ng2-webpack2's Issues

Running on Windows 10?

Hello,

I have 2 problems. I'm running on Windows 10. I have been about to get other templates working on play.

1. I'm hitting what I think is a very basic issue. If I try activator run then it fails with:
   java.io.IOException: Cannot run program "npm" (in directory "C:\devsrc\play\play-ng2-webpack2-master\ui"): CreateProcess error=2, The system cannot find the file specified

Yes I do have npm installed and it is in my path.

1. If I use the activator ui, then I can get it to compile and run but I can't get it to load in the browser. The page just loads "Loading..." and these errors from the browser:
   Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:9000/assets/app.js
   Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:9000/assets/vendor.js

Any thoughts?

Thanks, Chris.

Runnnig tests

I get the following error while running sbt test

>sbt test
Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=256m; support was removed in 8.0
[info] Loading project definition from C:\Users\guest-hkir\Documents\play-ng2-webpack2\project
[info] Set current project to play-ng (in build file:/C:/Users/guest-hkir/Documents/play-ng2-webpack2/)

> [email protected] build C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui
> ng build --extract-css --progress --output-path ../public/ui

Hash: dc9e1cd4ceb875d9788f
Time: 7356ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 232 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 4.89 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.css, styles.bundle.css.map (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.39 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

> [email protected] test-no-watch C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui
> ng test --single-run

 10% building modules 1/1 modules 0 active06 06 2017 10:55:19.253:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
06 06 2017 10:55:19.255:INFO [launcher]: Launching browser Chrome with unlimited concurrency
06 06 2017 10:55:19.260:INFO [launcher]: Starting browser Chrome
06 06 2017 10:55:24.949:ERROR [karma]: Error: C:/Users/guest-hkir/Documents/play-ng2-webpack2/ui/node_modules/@angular/core/src/testability/testability.d.ts (41,33): Cannot find name 'Node'.
    at Compiler.compiler.plugin (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\@angular\cli\plugins\karma-webpack-throw-error.js:10:23)
    at Compiler.applyPlugins (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\tapable\lib\Tapable.js:61:14)
    at Watching._done (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\webpack\lib\Compiler.js:92:17)
    at onCompiled (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\webpack\lib\Compiler.js:51:17)
    at C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\webpack\lib\Compiler.js:494:13
    at next (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\tapable\lib\Tapable.js:138:11)
    at Compiler.<anonymous> (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\webpack\lib\CachePlugin.js:62:5)
    at Compiler.applyPluginsAsyncSeries (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\tapable\lib\Tapable.js:142:13)
    at C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\webpack\lib\Compiler.js:491:10
    at Compilation.applyPluginsAsyncSeries (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\tapable\lib\Tapable.js:131:46)
    at self.applyPluginsAsync.err (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\webpack\lib\Compilation.js:645:19)
    at next (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\tapable\lib\Tapable.js:138:11)
    at Compilation.compilation.plugin (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\webpack\lib\ProgressPlugin.js:121:6)
    at Compilation.applyPluginsAsyncSeries (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\tapable\lib\Tapable.js:142:13)
    at self.applyPluginsAsync.err (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\webpack\lib\Compilation.js:636:11)
    at next (C:\Users\guest-hkir\Documents\play-ng2-webpack2\ui\node_modules\tapable\lib\Tapable.js:138:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test-no-watch: `ng test --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test-no-watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\guest-hkir\AppData\Roaming\npm-cache\_logs\2017-06-06T08_55_25_386Z-debug.log
java.lang.Exception: UI tests failed!
        at $8bcc161bf26d71a48f28$$anonfun$$sbtdef$1.apply(C:\Users\guest-hkir\Documents\play-ng2-webpack2\build.sbt:69)
        at $8bcc161bf26d71a48f28$$anonfun$$sbtdef$1.apply(C:\Users\guest-hkir\Documents\play-ng2-webpack2\build.sbt:67)
        at scala.Function1$$anonfun$compose$1.apply(Function1.scala:47)
        at sbt.$tilde$greater$$anonfun$$u2219$1.apply(TypeFunctions.scala:40)
        at sbt.std.Transform$$anon$4.work(System.scala:63)
        at sbt.Execute$$anonfun$submit$1$$anonfun$apply$1.apply(Execute.scala:228)
        at sbt.Execute$$anonfun$submit$1$$anonfun$apply$1.apply(Execute.scala:228)
        at sbt.ErrorHandling$.wideConvert(ErrorHandling.scala:17)
        at sbt.Execute.work(Execute.scala:237)
        at sbt.Execute$$anonfun$submit$1.apply(Execute.scala:228)
        at sbt.Execute$$anonfun$submit$1.apply(Execute.scala:228)
        at sbt.ConcurrentRestrictions$$anon$4$$anonfun$1.apply(ConcurrentRestrictions.scala:159)
        at sbt.CompletionService$$anon$2.call(CompletionService.scala:28)
        at java.util.concurrent.FutureTask.run(FutureTask.java:266)
        at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
        at java.util.concurrent.FutureTask.run(FutureTask.java:266)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
        at java.lang.Thread.run(Thread.java:745)
[error] (*:Run UI tests when testing application.) java.lang.Exception: UI tests failed!

Should note this is happening on both Windows and OSX. Any clues?

normalize_file_names.sh not found

When npm install is run the following error is encountered.

Error

chmod: cannot access 'normalize_file_names.sh': No such file or directory

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! Linux 4.4.0-64-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: `chmod +x normalize_file_names.sh`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script 'chmod +x normalize_file_names.sh'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     chmod +x normalize_file_names.sh
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ui
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/diederik/Documents/easycrypto/temp/angular2play/ui/npm-debug.log

normalize_file_names.sh cannot be found.

Reason

This is due to the fact that in the last commit the file was deleted, since it was not needed anymore. See: 454fed7

Possible Fix

Delete "postinstall": "chmod +x normalize_file_names.sh" from package.json

Update to recent Angular Versions

Hi,

Can you please update the readme to validate if the angular-cli gotcha's are still valid? Is it possible to update the Angular version to recent version now

Thanks

Updates

Hey guys, I've been tracking progress being made in Angular 2, angular-cli and Webpack 2 communities in some of my free time, because of few things I'd like to incorporate into this seed:

• Ahead of time (AoT) compilation of components - this should be handled by build pipeline too, but it's mutually exclusive with usage of any css preprocessors like the sass loader for angular templates I've been using. Last time I checked AoT compiler was unable to include other apps into it's compilation step and work on Webpack2 loader that would process AoT-compiled components or wrap AoT compilation and handle preprocessing of stylesheets before AoT was in very early stages.
• Angular-cli + Webpack 2 integration is going forward and that's pretty nice. I am looking for a way to integrate play's SBT build to allow for cli commands that would be:
  a) executing Play as real backend for Angular2 app in development
  b) running webpack2 server that could mock backend with mock services
  Of course current state that allows for integration testing with ng2 app being tested with protractor using real Play backend has to stay. In my opinion such integration would allow for very nice and developer experience.
• Webpack 2 is currently struggling with tree-shaking for typescript-generated code. This is actually a pretty big deal for a build system - I want to do whatever I can to provide a sensible platform for production builds and current sizes of generated packages, even after minification and gzip, are not satisfying. I even looked at the possibility of replacing webpack2 with rollup in regards of tree-shaking, but that would brake a lot of stuff and would cost a lot of time to get right (only to have to scrap it all down when rollup changes things).
• And last but not least: Server-side rendering for Angular 2. I'm deeply interested in integration of Angular-Universal-compatible SSR library with this seed. This is not a priority, more of a long-term target. As far as I've been able to tell there were some attempts at doing this with embedded V8 in Java, so it's not completely impossible. I might steal borrow some code from those attempts, wrap them in some nice async scala interface and release that as a separate jar available optionally for this seed.

I'd like to update this seed before the new year with:

• current ng-cli, angular2 and webpack2 versions
• cli+sbt integration with option of running dev with mocked or play backend
• got a Mac, Linux and Windows now, so I'll make this seed work on all platforms

Tree-shaking, AoT and SSR will have to wait for upstream I'm afraid. I'll have some free time between Christmas and New Year's Eve and I'm scheduling some time for this then.

Cheers!

Integrating play-ng2-webpack2 with ionic3

Hi ,
I am using your template since a while. It fits our requirements. But for mobile development I need to use ionic3 with angular.I have updated angular version to 4.4.4. Because ionic3 needs to have angular version of >4.0.0. But I am unable to integrate ionic3 to the existing project. Can you show me a way of using ionic3 with pla-ng2-webpack2 template.
Thanks in advance.

Error during ng build: ENOTEMPTY "...\public\ui\"

I get the following error when I start the application (Windows 10 OS):

--- (Running the application, auto-reloading is enabled) ---

[info] p.c.s.NettyServer - Listening for HTTP on /0:0:0:0:0:0:0:0:9000

(Server started, use Ctrl+D to stop and go back to the console...)


> [email protected] build C:\dev\Play Framework\ocd\ui
> ng build --extract-css --progress --output-path ../public/ui "--watch"

ENOTEMPTY: directory not empty, rmdir 'C:\dev\Play Framework\ocd\public\ui'
Error: ENOTEMPTY: directory not empty, rmdir 'C:\dev\Play Framework\ocd\public\ui'
    at Error (native)
    at Object.fs.rmdirSync (fs.js:886:18)
    at rmkidsSync (C:\dev\Play Framework\ocd\ui\node_modules\rimraf\rimraf.js:355:25)
    at rmdirSync (C:\dev\Play Framework\ocd\ui\node_modules\rimraf\rimraf.js:333:7)
    at Function.rimrafSync [as sync] (C:\dev\Play Framework\ocd\ui\node_modules\rimraf\rimraf.js:303:9)
    at Class.run (C:\dev\Play Framework\ocd\ui\node_modules\@angular\cli\tasks\build.js:25:16)
    at Class.run (C:\dev\Play Framework\ocd\ui\node_modules\@angular\cli\commands\build.js:143:26)
    at Class.<anonymous> (C:\dev\Play Framework\ocd\ui\node_modules\@angular\cli\ember-cli\lib\models\command.js:134:17)
    at process._tickCallback (internal/process/next_tick.js:103:7)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" "--" "--watch"
npm ERR! node v6.10.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `ng build --extract-css --progress --output-path ../public/ui "--watch"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'ng build --extract-css --progress --output-path ../public/ui "--watch"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng build --extract-css --progress --output-path ../public/ui "--watch"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ui
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\dev\Play Framework\ocd\ui\npm-debug.log

It seems the Build Hook can't remove the public/ui directory. If I manually delete such directory, make a clean/compile/run The angular build go further without error.

Somebody have experienced this issue?

Thanks.

Pasquale

Lazy loading that webpack require 0.chunk.js is invalid url

inline.bundle.js:92:33 require /0.chunk.js but 0.chunk.js locate in sbt in /assets/0.chunk.js ==>

EXCEPTION: Uncaught (in promise): Error: Loading chunk 0 failed.
Error: Loading chunk 0 failed.
at HTMLScriptElement.onScriptComplete (http://localhost:9000/assets/inline.bundle.js:92:33) [angular]
at HTMLScriptElement.wrapFn (http://localhost:9000/assets/polyfills.bundle.js:7053:29) [angular]
at Object.onInvokeTask (http://localhost:9000/assets/vendor.bundle.js:28837:37) [angular]
at ZoneDelegate.invokeTask (http://localhost:9000/assets/polyfills.bundle.js:6225:36) [angular]
at Zone.runTask (http://localhost:9000/assets/polyfills.bundle.js:6029:47) [ => angular]
at HTMLScriptElement.ZoneTask.invoke (http://localhost:9000/assets/polyfills.bundle.js:6279:38) []

Play refresh angular content

Documentation states "Changes in ui folder don't cause Play reloads, but are observed (and handled) by Angular-CLI when Play is running in dev mode", however if I change something at ui I have to touch e.g. application.conf to get the change visible in my app.

Am I doing something wrong? How is your experience with this?