Integration with Angular CLI

Thomas Burleson edited this page Dec 22, 2016 · 5 revisions

Using Flex-Layout with the the Angular CLI is easy.

Install the CLI

 npm install -g angular-cli

Create a new project

 ng new my-project

The new command creates a project with a build system for your Angular app.

NPM Install Angular Flex-Layout components

npm install --save @angular/flex-layout

Import the Angular Flex-Layout NgModule

src/app/app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
// other imports 
@NgModule({
  imports: [FlexLayoutModule.forRoot()],
  ...
})
export class PizzaPartyAppModule { }

Configuring SystemJS

If your project is using SystemJS for module loading, you will need to add @angular/flex-layout to the SystemJS configuration:

System.config({
  // existing configuration options
  map: {
    ...,
    '@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js'
  }
});

Sample Angular 2 Flex-Layout projects

Developers are encouraged to review the live demos and source for the Flex-Layout Demos: