TILT-Angular 14 and small updates-part 20

It is always good to have the latest version of NuGet packages – if it does not break the application, of course. Easy task when you have some automated test -and Visual Studio is doing this for you.

However, to update an Angular application where the version is fixed – a nightmare. I will do in a full time.

Also, being deployed to Azure, a few clicks on AppInsights and you have monitoring the application without instrumenting the code.

Also, added a feature to the application – you can add now a link to your TILT. This small modification went also when to display the TILT – keep remembering that any modification that you will do to the model will reflect in more than 1 place in the GUI.

Also, modifying the interface – show first the TILTs in a list, rather than in a calendar format.

Now the Angular 14 is on market – see https://blog.angular.io/angular-v14-is-now-available-391a6db736af. I was impressed by Title and NgMOdel onPush

So – update the cli ( npm update -g @angular/cli ) and crating a new app (ng new ) and adding Angular (ng add @angular/material)

So now it is time to bring the code to

1. Fix the versions

2. Add the code from the Ang13 app

3. Add the title

For 1:

Fix the versions in package.json

Delete the npm_modules

npm i

For 2: I use WinMerge with a custom filter to exclude node_modules

Added missing npm packages from the previous application

Fix again the versions

For 3:

This is the code for TILT:

import { Injectable, NgModule } from '@angular/core';
import {
  RouterModule,
  RouterStateSnapshot,
  Routes,
  TitleStrategy,
} from '@angular/router';
import { LoginUrlGuard } from './login-url.guard';
import { LoginUrlComponent } from './login-url/login-url.component';
import { MyTiltComponent } from './my-tilt/my-tilt.component';
import { OnePublicTiltComponent } from './one-public-tilt/one-public-tilt.component';
import { PublicTiltsComponent } from './public-tilts/public-tilts.component';
import { TiltMainComponent } from './tilt-main/tilt-main.component';

const routes: Routes = [
  {
    path: 'tilt/public',
    component: PublicTiltsComponent,
    title: 'List of public tilts',
  },
  { path: 'tilt/public/:id', component: OnePublicTiltComponent },
  { path: '', redirectTo: '/tilt/public', pathMatch: 'full' },
  {
    path: 'tilt/my',
    component: MyTiltComponent,
    canActivate: [LoginUrlGuard],
    title: 'My tilts',
  },
  {
    path: 'loginURL',
    component: LoginUrlComponent,
    title: 'Login to add a tilt',
  },
];

@Injectable()
export class TemplatePageTitleStrategy extends TitleStrategy {
  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      document.title = `TILT! - ${title}`;
    } else {
      var arr = routerState.url.split('/');
      if(arr.length==0)
        document.title = `TILT! - AAA`;
      else
        document.title = `TILT! - tilts for ` + arr[arr.length-1];
    }
  }
}

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{provide: TitleStrategy,  useClass: TemplatePageTitleStrategy}],
})
export class AppRoutingModule {}

Tools used

npm

ng

Visual Studio Code

WinMerge