I have been doing some tests with the Angular Element SharePoint Online Web Part project template generated by the @pnp/generator-spfx Yeoman generator (see here) to evaluate its usage for a small project. Sadly enough, the provided documentation is very basic.
As some may already know, when choosing to create a Web Part with Angular Elements support the generator actually creates two projects: a pure Angular Elements based one and an SPFx project that reuses the bundle produced by the first one.
To test the resulting Web Part in the SharePoint workbench one has to execute
gulp serve in the SPFx project. Alternatively, the web part can also be tested outside SharePoint by running
ng serve in the Angular project. All fine so far.
The problem start when someone then wants to change something in the initial Angular stub created by the generator.
Apparently, the SPFx project does not automatically detect changes done to the Angular project, so in order to be able to test the new version of the web part on the workbench the dev has to:
- stop the
npm run bundleon the Angular project so that the bundle is regenerated with the changes.
gulp serveagain on the SPFx project
For comparison, the React projects generated by the official Microsoft generator enable "live changes" - as soon as a change is made to the project files,
gulp serve automatically pick it up and the workbench is then refreshed with the up-to-date version. Obviously this is a far better development experience.
I understand that the Angular Element generator template has to live with a much more complex projects structure than the React one and so this is probably bound to cause issues, but I also wonder if I am missing part of the picture.
So here is the question: is there any way to have changes in the Angular project reflecting immediately on the workbench preview (similar to what happens for the React template) without having to follow the three-steps procedure I mentioned above? Note that in this case I am not interested to run the web part as a standalone with
ng serve - I am specifically asking about having the web part automatically update when using the
gulp serve/workbench approach