primeng 17 requires @angular/common 17, failed to use angular 18

[learnfromfail]

As titled, please help . I am targeted to learn RxJs.

I discovered that for everyone, if you want to follow the book to learn, you may go back to the commit before trying to upgrade angular package to 18.

[learnfromfail]

P.96
Private filterRecipeSubject = new BehaviorSubject({title:''});
P is capital letter.

[learnfromfail]

P.103
"""concatMap""" will issue a GET request for every unique user’s
input and ensure only the latest search results are displayed, canceling previous requests.

concatMap should be switchMap.

Up to now, I found the book is well-written. You explain very well

[bfutrell70]

I recently started working with this book and encountered the same issue with the repository at page 26.

On my fork of the repository, I did the following for the Chap03 folder:

recipes-book-front folder

package.json

• updated primeng version to 18.0.2-patch.1 (the latest version of 18 is 18.0.7-lts, but it appears that LTS versions of primeng require a license)
• devDependencies - added @primeng/themes version 18.0.2-patch.1
  (primeng version 18+ removed the themes from the primeng package and added them to @primeng/themes)

angular.json

• in the styles section, remove the two primeng CSS files since they don't exist in version 18+

app.module.ts

• add the following imports:

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura'

• add the following lines under provideHttpClient(withInterceptorsFromDi()):

provideAnimationsAsync(),
providePrimeNG({
  theme: {
	preset: Aura
  }
})

(The saga-blue primeng theme does not exist in version 18+)

recipes-list-component.html

• on line 19, remove the [cancel] attribute and value from the p-rating component (the cancel attribute for the p-rating component doesn't exist as of version 18)

After the above changes were made, the front-end project finally ran. Whether it actually works as designed is unknown since the book had an illustration of what it was supposed to look like instead of a screenshot. I get no recipe cards, but it does show that 11 recipes were retrieved.

[bfutrell70]

I attempted to continue trying to use Angular 18, but had issues with PrimeNG 18. It doesn't have built-in support for the grid layout in the DataView component, requiring the use of TailwindCSS. I added TailwindCSS along with its support libraries and ended up with a project that couldn't be built.

Since I am reading this book to learn about reactive patterns and Angular Signals and not fight a project what wasn't working I reverted to Angular 17 and now everything works - at least for chapter 3.

It seems that the author thought changing the Angular packages to version 18 was sufficient to upgrade the projects, but unfortunately that isn't the case. If the projects were tested after updating the Angular packages then that would have been easily discovered.

Here is what I changed in the package.json file in Chap03\recipes-book-front to downgrade to Angular 17:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "bootstrap": "5.0.0",
    "primeflex": "3.3.1",
    "primeicons": "6.0.1",
    "primeng": "17.10.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular-eslint/builder": "^17.3.0",
    "@angular-eslint/eslint-plugin": "^17.3.0",
    "@angular-eslint/eslint-plugin-template": "^17.3.0",
    "@angular-eslint/schematics": "^17.3.0",
    "@angular-eslint/template-parser": "^17.3.0",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "4.3.0",
    "@typescript-eslint/eslint-plugin": "7.2.0",
    "@typescript-eslint/parser": "7.2.0",
    "eslint": "8.57.0",
    "jasmine-core": "4.6.0",
    "karma": "6.4.0",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage": "2.2.0",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "typescript": "5.4.2"
  }

I looked at the package.json file in other chapters and they all need to be changed to work