-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
npm install of latest 5.0.0-rc0 fails against latest angular #8263
Comments
I have similar experience, my output is as follows
The aforementioned workaround is: npm install --save @angular/material@2.0.0-beta.12 @angular/cdk@2.0.0-beta.12 <-- @ signs were missing |
Can you try entirely removing your
|
After another look, it appears that your applications are requiring angular |
FYI the published |
I am already using Angular5: "dependencies": {
"@angular/animations": "^5.0.0",
"@angular/cdk": "^2.0.0-beta.12",
"@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-4905443",
"@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"
}, but npm insists on installing Material 12, since I had tried:
or
|
I think that 5.0.0-rc0 is using HttpClient of NG5. So in systemjs.config.js, you need to add: Then the runtime will complain about some cdk components, then add these:
Then the runtime will complain: apparently this is related to a bug in rxjs as documented at ReactiveX/rxjs#2971 |
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 Step2: install material 5 Step 3: declare HttpClient of NG5 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:
|
(cont.) 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 And if you are using Angular flex-layout, please check the remarks above. |
It looks like my original report is false. |
@bobtarling , the getting started guide is good for getting started. If you have been developing applications along with Angular 2/4/5 and Material2 Beta 12, when upgrading, you may see a lot complains from various dependencies. Hopefully NG and MD teams will fix the defects in next release, while my solution/workaround above could be good enough at this stage. |
@zijianhuang would you mind post your full package.json and systemjs.config.js here, following your instructions, still fails |
@Longfld , what I had posted is almost the whole package.json and systemjs.config.js. Have you cleared the browser cache? If you are not sure, try to check all checkboxes of clearing history. If you are using Windows and Visual Studio ASP.NET, you may clear %temp% and C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files etc. And in my own dev machine, if I launch the NG2 WebApp using VS 2017 IDE, IIS and Chrome, Chrome's console is still giving various error messages. However, with IE, FF and Edge, no problem. Strange enough, if I launch IIS Express hosting the app without VS IDE, Chrome just run my app correctly. And if I copy all copy all codes to local IIS, and the test server IIS, all things on all browsers are just working fine. And other dev machines has no such problem. In short, cache could be the cause of the problem. In addition to the caches I had mentioned, VS IDE and Chrome together had used some old stuffs cached somewhere I haven't yet known. So you may test with other browsers in other environments to rule out the interruption from mysterious cache. I may be writing a blog soon when I have some hours, also talk about versioning of files. |
Closing as the |
Hi! Old package.json {
"name": "ng-material-starter",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "4.1.0",
"@angular/common": "4.1.0",
"@angular/compiler": "4.1.0",
"@angular/core": "4.1.0",
"@angular/forms": "4.1.0",
"@angular/http": "4.1.0",
"@angular/material": "2.0.0-beta.5",
"@angular/platform-browser": "4.1.0",
"@angular/platform-browser-dynamic": "4.1.0",
"@angular/router": "4.1.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"material-design-icons": "^3.0.1",
"normalize.css": "^7.0.0",
"roboto-fontface": "^0.7.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cdk": "^2.0.0-beta.8",
"@angular/cli": "^1.1.2",
"@angular/compiler-cli": "4.1.0",
"@angular/language-service": "4.1.0",
"@angular/service-worker": "^1.0.0-beta.15",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
} New {
"name": "ng-material-starter",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/router": "^5.0.0",
"@angular/material": "2.0.0-beta.5",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"material-design-icons": "^3.0.1",
"normalize.css": "^7.0.0",
"roboto-fontface": "^0.7.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/language-service": "^4.2.4",
"@angular/service-worker": "^1.0.0-beta.15",
"@angular/platform-browser-dynamic": "^5.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.4.2"
}
} Important: when you change package.json file, don't forget for remove |
This issue was closed. I had mentioned I might will be writing a blog based on my responses here. Published a few days ago, here you are: https://www.codeproject.com/Tips/1213737/Upgrade-to-Angular-and-HttpClient |
By Installing the failed UNMET dependencies globally one by one will help you, Because it's worked for me. example : npm install -g @angular/common@4.4.6. |
This issue is not fixed... I tried to install MEAN stack and there is an error... not sure where to log it.. gyp ERR! build error npm ERR! code ELIFECYCLE npm ERR! A complete log of this run can be found in: |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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
The text was updated successfully, but these errors were encountered: