Angular路由配置与组件加载详解

在构建Angular应用时，路由配置是开发者常常遇到的问题之一。本文将通过一个在线商店应用的案例，详细探讨如何正确配置路由以及如何解决常见的路由问题。

背景介绍

假设我们正在开发一个简单的在线购物应用，包含两个主要页面：首页(home)和购物车(carrinho)。用户希望通过点击导航链接或直接在浏览器中输入URL来访问这些页面。然而，当用户尝试访问localhost:4200/carrinho时，应用报出错误NG04002: Cannot match any routes. URL Segment，并且被重定向到localhost:4200。

问题分析

首先，让我们看一下app-routing-module.ts中的路由配置：

const routes: Routes = [
  {