search

FuelInteractive / fuel-ui

UI Components for use with Angular2 and Bootstrap4
http://fuelinteractive.github.io/fuel-ui
301 stars 56 forks source link

Documentation: How to use with angular-cli #65

Closed mmrath closed 8 years ago

mmrath commented 8 years ago

It would be nice if there is some documentation around how to use the library with angular-cli

Joebob12 commented 8 years ago

Hey @mmrath any luck on this? Trying to get this working also.

coryshaw1 commented 8 years ago

Sorry for the late response, got around to looking into this.

To get it working please follow these steps:

1.) npm install fuel-ui font-awesome bootstrap@^4.0.0-alpha.2 --save 2.) Go to your angular-cli-build.js file, and add the following to your vendorNpmFiles array: 

'bootstrap/**/bootstrap.min.css',
'font-awesome/**/font-awesome.min.css',
'font-awesome/fonts/*',
'fuel-ui/bundles/*'

3.) ng build 4.) Add the following to your index.html:

<head>
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="vendor/fuel-ui/bundles/fuel-ui.min.css" />
</head>

...

<!-- All your SystemJS, Angular2, Rx, zone, etc. scripts first! -->
<script src="vendor/fuel-ui/bundles/fuel-ui.min.js"></script>

Now you should be able to freely import from fuel-ui/fuel-ui and then ng serve your code.

I will be making an example repo to fork from for this.

EDIT: Here's the quickstart repo: https://github.com/FuelInteractive/fuel-ui-cli-quickstart/

coryshaw1 commented 8 years ago

Created quickstart repo for Fuel-UI working with angular-cli

https://github.com/FuelInteractive/fuel-ui-cli-quickstart/