SharePoint Framework and Angular 4/5 with multiple webparts

Question

Hi,I am trying to create SPFx multiple web parts with Angular 4. I have created 'App' folder under webparts folder and trying to run the project. I am able to run first web part but when adding second webpart , It is throwing errors.
I am attaching my code here.Can you please suggest, How can I use angular 4 with only one app folder in SPFx with multiple webparts?Thanks,Gaurav

english1080 · Answer

i also face exact issue in spfx web part. i am searching the solution ofr this. if you got the solution for this issue please share answer with me. following are packages :&nbsp;&nbsp;"@angular/animations":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@angular/common":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@angular/compiler":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@angular/core":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@angular/forms":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@angular/http":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@angular/platform-browser":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@angular/platform-browser-dynamic":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@angular/router":&nbsp;"~4.0.0",&nbsp;&nbsp;&nbsp;&nbsp;"@microsoft/sp-core-library":&nbsp;"1.9.1",&nbsp;&nbsp;&nbsp;&nbsp;"@microsoft/sp-lodash-subset":&nbsp;"1.9.1",&nbsp;&nbsp;&nbsp;&nbsp;"@microsoft/sp-office-ui-fabric-core":&nbsp;"1.9.1",&nbsp;&nbsp;&nbsp;&nbsp;"@microsoft/sp-webpart-base":&nbsp;"1.9.1",&nbsp;&nbsp;&nbsp;&nbsp;"@types/es6-promise":&nbsp;"0.0.33",&nbsp;&nbsp;&nbsp;&nbsp;"@types/webpack-env":&nbsp;"1.13.1",&nbsp;&nbsp;&nbsp;&nbsp;"classlist.js":&nbsp;"^1.1.20150312",&nbsp;&nbsp;&nbsp;&nbsp;"lodash":&nbsp;"^4.17.4",&nbsp;&nbsp;&nbsp;&nbsp;"reflect-metadata":&nbsp;"0.1.10",&nbsp;&nbsp;&nbsp;&nbsp;"rxjs":&nbsp;"~5.0.1",&nbsp;&nbsp;&nbsp;&nbsp;"systemjs":&nbsp;"0.19.40",&nbsp;&nbsp;&nbsp;&nbsp;"typescript-string-operations":&nbsp;"~1.1.0",&nbsp;&nbsp;&nbsp;&nbsp;"typings":&nbsp;"^2.1.1",&nbsp;&nbsp;&nbsp;&nbsp;"zone.js":&nbsp;"~0.8.4"

beau cameron · Answer

Gaurav Goyal&nbsp;This is an issue with how Angular bootstraps it's solutions. In the Angular 2+ world, only 1 "app" can live on a page at a time. Because of this, it doesn't really work when you want to use it in SharePoint.In order to make it work, you'd need to use Angular Elements. Which has many cons. For more information, check out Andrew Connell's blog on this matter.https://www.andrewconnell.com/blog/using-angular-elements-in-sharepoint-framework-projects

Forum Discussion

SharePoint Framework and Angular 4/5 with multiple webparts

Share

Resources