Updating a package to avoid dependency issues | Angular Community | Page 1

static folio Dec 4, 2022, 10:56 PM

#

Which version or how could I install a @angular/pwa that would be compatible with my current installed version of dependencies? Because I do not want to migrate to v15 material as it seems to have major breaking changes to my website.

My current package.json looks like this:

{
  "name": "catalytic-recycling",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^14.2.5",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/fire": "^7.4.1",
    "@angular/forms": "^14.2.0",
    "@angular/google-maps": "^14.2.6",
    "@angular/material": "^14.2.5",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@ngneat/hot-toast": "^4.1.0",
    "@ngneat/overview": "^3.0.0",
    "@syncfusion/ej2-angular-grids": "^20.3.52",
    "@syncfusion/ej2-angular-navigations": "^20.3.58",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.6",
    "@angular/cli": "~14.2.6",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "autoprefixer": "^10.4.12",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.1.8",
    "typescript": "~4.7.2"
  }
}

sick solstice Dec 4, 2022, 11:07 PM

#

ng add @angular/pwa@14

lament lava Dec 4, 2022, 11:10 PM

#

I thought ng add figured out the compatible @angular/ dependency versions... did you not use ng add to begin with?

static folio Dec 5, 2022, 12:02 AM

#

@lament lava / @sick solstice


UPDATE src/app/app.module.ts (2540 bytes)
UPDATE src/index.html (1016 bytes)
⠦ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: catalytic-recycling@0.0.0
npm ERR! Found: @angular/core@14.2.6
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^14.2.0" from the root project
npm ERR!   peer @angular/core@"14.2.6" from @angular/animations@14.2.6
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^14.2.0" from the root project
npm ERR!     peer @angular/animations@"^14.0.0 || ^15.0.0" from @angular/material@14.2.5
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^14.2.5" from the root project
npm ERR!     1 more (@angular/platform-browser)
npm ERR!   12 more (@angular/cdk, @angular/common, @angular/compiler, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^14.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@14.2.12
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"14.2.12" from @angular/service-worker@14.2.12
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^14.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Rognvald\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Rognvald\AppData\Local\npm-cache\_logs\2022-12-05T00_01_07_315Z-debug-0.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

lament lava Dec 5, 2022, 12:08 AM

#

If you didn't use ng add to begin with, you need to go back to before you did npm install or whatever and the start over installing PWA as documented: https://v14.angular.io/guide/service-worker-getting-started

static folio Dec 5, 2022, 12:14 AM

#

Ok so I did fresh run with ng add and this is the result

UPDATE package.json (1489 bytes)
UPDATE src/app/app.module.ts (2540 bytes)
UPDATE src/index.html (1016 bytes)
⠴ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: catalytic-recycling@0.0.0
npm ERR! Found: @angular/core@14.2.6
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^14.2.0" from the root project
npm ERR!   peer @angular/core@"14.2.6" from @angular/animations@14.2.6
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^14.2.0" from the root project
npm ERR!     peer @angular/animations@"^14.0.0 || ^15.0.0" from @angular/material@14.2.5
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^14.2.5" from the root project
npm ERR!     1 more (@angular/platform-browser)
npm ERR!   12 more (@angular/cdk, @angular/common, @angular/compiler, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^14.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@14.2.12
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"14.2.12" from @angular/service-worker@14.2.12
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^14.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Rognvald\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Rognvald\AppData\Local\npm-cache\_logs\2022-12-05T00_13_26_727Z-debug-0.log
:heavy_multiplication_x: Package install failed, see above.
The Schematic workflow failed. See above.

lament lava Dec 5, 2022, 12:17 AM

#

what is the output of ng version? What is the exact command your ran?

static folio Dec 5, 2022, 12:24 AM

#

ohhh ok so yeah I did the @14

#

which is wrong possibly

#

PS C:\Users\Rognvald\Desktop\Catalytic14\04-12-22 pre pwa with sunfusion carousel - Copy - Copy - Copy - Copy - Copy - Copy> ng add @angular/pwa
ℹ Using package manager: npm
✔ Found compatible package version: @angular/pwa@0.5.3.
✔ Package information loaded.

The package @angular/pwa@0.5.3 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
NOT SUPPORTED: keyword "id", use "$id" for schema ID
PS C:\Users\Rognvald\Desktop\Catalytic14\04-12-22 pre pwa with sunfusion carousel - Copy - Copy - Copy - Copy - Copy - Copy>

#

but then with ng add @angular/pwa I get this error

#

NOT SUPPORTED: keyword "id", use "$id" for schema ID

#

and when I researched it earlier in the day I did not find a good solution

#

sombody mentioned @angular/pwa@latest worked for them

#

but in my situation, it's kinda forcing me to go to v15 angular/material and material v15 is just a mess

#

So in reality if we could get around what ever this error is that should work @lament lava
NOT SUPPORTED: keyword "id", use "$id" for schema ID

lament lava Dec 5, 2022, 12:32 AM

#

04-12-22 pre pwa with sunfusion carousel - Copy - Copy - Copy - Copy - Copy - Copy
https://www.atlassian.com/git

Atlassian

Learn Git - Tutorials, Workflows and Commands | Atlassian

Git is an open source version control system used by programmers to manage their code. Learn about its features and benefits in this tutorial.

#

Version @0.5.3 is from 5 years ago. The fact that ng add tried to add that ancient version likely means your project is very messed up

#

My advice is to create a new angular v14 project. Add your dependencies and then either compare what that created to what you have, or copy over your code from the old project into the new.

#

Since you are using Windows I have no idea how to do that But in *nix is would be:

nvm use 16 # NodeJS LTS v16
npx -p @angular/cli@14 ng new
ng add @angular/pwa

static folio Dec 5, 2022, 12:50 AM

#

you know this is literally what I did

#

like 2 months ago I ported all the stuff over from v9 angular to a fresh v14 project

#

file by file just taking code

#

I feel like at this point just fixing the material bugs created in v15 will be easier route

#

as I got pwa working on an update to v15

static folio Dec 5, 2022, 12:20 PM

#

@lament lava but even on a fresh project

#

PS C:\Users\Rognvald\Desktop\Catalytic14\Catalytic14 pwa\catalytic-recycling> ng add @angular/pwa
ℹ Using package manager: npm
✔ Found compatible package version: @angular/pwa@0.5.3.
✔ Package information loaded.

The package @angular/pwa@0.5.3 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
NOT SUPPORTED: keyword "id", use "$id" for schema ID
PS C:\Users\Rognvald\Desktop\Catalytic14\Catalytic14 pwa\catalytic-recycling> ```

#

I just did ng new catalytic-recycling

{
  "name": "catalytic-recycling",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/pwa": "^0.5.3",
    "@angular/router": "^14.2.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.6",
    "@angular/cli": "~14.2.6",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

sick solstice Dec 5, 2022, 12:27 PM

#

remove this
"@angular/pwa": "^0.5.3",

static folio Dec 5, 2022, 12:38 PM

#

and then what? delete node folder and re-install?

#

this is a complete fresh project with ng new catalytic-recycling and then ng add @angular/pwa

#

PS C:\Users\Rognvald\Desktop\Catalytic14\catpwa14> node -v
v16.13.1
PS C:\Users\Rognvald\Desktop\Catalytic14\catpwa14> npm -v
8.6.0

#

this should not be causing any problems right?

#

it's surprising to me that I can't do a basic new project with pwa

sick solstice Dec 5, 2022, 12:43 PM

#

Try using Node14 or ^16.10

static folio Dec 5, 2022, 12:44 PM

#

I need to start bookmarking these adventures of changing node versions

#

it evaporates from my brain

static folio Dec 5, 2022, 1:03 PM

#

@sick solstice

:information_source: Using package manager: npm
:heavy_check_mark: Found compatible package version: @angular/pwa@0.5.3.
:heavy_check_mark: Package information loaded.

The package @angular/pwa@0.5.3 will be installed and executed.
Would you like to proceed? (Y/n)```

#

could you try creating a v14 angular project with pwa?

#

this was with 16.10.0 node

#

@sick solstice

PS C:\Users\Rognvald\Desktop\Catalytic14\catpwa14\catalyticRecycling> npm version
{
  'catalytic-recycling': '0.0.0',
  npm: '8.6.0',
  node: '16.10.0',
  v8: '9.3.345.19-node.14',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.2',
  modules: '93',
  nghttp2: '1.42.0',
  napi: '8',
  llhttp: '6.0.2',
  openssl: '1.1.1l+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}
PS C:\Users\Rognvald\Desktop\Catalytic14\catpwa14\catalyticRecycling> ng version

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.10       
Node: 16.10.0
Package Manager: npm 8.6.0 
OS: win32 x64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            14.2.10
@angular-devkit/schematics      14.2.10
@angular/cli                    14.2.10
@schematics/angular             14.2.10
rxjs                            7.5.7
typescript                      4.7.4

#

wait I might just be stupid

#

so when I do ng add @angular/pwa@latest

#

it works fine

#

but when I SERVE ... it does not cache it offline

#

OFC DUHHH

#

i need to build right ?

lament lava Dec 5, 2022, 1:14 PM

#

~$ nvm use 16
Now using node v16.17.1 (npm v8.15.0)
~$ npx -p @angular/cli@14 ng new
Need to install the following packages:
  @angular/cli@14.2.10
Ok to proceed? (y) y
? What name would you like to use for the new workspace and initial project? demo-v14
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE demo-v14/README.md (1062 bytes)
CREATE demo-v14/.editorconfig (274 bytes)
CREATE demo-v14/.gitignore (548 bytes)
CREATE demo-v14/angular.json (3106 bytes)
CREATE demo-v14/package.json (1041 bytes)
CREATE demo-v14/tsconfig.json (863 bytes)
CREATE demo-v14/.browserslistrc (600 bytes)
CREATE demo-v14/karma.conf.js (1425 bytes)
CREATE demo-v14/tsconfig.app.json (287 bytes)
CREATE demo-v14/tsconfig.spec.json (333 bytes)
CREATE demo-v14/.vscode/extensions.json (130 bytes)
CREATE demo-v14/.vscode/launch.json (474 bytes)
CREATE demo-v14/.vscode/tasks.json (938 bytes)
CREATE demo-v14/src/favicon.ico (948 bytes)
CREATE demo-v14/src/index.html (293 bytes)
CREATE demo-v14/src/main.ts (372 bytes)
CREATE demo-v14/src/polyfills.ts (2338 bytes)
CREATE demo-v14/src/styles.scss (80 bytes)
CREATE demo-v14/src/test.ts (749 bytes)
CREATE demo-v14/src/assets/.gitkeep (0 bytes)
CREATE demo-v14/src/environments/environment.prod.ts (51 bytes)
CREATE demo-v14/src/environments/environment.ts (658 bytes)
CREATE demo-v14/src/app/app-routing.module.ts (245 bytes)
CREATE demo-v14/src/app/app.module.ts (393 bytes)
CREATE demo-v14/src/app/app.component.scss (0 bytes)
CREATE demo-v14/src/app/app.component.html (23115 bytes)
CREATE demo-v14/src/app/app.component.spec.ts (1079 bytes)
CREATE demo-v14/src/app/app.component.ts (213 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
~$ cd demo-v14/
~/.../demo-v14 (main)$ npx ng add @angular/pwa
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No
Global setting: enabled
Local setting: disabled
Effective status: disabled
ℹ Using package manager: npm
✔ Found compatible package version: @angular/pwa@0.5.3.
✔ Package information loaded.

The package @angular/pwa@0.5.3 will be installed and executed.
Would you like to proceed? No
Command aborted.
~/.../demo-v14 (main *)$ npx ng add @angular/pwa@14
ℹ Using package manager: npm
✔ Package information loaded.

The package @angular/pwa@14 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
CREATE ngsw-config.json (631 bytes)
CREATE src/manifest.webmanifest (1340 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (3314 bytes)
UPDATE package.json (1083 bytes)
UPDATE src/app/app.module.ts (797 bytes)
UPDATE src/index.html (475 bytes)
✔ Packages installed successfully.
~/.../demo-v14 (main *)$

#

I think the first thing 4javier suggested was ng add @angular/pwa@14 🙂

static folio Dec 5, 2022, 1:15 PM

#

yeaahh or @latest works too

lament lava Dec 5, 2022, 1:15 PM

#

latest would be v15, which would not be v14 🙂

static folio Dec 5, 2022, 1:15 PM

#

but the way I was validating if it worked fine

#

was tupid

#

for some reason it seems to be smart enough to not do v15

#

{
  "name": "catalytic-recycling",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@angular/service-worker": "^14.2.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.6",
    "@angular/cli": "~14.2.6",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

#

result after latest let me build now

#

and launch that http thing majig

#

and see if it works offline

#

thanks lord almighty I dont have to go v15 material

#Updating a package to avoid dependency issues