【发布时间】：2017-01-13 06:04:25
【问题描述】：
我正在构建一个 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 仅适用于高于 2.4 的版本，为什么 @angular/core 需要比 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
【问题讨论】：
-
您已经投了反对票。作为 Stackoverflow 的一项规则，请展示您尝试过的内容，并明确您需要帮助的地方。我相信人们可以做到这一点，但没有人会简单地回复并说是的。从你的第一段开始，展示你做了什么，并解释为什么你认为 flex-layout 不起作用。对第二段重复此操作，您可能会得到一些帮助。
-
感谢您的反馈。我已经更新了我的问题。