components: npm install of latest 5.0.0-rc0 fails against latest angular

Bug, feature request, or proposal:

Since the very recent release of rc0 of 5.0.0 npm install is failing for me

What is the expected behavior?

npm install completes as it currently still does with 2.0.0-beta.12

What is the current behavior?

npm install --save @angular/material @angular/cdk

gives the following results

±- @angular/cdk @5.0.0-rc0 ±- UNMET PEER DEPENDENCY @angular/common @4.4.6 ±- UNMET PEER DEPENDENCY @angular/core @4.4.6 ±- @angular/material @5.0.0-rc0 ±- UNMET PEER DEPENDENCY jquery@1.9.1 - 3 `-- UNMET PEER DEPENDENCY popper.js@^1.12.3

npm WARN optional Skipping failed optional dependency /chokidar/fsevents: npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.1.2 npm WARN bootstrap@4.0.0-beta.2 requires a peer of jquery@1.9.1 - 3 but none was installed. npm WARN bootstrap@4.0.0-beta.2 requires a peer of popper.js@^1.12.3 but none was installed. npm WARN @angular/cdk @5.0.0-rc0 requires a peer of @angular/core@^5.0.0 but none was installed. npm WARN @angular/cdk @5.0.0-rc0 requires a peer of @angular/common@^5.0.0 but none was installed. npm WARN @angular/material @5.0.0-rc0 requires a peer of @angular/core@^5.0.0 but none was installed. npm WARN @angular/material @5.0.0-rc0 requires a peer of @angular/common@^5.0.0 but none was installed.

What are the steps to reproduce?

npm install --save @angular/material @angular/cdk

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

5.0.0-rc0

Is there anything else we should know?

I am currently working round with

npm install --save @angular/material/2.0.0-beta.12 @angular/cdk/2.0.0-beta.12

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 18 (6 by maintainers)

Most upvoted comments

Finally I got everything working with this 5.0.0-rc0. 😃

Step 0: You should have Angular 5 installed which works well with Material2 Beta 12.

Step 1: install cdk@5.0.0-rc0 npm i @angular/cdk@5.0.0-rc0 --save

Step2: install material 5 npm i @angular/material @5.0.0-rc0 --save

Step 3: declare HttpClient of NG5 In systemjs.config.js, add this: '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

This is for material 5 which apparently is using HttpClient, while your app code may still be using the Http service, so you may want to keep the declaration for the Http service.

Step 4: declare the following to address a bug in rxjs 5.5.0 - 5.5.2 which NG5 and Material 5 depend on.

            //temp fix according to https://github.com/ReactiveX/rxjs/issues/2971
            'rxjs/operators': 'npm:rxjs/operators/index.js',
            'rxjs/operators/filter': 'npm:rxjs/operators/filter.js',
            'rxjs/operators/switchMap': 'npm:rxjs/operators/switchMap.js',
            'rxjs/operators/first': 'npm:rxjs/operators/first.js',
            'rxjs/operators/tap': 'npm:rxjs/operators/tap.js',
            'rxjs/operators/delay': 'npm:rxjs/operators/delay.js',
            'rxjs/operators/startWith': 'npm:rxjs/operators/startWith.js',
            'rxjs/operators/catchError': 'npm:rxjs/operators/catchError.js',
            'rxjs/operators/map': 'npm:rxjs/operators/map.js',
            'rxjs/operators/share': 'npm:rxjs/operators/share.js',
            'rxjs/operators/finalize': 'npm:rxjs/operators/finalize.js',
            'rxjs/operators/takeUntil': 'npm:rxjs/operators/takeUntil.js',
            'rxjs/operators/combineLatest': 'npm:rxjs/operators/combineLatest.js',
            'rxjs/operators/debounceTime': 'npm:rxjs/operators/debounceTime.js',
            'rxjs/operators/auditTime': 'npm:rxjs/operators/auditTime.js',
 
            'tslib' : 'npm:tslib/tslib.js'

When testing, make sure you have proper versioning of your code and meta, or you may clear the browser caches.

Remarks: If you are using angular flex-layout, as of today, there seems to be a random bug during npm install or update, 2.0.0-rc.1 got installed instead. So goto something like YourNG2App\node_modules@angular\flex-layout and check package.json to see if it is actually “@angular/flex-layout @2.0.0-rc.1”, if it is, do the following:

Delete folder flex-layout
Run npm i @angular/flex-layout or npm i @angular/flex-layout@2.0.0-beta.10

zijianhuang on Nov 7, 2017

(cont.) If you are using Angular 5, Material2 5.0.0-rc0 and Angular Flex-layout, the following may work for you:

In package.json

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.10",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@types/core-js": "^0.9.43",
    "@types/jasmine": "^2.6.3",
    "@types/node": "^8.0.49",
    "@types/selenium-webdriver": "^2.53.42",
    "concurrently": "^3.5.0",
    "core-js": "^2.5.1",
    "hammerjs": "^2.0.8",
    "moment": "^2.19.1",
    "reflect-metadata": "^0.1.10",
    "rimraf": "^2.6.2",
    "rxjs": "^5.5.2",
    "systemjs": "^0.20.19",
    "typescript": "^2.6.1",
    "zone.js": "^0.8.18"
  },

In systemjs.config.js

    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'

        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            //clientapi: 'clientapi',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

            '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
            '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
            '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
            '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
            '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
            '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
            '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
            '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
            '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
            '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
            '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
            '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
            '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
            '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
            '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
            '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            //'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'moment': 'npm:moment/moment.js',

            //temp fix according to https://github.com/ReactiveX/rxjs/issues/2971
            'rxjs/operators': 'npm:rxjs/operators/index.js',
            'rxjs/operators/filter': 'npm:rxjs/operators/filter.js',
            'rxjs/operators/switchMap': 'npm:rxjs/operators/switchMap.js',
            'rxjs/operators/first': 'npm:rxjs/operators/first.js',
            'rxjs/operators/tap': 'npm:rxjs/operators/tap.js',
            'rxjs/operators/delay': 'npm:rxjs/operators/delay.js',
            'rxjs/operators/startWith': 'npm:rxjs/operators/startWith.js',
            'rxjs/operators/catchError': 'npm:rxjs/operators/catchError.js',
            'rxjs/operators/map': 'npm:rxjs/operators/map.js',
            'rxjs/operators/share': 'npm:rxjs/operators/share.js',
            'rxjs/operators/finalize': 'npm:rxjs/operators/finalize.js',
            'rxjs/operators/takeUntil': 'npm:rxjs/operators/takeUntil.js',
            'rxjs/operators/combineLatest': 'npm:rxjs/operators/combineLatest.js',
            'rxjs/operators/debounceTime': 'npm:rxjs/operators/debounceTime.js',
            'rxjs/operators/auditTime': 'npm:rxjs/operators/auditTime.js',
 
            'tslib' : 'npm:tslib/tslib.js'

        },

Then run npm install

And if you are using Angular flex-layout, please check the remarks above.

zijianhuang on Nov 7, 2017

FYI the published package.json has the correct peerDependency version for Angular https://unpkg.com/@angular/material@5.0.0-rc0/package.json

jelbourn on Nov 7, 2017