SharePoint, Office 365, Azure, and Front end JS geek. – Chicago IL
SharePoint, Office 365, Azure, and Front end JS geek. – Chicago IL

VIDEO – Angular CLI – Todo List in SharePoint Content Editor

Angular 2 (“Angular”) brings many improvements over Angular 1 (“AngularJS”).  The CLI tools (Command Line Interface) help streamline operations so we can develop professional applications with ease including unit testing, bundling, minification, live preview, webpack, distribution, and more.

The below demo shows how to create a new application, run tests, add features, and deploy to SharePoint Pages hosted in a Content Editor Web Part.  The CLI tools boost developer productivity while holding up quality control.

Check out the live coding video below, hosted on both Vimeo and YouTube.

Leave a comment if you found it helpful.  Cheers! 

shades_smile

Video

Screenshots

image
image
image
image
image

Source Code

Steps

  1. MD TODO
  2. NG NEW TODO
  3. CD TODO
  4. NG SERVE
  5. NG HELP BUILD
  6. NG BUILD -PROD -AOT -D http://portal/sites/todo/SiteAssets/todo -W
  7. Upload all files from local /dist/ to SharePoint /SiteAssets/todo/
  8. Right click “index.html” in SharePoint to copy absolute URL
  9. Edit Page, add Content Editor Web Part (CEWP)
  10. Modify CEWP and provide URL for display
  11. Enjoy!

References

Errors Fixed

https://stackoverflow.com/questions/40386883/sharepoint-angular-2-app-using-cli-webpack

For Angular2 to load correctly on a SharePoint page we must comment out the line “import ‘core-js/es6/string’;” from “polyfills.ts” to avoid conflict with Microsoft Script Resource AXD code already included.

  • Uncaught g {__zone_symbol__error: Error: Sys.ParameterCountException: Parameter count mismatch.
  • polyfills.3737621….bundle.js:1 Uncaught
  • ScriptResource.axd?d=BguhdZbE6Lg8ptBp5skwRENGckVM6n4sP4jY4eLX78z7DZzuMbkeH4dwMKG-9qqtKy6_9p0QSjbOTX…:494 Uncaught
  • Steve Kuennen

    This is a very interesting approach, albeit fairly simplistic from an Angular2 point of view. Have you gotten this to work with a more complex Angular2 App? I’m having some trouble with routing using this approach. Nothing definitive yet, but curious if you’ve done anything w/ routes.

    • Hi Steve,

      I have not yet tried routes here. Disable the SharePoint web feature “Minimal Download Strategy” would be a key first step to avoid strange URL suffix. However, I think it would work fine after that.

      • Steve Kuennen

        Hey Jeff,

        You’re correct, routing more or less works, although, similar to hosting in IIS, the url that Angular generates is not interpreted when trying to access the angular routes directly.

        That is, if I go to my site page, everything loads fine, and I can click around in my angular app and the correct components load and the url changes along as you would expect. But trying to get to a specific route via URL doesn’t work as SharePoint doesn’t realize it needs to be interpreted by Angular.

        That and many other issues are making me second guess this strategy, but at least I’ve got some Angular2 working in SharePoint. Now just a question of pushing forward and fixing all these pains or going another route.

        Thanks again for the post and video.

  • Thanks again ! I will have a look at this tutorial to try implementing app with typescript

  • Saravana Kumar Narayanan

    Thanks a lot for your awesome post, I will check and update you.

  • Pingback: VIDEO – Angular CLI – SPCRUD Todo List in SharePoint Content Editor (part 2 of 2) | @SPJeff()

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲