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!
Video
Screenshots
Source Code
Steps
- MD TODO
- NG NEW TODO
- CD TODO
- NG SERVE
- NG HELP BUILD
- NG BUILD -PROD -AOT -D http://portal/sites/todo/SiteAssets/todo -W
- Upload all files from local /dist/ to SharePoint /SiteAssets/todo/
- Right click “index.html” in SharePoint to copy absolute URL
- Edit Page, add Content Editor Web Part (CEWP)
- Modify CEWP and provide URL for display
- 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
