‼ Unable to find compatible package. Using 'latest' tag.
‼ Package has unmet peer dependencies. Adding the package may not succeed.

The package @clr/[email protected] will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.0" from @clr/[email protected]
npm ERR! node_modules/@clr/angular
npm ERR! @clr/angular@"12.0.7" from the root project

How does one resolve this? I tried downgrading the @angular/common libraries but was unsuccessful in getting this to install.

Here should be have three (or two) equals operators. The current declaration it's assigning value instead comparing it:

- Current version:
const existingIssue = this.issues.find(i => i.issueNo = issueNo);

- Bugfix version:
const existingIssue = this.issues.find(i => i.issueNo === issueNo);

NOTE: Cheers, i'm enjoying your book!!

Any chance we will see some updated steps for Angular 13 or 14 now that is is released?
A lot of the code in the book doesn't seem to work with the newer versions, mostly because certain plugins are running on old version numbers.

https://github.com/PacktPublishing/Angular-Projects-Second-Edition/blob/main/Chapter04/src/app/app.component.ts uses deprecated "available", and gets the following message:

(property) SwUpdate.available: Observable
Emits an UpdateAvailableEvent event whenever a new app version is available.

@deprecated
Use versionUpdates instead.

The of behavior available can be rebuild by filtering for the VersionReadyEvent:

import {filter, map} from 'rxjs/operators';
// ...
const updatesAvailable = swUpdate.versionUpdates.pipe(
filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'),
map(evt => ({
type: 'UPDATE_AVAILABLE',
current: evt.currentVersion,
available: evt.latestVersion,
})));

I'm trying to figure out how to add the snackbar and other actions but don't have it yet. Ideas?! Thx!

The path of least resistance is using the compatibility mode (@angular/fire/* changes to @angular/fire/compat/*). Alternatively, at an appropriate juncture, code compatible with the new API could be implemented. The angularfire doc linked below currently warns, "the new API isn't feature complete."

See https://github.com/angular/angularfire/blob/master/docs/version-7-upgrade.md and https://stackoverflow.com/a/68939303.

Hello, I am working on Chapter 5 (WYSIWYG Editor) and after installing ngx-wig, I have been getting these kinds of errors:

Error: ../../../../../node_modules/ngx-wig/lib/ngx-wig.module.d.ts:15:25 - error TS2694: Namespace '"/Users/xxx/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

15     static ɵinj: ɵngcc0.ɵɵInjectorDeclaration<NgxWigModule>;

I followed the book scripts exactly.

Here's my Angular Set-up:

Angular CLI: 12.1.4
Node: 14.17.4
Package Manager: npm 7.20.3
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.4
@angular-devkit/build-angular   12.1.4
@angular-devkit/core            12.1.4
@angular-devkit/schematics      12.1.4
@schematics/angular             12.1.4
rxjs                            6.6.7
typescript                      4.3.5

All other previous scripts and new test project installs work with ng-serve. But this one doesn't work. I only get Cannot GET / on the page.

Hope you can help. Really looking forward to this chapter. Thanks!

Please add more information when and why you do this and that.

I have written the crud-service schematic in Angular 14 so this may probably be an issue related to the Angular version, I thought of mentioning it since it took me a while to find the solution and I am afraid others could also struggle with it

After creating the crud-service schematic I kept getting the following error:

   Error: Unknown argument: name

But everything I wrote was the same as the code in this repo, the only way I could find to fix it is by adding @schematics/angular to the schematics project dependencies and then update the collection.json file in the following way:

    "crud-service": {
      "description": "Generate a CRUD HTTP service",
      "factory": "./crud-service/index#crudService",
+      "schema": "../node_modules/@schematics/angular/service/schema.json"
    }

I assume that now Angular prevents unspecified options to be provided or something of that sort? 🤔

Please let me know what you think 🙂 (and if you believe I am missing something)

In the contact component the image is referenced as assets/angular.png . This works when using ng serve but will break when serving the project with scully.
The fix I found is to use a relative path (although it might not look as clean)

<img class="card-img-top" src="../../assets/angular.png" alt="Angular Logo">

Hi. I am running new Angular 13 and this line does not really work properly.
I am getting a weird communicate that: Type 'Subscription' is missing the following properties from type 'Subscription' (on this.routeSub). Have you worked that out by any chance?