Angular — маршруты не работают — ошибка: NG04002: невозможно сопоставить ни один маршрут. URL-сегмент

Извините за мой плохой английский :/ Я пытаюсь создать простое приложение интернет-магазина с помощью Angular, но пока я пытаюсь получить доступ к двум маршрутам (домашний и «carrinho» [корзина по-португальски]), выдает ошибку: «Ошибка: NG04002: невозможно сопоставить ни один маршруты. URL-сегмент», и браузер перенаправляет на localhost:4200, а не на желаемый маршрут. Localhost:4200/carrinho должен показывать сообщение «carrinhoworks!». предложение, просто чтобы убедиться, что оно работает, но вместо этого у меня появляется ошибка, и меня перенаправляет на localhost: 4200, то же самое для дома. Итак, любой из этих двух работает. В эти дни я сталкиваюсь с плохими вещами, поэтому мое внимание, возможно, что-то проигнорировало. Я пытался найти то, что могло быть не так, и исправить это, даже посетил несколько тем здесь, посвященных переполнению стека, но не смог.

app-routing-module.ts — папка (src/app)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CarrinhoComponent } from './pages/carrinho/carrinho.component'
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'carrinho',
    component: CarrinhoComponent,
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

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

app-module.ts — папка (src/app)

import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatGridListModule } from '@angular/material/grid-list';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTreeModule } from '@angular/material/tree';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTableModule } from '@angular/material/table';
import { MatBadgeModule } from '@angular/material/badge';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './pages/home/home.component';
import { ProductsHeaderComponent } from './pages/home/components/products-header/products-header.component';
import { FiltersComponent } from './pages/home/components/filters/filters.component';
import { CarrinhoComponent } from './pages/carrinho/carrinho.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    HeaderComponent,
    ProductsHeaderComponent,
    FiltersComponent,
    CarrinhoComponent,
  ],

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatGridListModule,
    MatMenuModule,
    MatButtonModule,
    MatCardModule,
    MatIconModule,
    MatExpansionModule,
    MatTreeModule,
    MatListModule,
    MatToolbarModule,
    MatTableModule,
    MatBadgeModule,
    MatSnackBarModule,
    HttpClientModule
  ],
  exports: [
    MatSidenavModule,
    MatGridListModule
  ]
})
export class AppModule { }

домашний-компонент.ts

import { Component } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatGridListModule } from '@angular/material/grid-list';
import { ProductsHeaderComponent } from './components/products-header/products-header.component';
import { FiltersComponent } from './components/filters/filters.component';
import { ProductBoxComponent } from './components/product-box/product-box.component';

const ROWS_HEIGHT: { [id: number]: number } = { 1: 400, 3: 335, 4: 350 };

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [ProductBoxComponent, FiltersComponent, ProductsHeaderComponent, MatSidenavModule, MatGridListModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {
  cols = 3;

  rowHeight = ROWS_HEIGHT[this.cols];

  categoria: string | undefined;

  constructor(){

  }

  ngOnInit(): void {

  }

  onColumnsCountChange(numCols: number): void {
    this.cols = numCols;
    this.rowHeight=ROWS_HEIGHT[this.cols];
  }

  onShowCategoria(novaCategoria: string): void {
    this.categoria = novaCategoria;
  }
}

приложение-компонент.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './pages/home/home.component';
import { CarrinhoComponent } from './pages/carrinho/carrinho.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HomeComponent, HeaderComponent, CarrinhoComponent, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'loja';
}

приложение-компонент.html

      <app-header></app-header>
      <router-outlet></router-outlet>
      <app-home></app-home>

header-comComponent.html (с кнопкой, использующей routerLink для маршрута carrinho (корзины))

<mat-toolbar class = "mat-toolbar-custom max-w-7x1-mx-auto border-x justify-between">
  <a routerLink = "home">Conheça a Loja</a>
  <button mat-icon-button [matMenuTriggerFor] = "menu">
    <mat-icon
    [matBadge] = "1"
    [style.color] = "'rgb(22, 99, 115)'"
    >shopping_cart</mat-icon>
  </button>
  <mat-menu #menu = "matMenu">
    <div class = "p-3 divide-y divide-solid">
      <div class = "pb-3 flex justify-between">
      <span class = "mr-16">1 items</span>
      <br>
      <a routerLink = "carrinho">Consultar Carrinho</a>
    </div>
    <div class = "p-4">
      <div class = "flex justify-between font-light mb2">
      Keyboard x1
      <span class = "font-bold">{{ '150' | currency: 'BRL' }}</span>
      </div>
      <div class = "flex justify-between font-light mb2">
        Keyboard x1
        <span class = "font-bold">{{ '150' | currency: 'BRL' }}</span>
      </div>
      <div class  = "flex justify-between py-3 font-light">
        Total:
        <span class = "font-bold">{{ '300' | currency: 'BRL'}}</span>
      </div>
      <div class = "pt-3 flex justify-between">
        <button class = "bg-text-white-rounded-full w-10 h-10">
          <mat-icon>remove_shopping_cart</mat-icon>
        </button>
        <button routerLink = "carrinho" class = "bg-text-white-rounded-full w-10 h-10">
          <mat-icon>remove_shopping_cart</mat-icon>
        </button>
      </div>
    </div>
    </div>
  </mat-menu>
</mat-toolbar>

carrinho.comComponent.html

<p>carrinho works!</p>

Я ожидал, что на самом деле произойдет перенаправление на localhost: 4200/home (показывающее, что находится внутри домашнего компонента) и localhost: 4200/carrinho (показывающее, что находится внутри компонента carrinho, который «carrinho работает» только в целях тестирования).

Обновление: только что добавил /home в index.html, и теперь домашний маршрут работает, но Карринью по-прежнему не работает :(

Обновление 2: я также добавил маршруты в app-routes.ts, и кажется, что /carrinho теперь работает, но также загружает компоненты домашней страницы, а не только те, что из маршрута carrinho, поэтому они отображаются неправильно. То же самое и с домашней страницей.. (эта страница была прямо перед тем, как на картинке 2, без «работ Карринью»)

https://i.sstatic.net/4jFcW.png
https://i.sstatic.net/VLtoZ.png
https://i.sstatic.net/rGDKx.png

Решено: наконец-то решена проблема с загрузкой компонентов маршрута carrinho из других маршрутов с использованием ChangeDetectionStrategy Alpine, использованного в его ответе!