Skip to main content

Angular VS React 2024

https://youtu.be/K9vBpIq8Wck?si=2vbxsVfUgXuBX41b

schematics

ng config schematics.@schematics/angular:component.style scss

Angular 17​

  1. ng update @angular/core@17 @angular/cli@17
  2. npm install bootstrap@5.3.2 @popperjs/core@2.11.8 @ng-bootstrap/ng-bootstrap@16.0.0

How can I check which version of Angular from browser?​

console command to tell angular version from live website

getAllAngularRootElements()[0].attributes["ng-version"];

Standalone Compoonents​

  • available in v14+
  • no longer need module

ESBuild​

faster

Blog​

ng update @angular/core@17 @angular/cli@17 --force

Upgrade​

  • must do git commit before running

14 to 15​

  • Angular v15 supports node.js versions: 14.20.x, 16.13.x and 18.10.x.

ng update @angular/core@15 @angular/cli@15

Run ng update @angular/core@14 @angular/cli@14 --force (replace 14 with your current versions if different). This command attempts the update while ignoring peer dependency warnings, but it's crucial to identify and address them later.​

Carefully review the console output for warnings about incompatible peer dependencies. These warnings will specify the dependency name and its conflicting version requirement.

updating page title​

import { Title } from '@angular/platform-browser';

 constructor (private titleService: Title) {}

this.titleService.setTitle('Ambitious Royalty | DJ & Nightlife Promotions');

15 to 16​

ng update @angular/core@16 @angular/cli@16 --force

History Object​

When working with the history object in modern Angular applications using TypeScript, developers may encounter several common issues:

1. Type Safety​

TypeScript enforces type safety, which can sometimes lead to issues when interacting with the history object, especially if the types are not explicitly defined.

Solution: Ensure that you define the types correctly when using the history object. For example:

import { Location } from '@angular/common';

constructor(private location: Location) {}

goBack(): void {
  this.location.back();
}

2. Navigation and State Management​

Managing navigation state can be complex, especially when you need to maintain state across different routes.

Solution: Use Angular's Router service to handle navigation and state management more effectively.

import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToHome(): void {
  this.router.navigate(['/home']);
}

3. Browser Compatibility​

Different browsers may have slight variations in how they handle the history object, which can lead to inconsistencies.

Solution: Use Angular's Location service, which provides a consistent API for interacting with the browser's URL.

import { Location } from '@angular/common';

constructor(private location: Location) {}

goForward(): void {
  this.location.forward();
}

4. Handling Popstate Events​

Listening to popstate events can be tricky, especially when you need to perform specific actions based on the navigation history.

Solution: Use Angular's Router events to handle navigation changes more effectively.

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    // Handle navigation end event
  });
}

5. Preventing Unwanted Navigation​

Preventing users from navigating away from a page (e.g., when there are unsaved changes) can be challenging.

Solution: Implement a guard to handle such scenarios.

import { CanDeactivate } from '@angular/router';

export interface CanComponentDeactivate {
  canDeactivate: () => boolean;
}

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}