Hook into angular-cli build watch

Question

I\'d like to to know if it is possible to hook into angular-cli\'s build/watch command:

ng build /w

which generates files and dr

Answer 1

One way is to run npm run build and have a postbuild script that copies the content of index.html from your dist folder to your html/cshtml file in your desired folder and changes the script and link tag's paths in your newly copied file to point to the dist folder after the build it complete. Now run ng build --watch and start development. I'm using angular 6 and angular-cli with .Net MVC 4.5 and I use ~\Views\Home as my desired destination folder.

To have the watch mode running in my project I Run npm run build:watch Now the watch mode works. Below is my package.json:

"scripts": {
        "ng": "ng",
        "build": "ng build",
        "build:watch": "npm run build && ng build --watch",
        "build:prod": "ng build --prod && npm run postbuild",
        "postbuild": "npm run copyindex && npm run fixpath",
        "copyindex": "copy /D \".\\dist\\index.html\" \"Views\\Home\\Index.cshtml\" /Y",
        "fixpath": "powershell -Command \"(gc Views\\Home\\Index.cshtml) -replace '(\\w+\\.js|\\w+\\.css)', '~/dist/$1' | Out-File Views\\Home\\Index.cshtml\"",
    },

package.json explanation : after running npm run build the postbuild gets called automatically. postbuild will call copyindex and fixpath one after another.

• copyindex will copy the content of my dist\index.html to my Views\Home\Index.cshtml.
• fixpath will add ~/dist/ to the beginning of all js and css file paths in my Index.cshtml.
• build:watch: calls ng build --watch.
• build:prod: is for prod build and calls ng build --prod and postbuild one after another.

Note

• The commands can be run in any console on windows (cmd or bash).
• I used powershell in my fixpath. It can be replaced by your favorite tool.