Angular 2 Play dev mode integration
This is a working Angular 2 run hook for Play Framework. To use it, put the file below in your
project directory, and then add the following to your
lazy val angular2BaseDir = settingKey[File]("Base directory for Angular 2 app") angular2BaseDir := <insert your base directory here> // eg, baseDirectory.value / "my-angular-app" PlayKeys.playRunHooks += Angular2(streams.value.log, angular2BaseDir.value, target.value) // Sets the Angular output directory as Play's public directory. This completely replaces the // public directory, if you want to use this in addition to the assets in the public directory, // then use this instead: // unmanagedResourceDirectories in Assets += angular2BaseDir.value / "dist" resourceDirectory in Assets := angular2BaseDir.value / "dist"
What this does is, when you start dev mode, it will run
npm install on the Angular app if the
package.json has changed since dev mode was last started. So it assumes you have a
package.json configured to install Angular for you.
Then once dev mode is started, it will run the Angular build in watch mode, rebuilding whenever changes are made. Furthermore, the assets generated by Angular will be available on the classpath under the
/public directory, just like regular sbt-web managed assets, and so can be served by the Play assets controller.
@angular/cli 1.1.0 or above, this is to get the ability to turn off deleting the output path, which was necessary because otherwise Angular deletes the output path on each rebuild, which causes Play to stop watching it because it's impossible to watch a non existent directory.