SharePoint add-in with Angular 4

Question

Has anyone tried using Angular 4 within a SharePoint hosted add-in? I've followed a variety of examples like these that are working with Angular 2 but once i try to replicate with Angular 4 i get obscure errors when i publish the add-in.

Examples i've used: https://www.youtube.com/watch?v=ZnQy3Hgl7lE https://askmanisha.wordpress.com/2016/08/10/create-basic-sharepoint-add-in-using-angular-2/

I've noticed that Angular modules were broken down further for Angular 4 and suspect that may be part of the issue, that i've referencing incorrect libraries or failing to include some key ones. Has anyone tried this and made it work?

Answer 1

Since you are using SP Online you should use the SPFx and dodge the classic web part design, the same is also valid for SP 2016:

https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview

Once you are familiar with SPFx architecture, you will need to first bootstrap your web part:

yo @microsoft/sharepoint

Then you install the Angular 1.6.5 available from NPM:

npm install --save angular

Once Angular is installed you can upgrade to Angular 4:

npm install --save @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest

And import Angular to your code:

import * as angular from 'angular';