Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

npm install of latest 5.0.0-rc0 fails against latest angular

See original GitHub issue

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

Issue Analytics

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

Top GitHub Comments

7reactions

zijianhuangcommented, Nov 7, 2017

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

2reactions

zijianhuangcommented, 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.