Reputation: 5146
I'm trying to use flex-layout on angular 5 but it's not working.
This is my environment:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.6.1
Node: 9.3.0
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cdk: 5.0.3
@angular/cli: 1.6.1
@angular/flex-layout: 2.0.0-beta.12-67e4bf5
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0
This is the import in app.module.ts:
import {FlexLayoutModule} from "@angular/flex-layout";
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
SocialLoginModule,
FlexLayoutModule
],
No error on compilation.
This is a test on a template:
<div class="container"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div class="item item-1" fxFlex="15%">Item 1</div>
<div class="item item-2" fxFlex="20%" fxFlexOrder="3">Item 2</div>
<div class="item item-3" fxFlex>Item 3</div>
</div>
<div class="container"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div class="item item-4" fxFlex fxFlexOffset="50px" fxFlexOffset.xs="0">Item 4</div>
<div class="item item-5" fxFlex="200px">Item 5</div>
</div>
This is the result (not what expected):
Upvotes: 12
Views: 16245
Reputation: 3935
You have to import FlexLayoutModule in every feature module. This is not the best solution, but a working one.
Importing and EXPORTING FlexLayoutModule in the SharedModule works like charm and is the best solution that respects the angular style guide, by the way the SharedModule is imported in every feature module.
For more information about the SharedModule: https://angular.io/guide/styleguide#shared-feature-module
Edit: I also wrote an article about SharedModule vs CoreModule if you can't see the difference between them: https://medium.com/@benmohamehdi/angular-best-practices-coremodule-vs-sharedmodule-25f6721aa2ef
Upvotes: 31
Reputation: 318
Install Flex Layout from npm: $ npm install @angular/flex-layout --save
Or with Yarn: $ yarn add @angular/flex-layout
Now import FlexLayoutModule in your app module
import { FlexLayoutModule } from "@angular/flex-layout";
@NgModule({
imports: [
BrowserModule,
FlexLayoutModule
],
// ...
})
export class AppModule {}
Flex Layout is now ready to be used in your templates.
Upvotes: -2
Reputation: 349
Add the following to the package.json file:
"@angular/flex-layout": "^6.0.0-beta.15",
"rxjs": "^6.1.0",
"@angular/cdk": "^6.0.0",
"rxjs-compat": "6.0.0-beta.1",
and run
npm install
Upvotes: 3