Angular 2材质使用flex布局模块

时间：2017-01-06 12:16:01

标签： angular flexbox

我正在构建一个Angular 2应用程序，并决定使用Angular 2材质模块。但是，flex布局模块无法正常工作：https://github.com/angular/flex-layout。

所以我使用最新版本的angular-cli（beta 24）创建了一个新项目，并按照以下步骤添加了flex布局：https://github.com/angular/flex-layout/wiki/Integration-with-Angular-CLI但没有区别。有没有人使用过这些或者有想法如何使它工作？

在我的app.module.ts

中 
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  declarations: [
    .........
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot(),
    FlexLayoutModule.forRoot(),
    RouterModule.forRoot(appRoutes)

  ],
  providers: [],
  bootstrap: [AppComponent]
})

更新

对不正确的问题抱歉。在阅读Angular的博客后，我看到flex-layout模块与Angular 2.4.x一起使用，但我的angular-cli生成了Angular 2.3.1项目。这是我的package.json文件：

{
  "name": "demo2",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

我尝试将package.json文件手动更新为：

{
  "name": "demo2",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.1",
    "@angular/compiler": "^2.4.1",
    "@angular/core": "^2.4.1",
    "@angular/forms": "^2.4.1",
    "@angular/http": "^2.4.1",
    "@angular/platform-browser": "^2.4.1",
    "@angular/platform-browser-dynamic": "^2.4.1",
    "@angular/router": "^3.4.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.2",
    "ts-helpers": "^1.1.2",
    "zone": "^0.3.4",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "angular-cli": "^1.0.0-beta.24",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "^2.0.10"
  }
}

现在，当我尝试安装@ angular / flex-layout时，它说：

├── UNMET PEER DEPENDENCY @angular/common@2.4.1
├── UNMET PEER DEPENDENCY @angular/core@2.4.1
├── @angular/flex-layout@2.0.0-beta.1 
├── UNMET PEER DEPENDENCY rxjs@5.0.2
└── UNMET PEER DEPENDENCY zone.js@0.7.4

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN @angular/compiler-cli@2.2.3 requires a peer of @angular/compiler@2.2.3 but none was installed.
npm WARN @angular/compiler-cli@2.2.3 requires a peer of @angular/core@2.2.3 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.1 requires a peer of @angular/common@~2.2.3 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.1 requires a peer of @angular/core@~2.2.3 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.1 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.1 requires a peer of zone.js@^0.6.21 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/compiler-cli@^2.3.1 but none was installed.
npm WARN tslint-loader@2.1.5 requires a peer of tslint@^3.0.0 but none was installed.

为什么@ angular / flex-layout要求@ angular / core早于2.4，如果它仅适用于大于2.4的版本？

解

经过多次不成功的尝试后，我决定自己构建@ angular / flex-layout。所以我所做的就是遵循以下步骤：

Getting your environment set up

Make sure you have node installed with a version at least 5.5.0.
Run npm install -g gulp to install gulp.
Run npm install -g yarn to install yarn.
Fork the angular/flex-layout repo.
Clone your fork. Recommendation: name your git remotes upstream for angular/flex-layout and <your-username> for your fork. Also see the team git shortcuts.
From the root of the project, run yarn install.


Building the library

To build the library in dev mode, run gulp build:lib.
To build the library in release mode, run gulp build:release
  • 复制node_modules / @ angular
    • 中的flex-layout文件夹
  • 在app.module.ts中进行适当修改以导入FlexLayoutModule

1 个答案:

答案 0 :(得分：1)

那更好。我可以看到你正在获得未满足的对等依赖项。这将阻止事情立即发挥作用。警告不是第一个塞子，但@ angular / common @ 2.4.1将是。如果我查看你的输出，

├── UNMET PEER DEPENDENCY @angular/common@2.4.1
├── UNMET PEER DEPENDENCY @angular/core@2.4.1
├── @angular/flex-layout@2.0.0-beta.1 
├── UNMET PEER DEPENDENCY rxjs@5.0.2
└── UNMET PEER DEPENDENCY zone.js@0.7.4

这些告诉我主要的东西都缺失了。我相信你现在面临的一个问题就是你在这个项目中有一些东西会给你带来麻烦。您缺少具有这些错误的rxjs和zone.js。这些也需要在项目中安装正确的版本。

查看输出，你的angular-cli想要角度编译器2.2.3。

npm WARN @angular/compiler-cli@2.2.3 requires a peer of @angular/compiler@2.2.3 but none was installed.
npm WARN @angular/compiler-cli@2.2.3 requires a peer of @angular/core@2.2.3 but none was installed.

Flex layout 2.0.0-beta.1也需要angular compiler 2.2.3 

npm WARN @angular/flex-layout@2.0.0-beta.1 requires a peer of @angular/common@~2.2.3 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.1 requires a peer of @angular/core@~2.2.3 but none was installed.

这很好，他们都想要相同的角度。因此，我会回去做你的角度cli的干净安装。然后修改package.json，或使用npm install，并添加flex-layout 2.0.0-beta.1。这将清除主要错误，并使您接近正在安装的Flex。您仍然需要将它添加到页面中，并从渲染的角度显示不起作用的内容。

要注意的一点是，因为您正在使用测试版和快速启动工具和库，因此依赖项之间存在不一致。 flex测试版将是一项正在进行的工作，可能会落后于实际的Angular 2版本，因为他们必须像其他人一样继续纳入这些更改。

相关问题
最新问题