Installation

Fork our Webpack Quickstart! https://github.com/coryshaw1/ng2-play/
Fork our angular-cli Quickstart! https://github.com/FuelInteractive/fuel-ui-cli-quickstart/

Webpack

If you would like to add Fuel-UI to your Angular2 Webpack project through npm manually, do the following:


npm install fuel-ui --save

You then need to make sure you add references to the following:

There are different ways of doing adding these. In our Github project, we use Webpack loaders to achieve this where we can (see bootstrap-loader and font-awesome-webpack). You may also just simply add the vendor CSS files to the head. You do not need the javascript for these

Then simply add the proper module(s) to your base component


import {{'{'}} FuelUiModule {{'}'}} from 'fuel-ui';

@NgModule({{'{'}}
  bootstrap: [ YourBaseComponent ],
  declarations: [ YourBaseComponent, ... ],
  imports: [ FuelUiModule, ... ],
  providers: [ ... ]
{{'}'}})

FuelUiModule will add access to every Fuel-UI module to your project. If you wish to minimize the amount of imports, you can also mix and match the following modules:


import {{'{'}}
  FuiAnimationsModule,  //All animations
  FuiComponentsModule,  //All components
  FuiDirectivesModule,  //All directives
  FuiPipesModule //All pipes
{{'}'}} from 'fuel-ui';

@NgModule({{'{'}}
  bootstrap: [ YourBaseComponent ],
  declarations: [ YourBaseComponent, ... ],
  imports: [ FuiAnimationsModule, FuiComponentsModule, FuiDirectivesModule, FuiPipesModule, ... ],
  providers: [ ... ]
{{'}'}})

To make your imports even more modular, every demo page will have the Fuel-UI component/directive/etc's module. This way you'll be able to import even less. FuiDatePickerModule for example.


ng new example-project
cd example-project
npm install fuel-ui font-awesome bootstrap@4.0.0-alpha.5 --save

Go to your angular-cli.json file, and add the following to your styles array:


"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/fuel-ui/bundles/fuel-ui.css"

Next, still within your angular-cli.json file, add the following to your addons array:


"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"

Now build the project to copy over the necessary files


ng build

Then simply add the proper module(s) to your base component


import {{'{'}} FuelUiModule {{'}'}} from 'fuel-ui';

@NgModule({{'{'}}
  bootstrap: [ YourBaseComponent ],
  declarations: [ YourBaseComponent, ... ],
  imports: [ FuelUiModule, ... ],
  providers: [ ... ]
{{'}'}})