Try to read a parameter from the url

Question

I try to read out the parameter of a url.

With the following code I create a list and add a button with that i can click to the details.

This is the gamelist.component.html

<tr *ngFor="let game of games">
<td>{{ game.title }}</td>
<td>{{ game.shortdescription }}</td>
<td>{{ game.releasedate }}</td>
<td>
  <span *ngFor="let tag of game.tags">{{ tag }} </span>
</td>
<td>
  <button (click)="onSelect(game)" >Spiel aufrufen</button>
  </td>
</tr>

In the gamelist.component.ts I had defined the onSelect

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import gamelistjson from '../../assets/data/gamelist.json';

interface GAMELIST {
    id: number,
    title: string,
    releasedate: number,
    shortdescription: string,
    adddate: string,
    changedate: string,
    tags: any
}

@Component({
  selector: 'app-gamelist',
  templateUrl: './gamelist.component.html',
  styleUrls: ['./gamelist.component.css']
})
export class GamelistComponent implements OnInit {

  title = "Import the gamelists";
  games: GAMELIST[] = gamelistjson;
  idspiel: number = 0;

  constructor(private router: Router) { 
  }

  ngOnInit(): void {

  }

  onSelect(game: any){
    this.router.navigate(['/spiel', game.id, game.title]);
  }
}

And in the game.component.ts I would try to get the id from the url

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import gamejson from '../../assets/data/gametest.json';

interface GAME {
  id: number,
  
  title: string,
  releasedate: number
  /*description: string,
  adddate: string,
  changedate: string,
  producer: any,
  pdffile: string,
  images: any,
  youtubelink: string
  */

}

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.css']
})
export class GameComponent implements OnInit {

  //game: GAME[] = gamejson;
  spieleid: number = 0;


  constructor(private route: ActivatedRoute) {

  }

  ngOnInit(): void {
    this.spieleid = parseInt( this.route.snapshot.paramMap.get('id') );
  }

}

Finally here is the gametest.json

{
    "id": 1,
    "title": "Ligretto",
    "releasedate": 2000
 }

Error: src/app/games/game.component.ts:37:31 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'.

37 this.spieleid = parseInt( this.route.snapshot.paramMap.get('id') ); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The tsconfig.json is not changed. It is from the creating of the new angular app and all values are from the default settings.

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Can you tell me where my mistake is? I look in videos and they have never this problem with this error.

Here ist also the app-routing.module.ts

const routes: Routes = [
  { path: "", component: BlogComponent },
  { path: "spieleliste", component: GamelistComponent },
  { path: "spiel/:id/:urlspielname", component: GameComponent },
  { path: "allgemein/impressum", component: ImpressumComponent },
  { path: "allgemein/datenschutz", component: DatenschutzComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

this happens because you have strict mode activated. you have a few options, one would be:

this.spieleid = +this.route.snapshot.paramMap.get('id');

the +sign will convert the string into a number.

another option would be:

this.spieleid = parseInt( this.route.snapshot.paramMap.get('id') as string );

and another option that should work:

const param =  this.route.snapshot.paramMap.get('id');
this.spielid = (param !== undefined && param !== null) ? parseInt(param) : param; 
// or maybe you should throw an error when param is missing ;)