2017-01-06 2 views
-3

저는 앵귤러 2 어플리케이션을 구축 중이며 앵귤러 2 재질 모듈을 사용하기로 결정했습니다. 그러나 플렉스 레이아웃 모듈이 작동하지 않습니다 : https://github.com/angular/flex-layout.플렉스 레이아웃 모듈을 사용하는 각도 2 재질

그래서 angular-cli (베타 24) 최신 버전을 사용하여 새 프로젝트를 만들고 다음 단계를 따라 플렉스 레이아웃을 추가했습니다. 차이는 없습니다. 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] 
}) 

UPDATE에서

. Angular의 블로그를 읽은 후 Flex-Layout 모듈은 Angular 2.4.x와 함께 작동하지만 Angular 2.4i에서는 angle-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" 
    } 
} 

을 나는 말한다 각도/플렉스 레이아웃 @ 설치하려고 지금 때 :

├── UNMET PEER DEPENDENCY @angular/[email protected] 
├── UNMET PEER DEPENDENCY @angular/[email protected] 
├── @angular/[email protected] 
├── UNMET PEER DEPENDENCY [email protected] 
└── UNMET PEER DEPENDENCY [email protected] 

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules/chokidar/node_modules/fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) 
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. 
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. 
npm WARN @angular/[email protected] requires a peer of @angular/[email protected]~2.2.3 but none was installed. 
npm WARN @angular/[email protected] requires a peer of @angular/[email protected]~2.2.3 but none was installed. 
npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed. 
npm WARN @angular/[email protected] requires a peer of [email protected]^0.6.21 but none was installed. 
npm WARN @ngtools/[email protected] requires a peer of @angular/[email protected]^2.3.1 but none was installed. 
npm WARN [email protected] requires a peer of [email protected]^3.0.0 but none was installed. 

@ angular/flex-layout이 2.4보다 큰 버전에서만 작동하는 경우 @ angular/core가 더 오래된 이유는 무엇입니까?

솔루션 많은 실패한 시도가 난 내 자신에 각/플렉스 레이아웃 @ 구축하기로 결정 한 후

.

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 
  • 가 FlexLayoutModule
을 가져
  • 이 app.module.ts 내부의 적절한 수정을 각 @ node_modules/내부 플렉스 레이아웃 폴더를 복사 : 그래서 내가 무슨 짓을하는 것은 다음 단계를 수행했다
  • +0

    이미 투표 수가 있습니다. Stackoverflow에 대한 규칙으로, 당신이 시도한 것을 보여주고 도움이 필요한 곳에서 명확히하십시오. 내가 확신하는 사람들은이 일을하고 있지만 아무도 간단히 대답하고 예라고 대답하지 않을 것입니다. 첫 번째 단락에서 무엇을했는지 보여주고 왜 플렉스 레이아웃이 효과가 없다고 생각하는지 설명하십시오. 두 번째 단락을 위해 이것을 반복하면 도움이 될 것입니다. –

    +0

    의견을 보내 주셔서 감사합니다. 나는 내 질문을 업데이트했다. –

    답변

    1

    좋습니다. 당신이 충족되지 않은 동료 의존성을 얻고있는 것을 볼 수 있습니다. 이렇게하면 일이 즉시 중단됩니다. 경고는 첫 번째 마개가 아니지만 @ angular/common @ 2.4.1이됩니다. 출력 결과를 보면

    ├── UNMET PEER DEPENDENCY @angular/[email protected] 
    ├── UNMET PEER DEPENDENCY @angular/[email protected] 
    ├── @angular/[email protected] 
    ├── UNMET PEER DEPENDENCY [email protected] 
    └── UNMET PEER DEPENDENCY [email protected] 
    

    주요 내용이 누락되었음을 알려줍니다. 지금 당신의 한 가지 문제는이 프로젝트에서 당신에게 문제를 일으키는 것들을 가지고 있다는 것입니다. 이러한 오류가있는 rxjs 및 zone.js가 누락되었습니다. 이것들은 프로젝트에 올바른 버전이 설치되어 있어야합니다.

    출력을 보면 angle-cli가 각도 컴파일러 2.2.3을 원합니다.

    npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. 
    npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. 
    

    플렉스 레이아웃 2.0.0-beta.1는 둘 다 같은 각도를 원하는 2.2.3

    npm WARN @angular/[email protected] requires a peer of @angular/[email protected]~2.2.3 but none was installed. 
    npm WARN @angular/[email protected] requires a peer of @angular/[email protected]~2.2.3 but none was installed. 
    

    이 좋은, 각 컴파일러를 원한다. 그러므로 나는 다시 돌아와서 각진 클리의 깨끗한 설치를 할 것입니다. 그런 다음 package.json을 수정하거나 npm install을 사용하고 flex-layout 2.0.0-beta.1을 추가하십시오.이렇게하면 주요 오류가 정리되고 Flex가 설치 될 때까지 가까이 갈 수 있습니다. 여전히 페이지에 추가하고 렌더링의 관점에서 작동하지 않는 것을 표시해야합니다.

    당신이 베타와 빠른 시작 도구와 라이브러리를 사용함에있어서 조심해야 할 것은 의존 관계 사이의 불일치입니다. flex 베타는 진행중인 작업이 될 것이며, 다른 모든 사람들과 마찬가지로 변경 사항을 통합해야하기 때문에 실제 Angular 2 릴리스보다 지연 될 가능성이 큽니다.