GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Using Angular CLI

This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Using Angular CLI

Jump to bottom
CaerusKaru edited this page Dec 26, 2018 · 10 revisions

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

Install the CLI

# Global
npm uninstall -g @angular/cli
npm install -g @angular/cli

Create a new project

 ng new my-project

Or, use with existing project

rm -rf node_modules/
npm install

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

Install Flex-Layout

npm install @angular/flex-layout @angular/cdk --save

This installs the most recent npm release of Flex-Layout.

npm install angular/flex-layout-builds angular/cdk-builds --save

This installs a nightly build which incorporates the latest updates not yet published to NPM

Import the Angular Flex-Layout NgModule

src/app/app.module.ts

import {NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';
// other imports 
@NgModule({
  imports: [FlexLayoutModule],
  ...
})
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-builds/bundles/flex-layout.umd.js'
    '@angular/cdk': 'npm:@angular/cdk-builds/bundles/cdk.umd.js'
  }
});

Sample Angular Flex-Layout projects

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

  • Live Demos
  • Demo Source Code

                   -   API Documentation   -   StackBlitz Template   -   Live Demos

  • Home

  • Quick Links

    • Gitter Chat
    • Discussion Forum
  • Documentation

    • Static API
    • Responsive API
    • API Documentation
    • Custom Breakpoints
    • Style Builders
    • Performance Considerations
  • Demos

    • Live Online
    • Source Code
  • StackBlitz Templates

    • Flex-Layout Template
    • Flex-Layout + Material
  • Learning FlexBox

    • CSS Flexbox Reference
    • How Flexbox Works - Explained
    • Complete Guide to FlexBox
  • History

    • Why use Angular Layout
    • Browser Support
    • Background
    • Adaptive Layouts
  • Developer Guides

    • NPM Installs
    • Developer Setup
    • Builds + Fast Starts
    • Using Angular CLI
    • WebPack Configuration
  • Contributing

    • Contributing
    • Coding Standards
    • Code Review

Clone this wiki locally

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.