2

I have successfully created an Angular Elements application following this awesome guide.

The "serve" process consists of:

  1. Build the application and concat into a single js file ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js
  2. Now serve a HTML file, containing the custom element. In this case lite-server.

But every time I do a change to the custom element, and wan't to see it updated I need to re-run the build script. So my question is this, how can I build this in watch mode?

The relevant parts of my package.json looks like this:

"buildForShip": "ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
"plainHTML": "lite-server"
"start": "npm run -s buildForShip && npm run -s plainHTML"
DauleDK
  • 3,313
  • 11
  • 55
  • 98

1 Answers1

2

Following the article, you might have added a script named plainHTML in the scripts object of your package.json file. You can simply add --watch after it.

Something like this:

"plainHTML": "lite-server --watch"

This should run the server in watch mode and should look for file changes.

Also, since your file is going to be generated after building it, you can also use --watch in ng build for buildForShip script:

"buildForShip": "ng build --prod --watch --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • but the `ship.js` file only updates when runnig the build command, so that won't work – DauleDK Nov 19 '18 at 09:10
  • Did you try running `ng build in --watch` mode? – SiddAjmera Nov 19 '18 at 09:13
  • 1
    yes - and that works. *But* I also need the files merged into one, like specified in the build script (`&& cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js`) otherwise the lite-server won't pick it up – DauleDK Nov 19 '18 at 09:16
  • Hi, we have a similar problem with our micro app. Any updates? Did you find any solutions? – Gokce Akcan Dec 19 '22 at 16:41