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"

}

Answer 1

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.

Answer 2

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