En el código del tutorial que seguís es para la versión 11 ahora hay restricciones en tsconfig.json que hacen que el código tenga en cuenta las asignaciones que comentas.
Cuando un valor es nulo o indefinido, debemos probar esos valores antes de usar métodos o propiedades con ese valor. Al igual que verificar si no está definido antes de usar una propiedad opcional los valores que pueden ser nulos o indefinidos no se pueden acceder normalmente, y los valores nulos e indefinidos no se pueden asignar a una propiedad de cualquier tipo si
strictNullChecks esta en on Podes ver la teoría de como tener esto en cuenta en:
También la forma de trabajar con uniones de tipos estrechándolos ( Narrowing) mediante la comprobación de su tipo con typeof
Para Non-null Assertion Operador (Postfix !):
TypeScript también tiene una sintaxis especial para eliminar valores nulos e indefinidos de un tipo sin realizar ninguna verificación explícita. operador! después de cualquier expresión es efectivamente una afirmación de tipo de que el valor no es nulo o indefinido
Son algunas de las cosas a tener en cuenta para que el código de tu ejemplo funcione en las nuevas versiones de Angular
----------------------------------------------
src/app/shared/components/employee-form/employee-form.component.ts:15:3 - error TS2564: Property
'employeeForm' has no initializer and is not definitely assigned in the constructor.
Lo solucionamos con ! Escritura ! después de cualquier expresión es efectivamente
una afirmación de tipo de que el valor no es nulo o indefinido:
employeeForm!: FormGroup
-----------------------------------
src/app/shared/components/employee-form/employee-form.component.ts:38:50 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
const employeeId = this.employee?.id || null;
this.employeesSvc.onSaveEmployee(employee, employeeId!);
-----------------------------------------------------------------------
src/app/shared/components/employee-form/employee-form.component.ts:50:14 - error TS2531: Object is possibly 'null'.
isValidField(field: string): string {
const validatedField = this.employeeForm.get(field);
return (!validatedField?.valid && validatedField?.touched)
? 'is-invalid' : validatedField?.touched ? 'is-valid' : '';
}
------------------------------------------------------------------
otro hay varios con lo mismo
onGoToEdit(): void {
if ( this.navigationExtras.state?.value === 'undefined') {
this.navigationExtras.state.value = this.employee;
this.router.navigate(['edit'], this.navigationExtras);
}
}
----------------------------------
otro
async onGoToDelete(): Promise<void> {
try {
await this.employeesSvc.onDeleteEmployees(this.employee?.id!);
alert('Deleted');
this.onGoBackToList();
} catch (err) {
console.log(err);
}
}
onGoBackToList(): void {
this.router.navigate(['list']);
}
}
--------------------------
otro con
src/app/app.module.ts:25:49 - error TS2339: Property 'firebaseConfig' does not exist on type '{ production: boolean; }'.
25 AngularFireModule.initializeApp(environment.firebaseConfig)
lo debe de haber explicado en el tutorial o podes consultar esta pregunta que respondieron
https://stackoverflow.com/a/44033177/8957405
Aplique las correcciones para que pueda funcionar en el código que muestro salvo la ultima con respecto a firebase para eso ya hay una una forma de configuración en firebaseConfig
El codigo del tutorial con las correcciones anteriores
tutorial También hay otras formas de asignar null y evitar que no lo acepte Angular por ejemplo
const nulo={}as NavigationExtras;
nulo?.state?.value!='hola'