Angular-cli project cross platform build issue - node.js

I've created experimental angular-cli project on Mac. Than I've moved it onto ubuntu and cant build:
$ npm install
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.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
& start one:
$ ng serve
Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null
at Class.run (/project-path/node_modules/#angular/cli/tasks/serve.js:51:63)
at check_port_1.checkPort.then.port (/project-path/node_modules/#angular/cli/commands/serve.js:123:26)
at process._tickCallback (internal/process/next_tick.js:103:7)
I confused, because it worked perfectly on Mac.
Env details
$ npm -v
4.0.5
$ node -v
v7.4.0
$ ng -v
Angular CLI: 1.5.5
Node: 7.4.0
OS: linux x64
Angular: 5.0.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cdk: 5.0.0-rc0
#angular/cli: 1.5.5
#angular/material: 5.0.0-rc0
#angular-devkit/build-optimizer: 0.0.34
#angular-devkit/core: 0.0.22
#angular-devkit/schematics: 0.0.39
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.8.5
#schematics/angular: 0.1.9
typescript: 2.4.2
webpack: 3.8.1
I've found also answer npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.0.14 it partly describes the messages, but it doesn't help me with my project running. (It can't be started any way).

To make my project runnable on Ubuntu I need a missed file on Mac (it seems mac does not need one) - .angular-cli.json:
{
"name": "angular4-in60-minutes",
"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.1",
"#angular/cdk": "^5.0.0-rc0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#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/router": "^5.0.0",
"bootstrap": "^3.2.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"popper.js": "^1.12.9",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.0",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.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.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
After adding this file my project can be started correctly. But issue with warnings present anyway
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.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Related

Heroku-postbuild error when deploying nodejs and angular to heroku

I have a app that is currently deployed on heroku and working perfectly fine. I created a new heroku app and tried to run the same branch. I installed nodejs and all the configuration is the same but for some reason the build is failing at heroku-postbuild: "ng build --prod". It works fine on the previous instance I have on heroku but wont work on the new one. I don't know what i am missing as the information on the error is minimal. I am attaching my package.json as well as the error message I get. any help will be appreciated and let me know if you need me to upload anything else.
package.json
{
"name": "eserver",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"main": "server.js",
"heroku-postbuild": "ng build --prod",
"preinstall": "npm install -g #angular/cli #angular/compiler-cli typescript",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^11.0.5",
"#angular/cdk": "^11.0.3",
"#angular/common": "^11.0.5",
"#angular/compiler": "11.0.5",
"#angular/compiler-cli": "^11.0.5",
"#angular/core": "^11.0.5",
"#angular/flex-layout": "^11.0.0-beta.33",
"#angular/forms": "^11.0.5",
"#angular/localize": "^11.0.5",
"#angular/material": "^11.0.3",
"#angular/platform-browser": "11.0.5",
"#angular/platform-browser-dynamic": "11.0.5",
"#angular/router": "11.0.5",
"ng2-charts-schematics": "^0.1.7",
"#angular-devkit/build-angular": "^0.1100.5",
"#angular/cli": "11.0.5",
"#angular/language-service": "^11.0.5",
"#fortawesome/fontawesome-free": "^5.15.1",
"#types/chartist": "^0.11.0",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/lodash": "^4.14.135",
"#types/node": "^8.10.66",
"#types/uuid": "^8.3.0",
"angular-cli-ghpages": "^0.6.2",
"protractor": "^7.0.0",
"ts-node": "~5.0.1",
"#ng-bootstrap/ng-bootstrap": "^5.3.1",
"#ng-bootstrap/schematics": "^2.0.0-alpha.1",
"#ngtools/webpack": "^11.0.5",
"#ngx-translate/core": "13.0.0",
"#ngx-translate/http-loader": "^4.0.0",
"#types/chart.js": "^2.7.42",
"#types/express": "^4.17.0",
"#types/w3c-web-usb": "^1.0.4",
"#types/web-bluetooth": "0.0.4",
"angular-bootstrap-md": "^7.4.3",
"angular-cc-library": "^2.1.2",
"angular-notifier": "^4.1.1",
"angular-responsive-carousel": "^2.0.2",
"angular5-csv": "^0.2.11",
"apexcharts": "^3.25.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"bootstrap": "^4.5.3",
"chart.js": "^2.9.4",
"chartist": "^0.11.4",
"config": "^3.3.6",
"core-js": "^2.5.4",
"cors": "^2.8.5",
"css-loader": "^2.1.0",
"dotenv": "^6.1.0",
"exec": "^0.2.1",
"express": "^4.16.4",
"express-jwt": "^5.3.1",
"express-sslify": "^1.2.0",
"font-awesome": "^4.7.0",
"fontawesome": "^5.6.3",
"got": "^11.8.1",
"hammerjs": "^2.0.8",
"jsonwebtoken": "^8.2.2",
"ldbutton": "^1.0.2",
"lodash": "^4.17.11",
"mat-table-exporter": "^1.0.2",
"material-design-lite": "^1.3.0",
"mdb-angular-ui-kit": "^1.0.0-alpha3",
"mdbootstrap": "^4.19.2",
"mongodb": "^3.0.10",
"mongoose": "^5.1.4",
"ng-apexcharts": "^1.5.8",
"ng-chartist": "^4.1.0",
"ng-multiselect-dropdown": "^0.2.3",
"ng-thermal-print": "^1.0.3",
"ng2-charts": "^2.4.2",
"ngx-autosize": "^1.8.4",
"ngx-bootstrap": "^6.2.0",
"ngx-chess-board": "^2.0.7",
"node-sass": "^4.14.1",
"path": "^0.12.7",
"popper.js": "^1.15.0",
"pusher": "^2.2.0",
"pusher-js": "^4.4.0",
"readable-stream": "^3.6.0",
"remote-pay-cloud": "3.1.0",
"remote-pay-cloud-api": "^4.0.3",
"request": "^2.88.2",
"request-promise": "^4.2.4",
"resize-base64": "^1.0.12",
"rootpath": "^0.1.2",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.3.3",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.9.0",
"typescript": "4.0.5",
"uuid": "^3.3.2",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/core": "^11.0.5",
"#angular-devkit/schematics": "^11.0.5",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"ng2-charts-schematics": "^0.1.7",
"protractor": "^7.0.0",
"ts-node": "~5.0.1",
"tslint": "~6.1.3"
},
"engines": {
"node": "10.13",
"npm": "6.9.0"
}
}
log and Error I am getting when deploying on heroku:
Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 10.13
engines.npm (package.json): 6.9.0
Resolving node version 10.13...
Downloading and installing node 10.13.0...
Bootstrapping npm 6.9.0 (replacing 6.4.1)...
npm 6.9.0 installed
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules (package.json)
> eserver#0.0.0 preinstall /tmp/build_d00ecea7
> npm install -g #angular/cli #angular/compiler-cli typescript
/tmp/build_d00ecea7/.heroku/node/bin/ng -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/cli/bin/ng.js
/tmp/build_d00ecea7/.heroku/node/bin/ngcc -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/compiler-cli/bundles/ngcc/main-ngcc.js
/tmp/build_d00ecea7/.heroku/node/bin/ngc -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/compiler-cli/bundles/src/bin/ngc.js
/tmp/build_d00ecea7/.heroku/node/bin/ng-xi18n -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/compiler-cli/bundles/src/bin/ng_xi18n.js
/tmp/build_d00ecea7/.heroku/node/bin/tsc -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/typescript/bin/tsc
/tmp/build_d00ecea7/.heroku/node/bin/tsserver -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/typescript/bin/tsserver
> #angular/cli#13.1.4 postinstall /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/cli
> node ./bin/postinstall/script.js
+ #angular/cli#13.1.4
+ typescript#4.5.5
+ #angular/compiler-cli#13.1.3
added 271 packages from 168 contributors in 10.621s
audited 2004 packages in 17.813s
found 45 vulnerabilities (2 low, 26 moderate, 17 high)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Detected both "build" and "heroku-postbuild" scripts
Running heroku-postbuild
> eserver#0.0.0 heroku-postbuild /tmp/build_d00ecea7
> npm i && ng build --prod
> eserver#0.0.0 preinstall /tmp/build_d00ecea7
> npm install -g #angular/cli #angular/compiler-cli typescript
/tmp/build_d00ecea7/.heroku/node/bin/ng -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/cli/bin/ng.js
/tmp/build_d00ecea7/.heroku/node/bin/ngc -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/compiler-cli/bundles/src/bin/ngc.js
/tmp/build_d00ecea7/.heroku/node/bin/ng-xi18n -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/compiler-cli/bundles/src/bin/ng_xi18n.js
/tmp/build_d00ecea7/.heroku/node/bin/ngcc -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/compiler-cli/bundles/ngcc/main-ngcc.js
/tmp/build_d00ecea7/.heroku/node/bin/tsc -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/typescript/bin/tsc
/tmp/build_d00ecea7/.heroku/node/bin/tsserver -> /tmp/build_d00ecea7/.heroku/node/lib/node_modules/typescript/bin/tsserver
> #angular/cli#13.1.4 postinstall /tmp/build_d00ecea7/.heroku/node/lib/node_modules/#angular/cli
> node ./bin/postinstall/script.js
+ #angular/compiler-cli#13.1.3
+ #angular/cli#13.1.4
+ typescript#4.5.5
updated 3 packages in 3.453s
audited 2004 packages in 11.332s
found 45 vulnerabilities (2 low, 26 moderate, 17 high)
run `npm audit fix` to fix them, or `npm audit` for details
'node-sass' usage is deprecated and will be removed in a future major version. To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.
- Generating browser application bundles...
✔ Browser application bundle generation complete.
Error: compiler_1.getMissingNgModuleMetadataErrorData is not a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! eserver#0.0.0 heroku-postbuild: `npm i && ng build --prod`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the eserver#0.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.CSj5i/_logs/2022-01-26T03_37_12_096Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
Check if HEROKU_API_KEY is correct and that heroku_app_name is unique. Also this line seems sketcy: Detected both "build" and "heroku-postbuild" scripts Running heroku-postbuild. Maybe refactor heroku-postbuild in build and run only build.
"scripts": {
"ng": "ng",
"main": "server.js",
"preinstall": "npm install -g #angular/cli #angular/compiler-cli typescript",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
I managed to solve the issue by changing the version of #angular/compiler-cli and #angular/compiler versions.

npm install doesn't install dependencies in Angular project

I have an Angular project. When I run npm install I see some errors and dependencies don't appear in node_modules folder. However, I think none of the errors explain the problem. I see some deprecation warnings and 404 for one dependency, but nothing more.
Here is my package.json:
{
"name": "my-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.0.0",
"#angular/cdk": "^9.1.0",
"#angular/common": "~9.0.0",
"#angular/compiler": "~9.0.0",
"#angular/core": "~9.0.0",
"#angular/forms": "~9.0.0",
"#angular/material": "^9.1.0",
"#angular/platform-browser": "~9.0.0",
"#angular/platform-browser-dynamic": "~9.0.0",
"#angular/router": "~9.0.0",
"#css-pkg/circular-std": "^2.0.0",
"#fortawesome/fontawesome-free": "^5.12.1",
"#syncfusion/ej2-angular-calendars": "^18.1.44",
"#types/jquery": "^3.3.38",
"alertifyjs": "^1.13.1",
"angular-mat-datepicker": "0.0.2",
"angular-material": "^1.1.21",
"angularx-qrcode": "^2.1.1",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"material-steppers": "^2.0.0",
"popper.js": "^1.16.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.900.4",
"#angular/cli": "~9.0.1",
"#angular/compiler-cli": "~9.0.0",
"#angular/language-service": "~9.0.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
And here is the log output:
npm WARN deprecated popper.js#1.16.1: You can find the new Popper v2 at #popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#css-pkg%2fcircular-std - Not found
npm ERR! 404
npm ERR! 404 '#css-pkg/circular-std#^2.0.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'traveler-frontend'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mac/.npm/_logs/2020-06-16T20_33_51_531Z-debug.log
Remove "#css-pkg/circular-std": "^2.0.0", line. Because it's not found in the npm package registry. Try npm install again.
The error says #css-pkg/circular-std can't be found. That package may be removed from npm directory. While searching the package I couldn't find it in the directory.

with angular cli the project stop at 10% building modules 3/3 modules 0 active

after giving the ng command serve the build of the project it stops at 10% after which it compiles without giving errors open localhost: 4200 I only get a blank page. I tried to create a new project by typing ng new my-app from the command line, even here the build stops at 10% but at least the initial page of the default program can be seen.
i tried to create a new project by typing ng new my-app from the command line, even here the build stops at 10% but at least the initial page of the default program can be seen.I tried to reinstall angular, nodejs etc. but nothing has changed. I use windows 10.
my package.json file:
{
"name": "smart-box",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.3",
"#angular/common": "^8.2.3",
"#angular/compiler": "^8.2.3",
"#angular/core": "^8.2.3",
"#angular/forms": "^8.2.3",
"#angular/http": "^7.2.15",
"#angular/platform-browser": "^8.2.3",
"#angular/platform-browser-dynamic": "^8.2.3",
"#angular/platform-server": "^8.2.3",
"#angular/router": "^8.2.3",
"resolve-url-loader": "^3.1.0",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.2",
"tslib": "^1.10.0",
"webpack": "^4.39.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.802.2",
"#angular/cli": "~8.2.2",
"#angular/compiler-cli": "^8.2.3",
"#angular/language-service": "~8.2.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.9.5",
"#types/webpack-env": "^1.14.0",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "^3.5.3"
}
}
other information:
Angular CLI: 8.2.2
Node: 10.16.3
OS: win32 x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.802.2
#angular-devkit/build-angular 0.802.2
#angular-devkit/build-optimizer 0.802.2
#angular-devkit/build-webpack 0.802.2
#angular-devkit/core 8.2.2
#angular-devkit/schematics 8.2.2
#angular/cli 8.2.2
#angular/http 7.2.15
#ngtools/webpack 8.2.2
#schematics/angular 8.2.2
#schematics/update 0.802.2
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2

NPM peer dependencies - options for resolution?

First-off, I am new to NodeJs and NPM so thanks in advance for any clarification that anyone can offer me.
This is a question about peer dependencies and warnings given by NPM during package installs. The NPM docs and other questions on StackOverflow don't seem to answer my exact questions about what I can/should do to resolved these dependency issues.
Actually, Everything I have tried seems to have made things worse I am now completely confused.
Starting from a fresh install of the latest Angular CLI I created a new Angular 5 project. To this I have added Angular Material.
When I added Angular flex-layout I got the following warnings:
npm WARN #angular/flex-layout#2.0.0-beta.10-4905443 requires a peer of #angular/core#~4.4.4 but none is installed. You must install peer dependencies yourself.
npm WARN #angular/flex-layout#2.0.0-beta.10-4905443 requires a peer of #angular/common#~4.4.4 but none is installed. You must install peer dependencies yourself.
Adding angular-split adds the following:
npm WARN angular-split#0.2.7 requires a peer of #angular/common#^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-split#0.2.7 requires a peer of #angular/core#^4.0.0 but none is installed. You must install peer dependencies yourself.
I have done some successful experiments with angular-layout but angular-split does not seem to be working correctly. The examples on the author's website are fine so I suspect that this might be because it doesn't have the Angular version it is expecting.
Do these warnings imply that I can install the required versions of Angular components side-by-side with the primary versions used by my code to satisfy these libraries' requirements?
Alternatively, do they really mean that flex-layout and angular-split are not fully compatible with the version of Angular that I am using (and therefore I can't use them until they are updated).
In summary, can different versions of the same module co-exist in a project, and if so, what steps do I need to take because all I have done so far is get myself in a dreadful mess.
This is what my packages.json file looks like:
{
"name": "angular-test4",
"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/cdk": "^5.0.0-rc.2",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.3",
"#angular/flex-layout": "^2.0.0-beta.10-4905443",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/material": "^5.0.0-rc.2",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"angular-split": "^0.2.7",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.4",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.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.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}

NPM peer Dependencies

I'm at the moment upgrading from Angular 4 to Angular 5 and received some warnings after that, for example:
npm WARN #angular/compiler-cli#5.0.1 requires a peer of typescript#>=2.4.2 <2.5 but none is installed. You must install peer dependencies yourself.
npm WARN #covalent/core#1.0.0-beta.8-1 requires a peer of #angular/common#^4.4.3 but none is installed. You must install peer dependencies yourself.
npm WARN #covalent/core#1.0.0-beta.8-1 requires a peer of #angular/core#^4.4.3 but none is installed. You must install peer dependencies yourself.
npm WARN #covalent/core#1.0.0-beta.8-1 requires a peer of #angular/forms#^4.4.3 but none is installed. You must install peer dependencies yourself.
npm WARN #covalent/core#1.0.0-beta.8-1 requires a peer of #angular/http#^4.4.3 but none is installed. You must install peer dependencies yourself.
npm WARN #covalent/core#1.0.0-beta.8-1 requires a peer of #angular/router#^4.4.3 but none is installed. You must install peer dependencies yourself.
npm WARN #covalent/core#1.0.0-beta.8-1 requires a peer of #angular/cdk#^2.0.0-beta.12 but none is installed. You must install peer dependencies yourself.
npm WARN #covalent/core#1.0.0-beta.8-1 requires a peer of #angular/material#^2.0.0-beta.12 but none is installed. You must install peer dependencies yourself.
This is my package.json
{
"name": "myAngularProject",
"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/cdk": "^5.0.0-rc0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#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/router": "^5.0.0",
"#covalent/core": "^1.0.0-beta.8-1",
"#ng-dynamic-forms/core": "^1.4.34",
"#ng-dynamic-forms/ui-material": "^1.4.34",
"ag-grid": "^13.3.1",
"ag-grid-angular": "^13.3.0",
"angular-in-memory-web-api": "^0.3.2",
"core-js": "^2.5.1",
"ng2-dnd": "^4.2.0",
"rxjs": "^5.5.2",
"webpack": "^3.8.1",
"zone.js": "^0.8.18"
},
"devDependencies": {
"#angular/cli": "^1.5.0",
"#angular/compiler-cli": "^5.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.90",
"codelyzer": "~2.0.0",
"install-peers": "^1.0.2",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "^2.3.4"
},
}
My question is now, how do I add those peer dependencies manually and where? I've searched for ways to add them automatically but they do not work.
NOTE:
You don't have to add any peer dependencies, yourself. The message is only displaying that you have unmet dependencies, and I believe you can continue using #covalent package unless something breaks as these are warnings.
This seems to be an issue with the package #covalent as it depends upon #angular4 and it's respective packages and appears to be incompatible . Since there are few breaking changes from angular4 and angular5. So this is an expected behavior.
You have two options now precisely:
Submit PR to the said repository, so you can get a fix asap.
Wait for #covalent to release an update for #angular5, and once the update is out, you can safely update both #angular4 itself and #covalent as well.

Resources