我的项目没有将我重定向到 Angular 组件的指定路径

Question

同事们下午好，我正在用 Angular 初始化我的学习，它创建了第一个名为 InicioComponent 的组件，但是当我启动服务器时，网络显示的是 app.component.html 的内容，而不是 inception.component 中的内容。 html（我留下图像）：

我将代码留在此处导入模块： app.module.ts：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClient, HttpClientModule } from "@angular/common/http";

import {AppRoutingModule} from "./app-routing.module";
import { AppComponent } from "./app.component";
import { routing } from "./app.routes";
import { InicioComponent } from "./components/inicio/inicio.component";


@NgModule({
    declarations: [
        AppComponent,
        InicioComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpClientModule,
        routing
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

我将代码留在此处进行路由 app.module.ts：

`import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClient, HttpClientModule } from "@angular/common/http";

import {AppRoutingModule} from "./app-routing.module";
import { AppComponent } from "./app.component";
import { routing } from "./app.routes";
import { InicioComponent } from "./components/inicio/inicio.component";


@NgModule({
    declarations: [
        AppComponent,
        InicioComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpClientModule,
        routing
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}`

app.routes.ts：这里我指定每个路由应该去哪个组件。

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { InicioComponent } from './components/inicio/inicio.component';


const routes: Routes = [
    {path: '', component: InicioComponent}

]

export const appRoutingProviders : any[] = [];
export const routing: ModuleWithProviders<any> = RouterModule.forRoot(routes);//aca mandamos todas las rutas

我应该放置这条线，以便路径到达我想要的组件

{path: '', component: InicioComponent} 

，但事实证明它会到达我的主要组件：

我可能缺少什么朋友？我正在使用 Angular 17 版本。我将不胜感激任何帮助，提前致谢。

我尝试在路线中添加/，但没有成功：

const routes: Routes = [
    {path: '/', component: InicioComponent}

]

export const appRoutingProviders : any[] = [];
export const routing: ModuleWithProviders<any> = RouterModule.forRoot(routes);//here we send all the routes

Answer 1

请删除

AppRoutingModule

的导入，目前似乎有两个路由模块！

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClient, HttpClientModule } from "@angular/common/http";

import { AppComponent } from "./app.component";
import { routing } from "./app.routes";
import { InicioComponent } from "./components/inicio/inicio.component";


@NgModule({
    declarations: [
        AppComponent,
        InicioComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        routing
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}