ERROR NG8002 Cant bind to 'housingLocation' since it isn't a known property of 'app-housing-location'. (Angular)

Question

keep getting the samen problem, everytime i swap my components from being stanalone, to joining hthem in my app.module, they give these errors :

Link to the repository : https://github.com/JariToni/Heropstart

code:

Home.component.html:

<section>
    <form >
        <input type="text" placeholder="Filter per stad" #filter>
        <button class="primary" type="button" (click)="FilterResult(filter.value)">Search</button>
    </form>
</section>

Home.component.ts:

import { Component, Inject, ChangeDetectorRef } from '@angular/core';
import { HousingLocationComponent } from '../housing-location/housing-location.component';
import { CommonModule } from '@angular/common';
import { HousingLocation } from '../../Interface/housing-location';
import { HousingService } from '../../Service/housing.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrl: './home.component.scss',
})
export class HomeComponent {
housingLocationList: HousingLocation[] = [];
filteredLocationList: HousingLocation[] = [];
filterText = '';
constructor(private housingService: HousingService, @Inject(ChangeDetectorRef) private        changeDetectorRef: ChangeDetectorRef) {
    this.housingService.getAllHousingLocations().then((housingLocationList : HousingLocation[]) => {
    this.housingLocationList = housingLocationList;
    this.filteredLocationList = housingLocationList;
    });
    }
    filterResult() {
    this.filteredLocationList = this.housingLocationList.filter(
    housingLocation =>
    housingLocation.name.toLowerCase().includes(this.filterText.toLowerCase())
    );
    this.changeDetectorRef.detectChanges();
    }
}

Housing-location.html:

<div class="listing-total">
    <section class="listing" [routerLink]="['/details',housingLocation.id]"  >
        <img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of     {{housingLocation.name}}">
        <h2 class= "listing-heading">{{housingLocation.name}}</h2>
        <p class="listing-location">{{housingLocation.city}}, {{housingLocation.state}}</p>
    </section>
</div>

Housing-location.ts:

import { Component, Input } from '@angular/core';
import { HousingLocation } from '../../Interface/housing-location';
import { RouterModule } from '@angular/router';
 
@Component({
selector: 'app-housing-location',
templateUrl: './housing-location.component.html',
styleUrl: './housing-location.component.scss'
})
export class HousingLocationComponent {
@Input () housingLocation!:  HousingLocation;
}

app.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule, NgFor } from '@angular/common';
import { HomeComponent } from './component/home/home.component';
import { HousingLocationComponent } from './component/housing-location/housing-location.component';
import { RouterLink, RouterModule } from '@angular/router';
import { DetailsComponent } from './component/details/details.component';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
    HomeComponent,
    HousingLocationComponent,
    DetailsComponent,
    AppComponent,
],
imports: [
    CommonModule,
    RouterModule,
    RouterLink,
    NgModule,
    FormsModule,
]
})
export class AppModule { }

App.component.ts:

import { Component } from '@angular/core';
import { HomeComponent } from './component/home/home.component';
import { RouterModule } from '@angular/router';

@Component({
selector: 'app-root',
templateUrl:  "./app.component.html",
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'Home';
}

app.component.html:

<main>
    <header class="brand-name">
         <img class="brand-logo" alt="logo" src="/assets/images/logo.svg" alst ="logo" aria-         hidden="true" [routerLink]="['/']">
    </header>
    <section class="content">
        <router-outlet></router-outlet>
    </section>
</main>

My ERRORS :

X [ERROR] NG8001: 'app-housing-location' is not a known element:
1. If 'app-housing-location' is an Angular component, then verify that it is part of this module.
2. If 'app-housing-location' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppres

    src/app/component/home/home.component.html:9:0:
      9 │ <app-housing-location *ngFor="let housingLocation of filteredLocati...
        ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component HomeComponent.

    src/app/component/home/home.component.ts:10:15:
      10 │   templateUrl: './home.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~~

      9 │ ...edLocationList"[housingLocation]="housingLocation" ></app-housin...                                                        pp-housin...
        ╵                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~     

  Error occurs in the template of component HomeComponent.

    src/app/component/home/home.component.ts:10:15:
      10 │   templateUrl: './home.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] NG8002: Can't bind to 'routerLink' since it isn't a known property of 'section'. [plugin angular-compiler]
property of 'section'. [plugin angular-compiler]
                                                                    ml:2:25:
    src/app/component/housing-location/housing-location.component.httion.id]"  >ml:2:25:                                                            ~~~~~~~~~
      2 │ ...n class="listing" [routerLink]="['/details',housingLocation.id]"  >                                                        .
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                                           :7:15:

  Error occurs in the template of component HousingLocationComponent.

    src/app/component/housing-location/housing-location.component.ts:7:15:
      7 │   templateUrl: './housing-location.component.html',       
        ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~        

X [ERROR] NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this 

    src/app/app.component.html:6:2:
      6 │   <router-outlet></router-outlet>
        ╵   ~~~~~~~~~~~~~~~

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:6:16:
      6 │   templateUrl:  "./app.component.html",
    ╵                 ~~~~~~~~~~~~~~~~~~~~~~

help ms pls i really can't find the issue

Answer 1

All I can see is you are having img html tag without closing tag, we can use self closing tag like shown below!

app.component.html:

<main>
    <header class="brand-name">
         <img class="brand-logo" alt="logo" src="/assets/images/logo.svg" alst ="logo" aria-         hidden="true" [routerLink]="['/']" /> <!-- changed here -->
    </header>
    <section class="content">
        <router-outlet></router-outlet>
    </section>
</main>

Housing-location.html:

<div class="listing-total">
    <section class="listing" [routerLink]="['/details',housingLocation.id]"  >
        <img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of     {{housingLocation.name}}"/> <!-- changed here -->
        <h2 class= "listing-heading">{{housingLocation.name}}</h2>
        <p class="listing-location">{{housingLocation.city}}, {{housingLocation.state}}</p>
    </section>
</div>