Tag Archives: Angular2
Angular2 – Disable CORS security for smooth Chrome debug
Recently while debugging an application I needed to design REST and JSON api calls across DNS domains. However, the client browser Chrome blocked those HTTP transactions due to CORS. While essential to production security, this can be a roadblock to developer productivity locally. The below steps show how to launch Chrome browser with CORS security temporarily disabled. This can help remove complexity and security warnings to focus first on application features.
Once stable, we can add CORS support to the endpoint APIs (HTTP header Access-Control-Allow-Origin:*) and calling JS application.
Install Steps
- Create empty folder C:\CHROME\
- Edit PowerShell profile script PS1 (notepad $profile)
- Add function chromecors()
- From CMD run “ng serve” to open local Angular hosting
- From CMD run “chromecors” to launch Chrome with CORS disable
- Enjoy debug and functional application testing without security warnings
- Add CORS support to endpoint APIs as needed. https://enable-cors.org/ has great advice on configuration.
Code
# Chrome Disable CORS
function chromecors() {
TASKKILL /F /IM chrome.exe
Start-Process -FilePath "c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -ArgumentList @("--disable-web-security", "--user-data-dir=""C:\Chrome""")
}Screenshot
VIDEO – Angular CLI – SPCRUD Todo List in SharePoint Content Editor (part 2 of 2)
Continued part 2 of earlier video at https://www.spjeff.com/2017/05/31/angular-cli-todo-list-in-sharepoint-content-editor/
Here we add “spcrud.ts” library with CRUD methods to save JSON data over REST api into SharePoint Lists.
SPCRUD is a Typescript library with methods to easily interact with SharePoint APIs by providing management of Digest Token, HTTP headers, and URL formatting. As developers we interact with simple TypeScript methods that have input validation which in turn execute the correct underlying HTTP call.
Cheers! 
Source Code
Video
Angular 2 CLI – SPCRUD Todo List in SharePoint Content Editor (Part 2 of 2) from Jeff Jones on Vimeo.
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! 
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
