Fork our Webpack Quickstart! https://github.com/coryshaw1/ng2-play/
Fork our angular-cli Quickstart! https://github.com/FuelInteractive/fuel-ui-cli-quickstart/
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: [ ... ]
{{'}'}})
npm install fuel-ui --save
Go to your SystemJs config file, and add the following to your map
array:
"moment": "node_modules/moment/moment.js",
"fuel-ui": "node_modules/fuel-ui/bundles/fuel-ui.umd.js",
Then the proper link tags to your index.html
's <head>
<head>
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="node_modules/fuel-ui/bundles/fuel-ui.css" />
</head>
Then simply add the proper module(s) to your base component
import {{'{'}} FuelUiModule {{'}'}} from 'fuel-ui';
@NgModule({{'{'}}
bootstrap: [ YourBaseComponent ],
declarations: [ YourBaseComponent, ... ],
imports: [ FuelUiModule, ... ],
providers: [ ... ]
{{'}'}})