flex-layout: Error: can't import module with Angular 4.0

Hello,

I followed the installation manual for angular-cli but I can not import the module into my application. I get the following error: Unexpected value 'undefined' imported by the module 'AppModule'

If I put it in the module where I’m going to use it, it also gives me a similar error.

packge.json dependecies:

"dependencies": {
    "@angular/cli": "1.0.2",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/animations": "^4.0.0",
    "@angular/material": "^2.0.0-beta.5",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@swimlane/ngx-datatable": "^9.2.0",
    "angular-load": "^0.5.0",
    "core-js": "^2.4.1",
    "ng2-bs3-modal": "^0.10.4",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "@types/systemjs": "^0.20.2",
    "autoprefixer": "^6.5.3",
    "codelyzer": "~2.0.0",
    "css-loader": "^0.27.3",
    "cssnano": "^3.10.0",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.10.0",
    "istanbul-instrumenter-loader": "^2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "json-loader": "^0.5.4",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-requirejs": "^1.1.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "less-loader": "^4.0.2",
    "postcss-loader": "^1.3.3",
    "postcss-url": "^5.1.2",
    "protractor": "~5.1.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "script-loader": "^0.7.0",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "stylus-loader": "^3.0.1",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0",
    "url-loader": "^0.5.7",
    "webpack": "2.2.1",
    "webpack-dev-server": "~2.4.2"
  }

Thanks.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 15 (3 by maintainers)

Most upvoted comments

If you have a shared module, you can import and re-export FlexLayoutModule as part of your shared content. Each feature module needs to import FlexLayoutModule (if those features use the flex-layout API) or import the shared module.

ThomasBurleson on Jun 12, 2017

Beta.8 source have some issues with Angular 4.1.x or higher and AOT. This PR #342 provides fixes to fully support Angular 4.x, AOT, FESM, and more.

ThomasBurleson on Jul 20, 2017

Fortunately, I have a partner who knows webpack and has found a much simpler solution to use the library when loading modules with lazy load. Importing the library like this:

import { FlexLayoutModule } from "@angular/flex-layout/flexbox/_module";

Only this in your module and MAGIC.

Thank you all.

patapron on Jun 19, 2017

Reopened to add ^ info to the Wiki docs.

ThomasBurleson on Jun 12, 2017

@patapron Hi, I faced the same problem with importing FlexLayoutModule. Below is workaround Are you loading lazy module ? If you are loading lazy module then you have to import FlexLayoutModule in your lazy module.

ggarg2 on Jun 12, 2017

can you show how are you importing the module?

jotatoledo on Jun 8, 2017

I have the same issue +1

isacm94 on Jun 7, 2017