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
-
Fix the versions
-
Add the code from the Ang13 app
-
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