1

I'm new to angular cli and webpack. In my project I have a webpack config file which among other configurations, it indicates that a merge file plugin (MergeJsonWebpackPlugin) should run for merging certain files and putting them on an output file somewhere else.

My problem is that when running webpack this is done, but those output files are stored somewhere in virtual memory. For what I've read, this is the normal behavior until you properly build you app for production in which case those outfile will be written in disk.

My app of course, tries to find those output files on the assets folder for using them inside the app itself. I've used another plugin (WriteFilePlugin) so as to been able to write the files in disk while running the webpack dev server, and this works great.

Now, For been able to handle this now I have a dedicated angular cli script in my package.json file

  ....
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 9978",
    "build": "ng build",
     ....
    "custom": "webpack-dev-server --inline --progress --colors"
  }
  ...

So, I have to run "npm custom" in order to have my files written in disk. Then I have to run "npm start" to serve my application and use those files. If for some reason I update my source files which should be merged, then I have to stop my start script and run the custom script for the webpack dev server all over again

Is there a way to include this automatically when running the start script via angular cli?

I've been reading that when you run "ng serve" what happens behind the scenes is:

  1. Angular CLI loads its configuration from .angular-cli.json
  2. Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
  3. Angular CLI starts Webpack dev server to preview the result on localhost:4200.

...because it includes LiveReload support, the process actively watches your src directory for file changes. When a file change is detected, step 2 is repeated and a notification is sent to your browser so it can refresh automatically.

On point 3 I would expect my merged files to be generated and store inside the assets folder but this is not happening (as it does when running "npm custom"), neither the update of this merged files whenever I update them.

Am I missing something? Would this be possible to do? Thanks in advance!

Rodrigo Martinez
  • 913
  • 3
  • 13
  • 29

0 Answers0