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 gulp serve process
  • execute npm run bundle on the Angular project so that the bundle is regenerated with the changes.
  • run gulp serve again 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.