Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

Angular

VIDEO – MS Graph Quick Start (Angular CLI)

Demo of the Microsoft Graph “Quick Start” which generates a full code project with a new App ID (Client ID).    Azure Active Directory (AAD) manages a registration of application ID paired with API permission grants for which API calls can be made.   From there, the client side JavaScript application can invoke HTTP GET to fetch JSON data for the allowed MS Graph API endpoints.   Cheers! 

shades_smile

Video

Screenshots

image

image
image
image
image
image

References

VIDEO – Attempt to build Angular CLI with PNP JS

Recently attempted to create a command line interface (CLI) project with Angular 6 and SP-PNP-JS library for data access.  Followed tutorial by @arustacean at https://medium.com/ng-sp/angular-spa-in-sharepoint-3e7195741460 but with using the latest version of each library.

GitHub source code available at https://github.com/spjeff/sp-ng

However, received strange errors on the web pack TypeScript build process.   Attached video shows the troubleshooting process.  Cheers! 

shades_smile

Video

Screenshot

ERROR – Initializers are not allowed in ambient contexts.

image

Reference

FIXED – Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

When coding JavaScript with SP-PNP-JS I came across the error below and wanted to document for others.  Cheers! 

shades_smile

Error

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

image
image
image

Root Cause

When calling HTTP GET the default Header “accept: application/json” can return data as XML.  

Use F12 Developer Tools to view network traffic with HTTP headers and raw response text.

Solution

Modify JS code to initialize AngularJS with different HTTP headers.

Now SharePoint PNP api calls with Header “accept: application/json; odata=verbose” and returns data as JSON for correct parsing.

$pnp.setup({
	headers: {
		"Accept": "application/json; odata=verbose"
	}
});
image

References

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

  1. Create empty folder C:\CHROME\
  2. Edit PowerShell profile script PS1  (notepad $profile)
  3. Add function chromecors()
  4. From CMD run “ng serve” to open local Angular hosting
  5. From CMD run “chromecors” to launch Chrome with CORS disable
  6. Enjoy debug and functional application testing without security warnings
  7. 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

image
image
image
image
image

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲