Fast Starts

Installing flex-layout with NPM is not yet available!

Developers can, however, easily install this @angular/flex-layout library using a local repository build and a directory copy:

gulp build:release
ditto ./dist/@angular/flex-layout <projectPath>/node_modules/@angular/flex-layout

The expected deployment process to npm (and the standardized use of npm i @angular/flex-layout) is NOT yet available. NPM installs will be available after the the flex-layout v1.0.0-beta.1 release (week of December 20, 2016).

1) UMD + <script>

Use Gulp and Rollup to build flex-layout.umd.js UMD:

gulp build:lib
cp ./dist/@angular/flex-layout/flex-layout.umd.js  <yourProjectPath>/scripts/flex-layout.umd.js

Use the bundle with an external script tag in the index.html of your Angular 2 application shell:

<script src="/scripts/flex-layout.umd.js"></script>

2) Angular CLI + @angular/flex-layout

If you are using the Angular CLI to bundle and serve your application (using ng serve), you can use the ngc to build the flex-layout files; each with generated metadata files.

Copy that directory to your project's node_modules/@angular/flex-layout directory:

gulp build:release
cp -rF ./dist/@angular/flex-layout <ngCLiProjectPath>/node_modules/@angular/

Next, modify your app.module.ts to use the FlexLayoutModule:


3) SystemJS + UMD

If your approach follows those shown on the tutorials at angular.io, first build the release with gulp build:release. The ./dist/@angular/flex-layout/flex-layout.umd.js may be then used to easily add Flex Layout API features to your application (which uses SystemJS to load modules and transcompile).

Here is a Plunkr Flex-Layout Template: