SPFX Client WebPart with Angularjs and OfficeUiFabric

Question

Iam strugling to use OfficeUIFbric in my Client WebPart with AngularJS. I first created the webpart as "No javaScript web framework", and then i added angularJS as described in this article , webpart is working fine but without any OfficeUIFaberic design on the button.

these two ways shown in articles is not working: import 'ng-office-ui-fabric' OR require('ng-office-ui-fabric')

iam adding these lines in my webpart.ts file....

and my config.js i have added angularjs and officeuifabric:

"externals": {
"angular": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
  "globalName": "angular"
},
"ng-office-ui-fabric": "https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.12.3/ngOfficeUiFabric.js"

}

You can also reference these fabric links in your html.

Saad Zulfiqar
– Saad Zulfiqar

2017-05-09 06:26:11 +00:00
Commented May 9, 2017 at 6:26 — Saad Zulfiqar
– Saad Zulfiqar, Commented May 9, 2017 at 6:26

Waldek Mastykarz · Accepted Answer · 2017-05-13 13:08:55Z

3

Currently ngOfficeUIFabric uses an older version of Office UI Fabric than the version used by the SharePoint Framework. If you'd load ngOfficeUIFabric and its CSS, you would break the existing SharePoint UX.

Instead of using ngOfficeUIFabric in your SPFx solution built using AngularJS, you should either use the Office UI Fabric CSS styles available with SPFx or use the code from ngOfficeUIFabric and build your own components using the same version of Office UI Fabric as SPFx.

answered May 13, 2017 at 13:08

Waldek Mastykarz

2,51412 silver badges8 bronze badges

Add a comment |

Danny '365CSI' Engelman · Accepted Answer · 2017-05-08 07:25:06Z

Fabric is the CSS framework

ngOfficeFabricUI are the Angular components using that CSS Framework

That blog only shows you how to load the JS files, it's missing the explanation how to load Fabric CSS Framework itself

I would never trust blogs, they are outdated the day they are written
(so that blog refers to an older JS file as well)

Go straight to the source:

https://github.com/ngOfficeUIFabric/ng-officeuifabric/

You could try and find an SPFx example that uses Fabric:

https://github.com/SharePoint/sp-dev-fx-webparts/search?q=fabric

but with too many (hardly documented) SPFx examples, that takes some time

Stack Exchange Network

SPFX Client WebPart with Angularjs and OfficeUiFabric

2 Answers 2

Your Answer

Hot Network Questions

SPFX Client WebPart with Angularjs and OfficeUiFabric

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions