Angular 15+ASP.NET Core项目：页面关联、样式及URL路径问题求助

问题1：Bootstrap样式未应用 #

原因：app.component.html模板中包含多余的<head>标签。Angular组件模板会嵌入到index.html的<body>内的<app-root>元素中，组件内的<head>会破坏DOM结构，导致外部引入的Bootstrap样式无法正确作用到组件内容上。

解决方案：
打开app.component.html，删除开头的<head></head>标签，修改后的代码如下：

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">FullStack.UI</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Products</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<router-outlet></router-outlet>

问题2：URL显示为http://localhost:54456/src/app/app.component.html而非根路径 #

原因：你大概率是直接在浏览器中打开了app.component.html文件，而非通过Angular开发服务器或ASP.NET Core服务器启动项目；另外需要确保路由配置正确。

解决方案：

1. 检查并修正路由配置：
   打开app-routing.module.ts，添加根路径指向AppComponent的路由，示例配置如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
  { path: '', component: AppComponent } // 根路径绑定AppComponent
];

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

2. 正确启动项目：
   • 纯Angular项目：在项目根目录执行命令 ng serve --open，启动Angular开发服务器后，浏览器会自动打开根路径页面。
   • ASP.NET Core集成项目：通过Visual Studio启动项目，或在项目根目录执行 dotnet run 命令，服务器会托管Angular静态文件，URL将显示为配置的根路径。
3. 确认base href配置：index.html中的<base href="/">已正确设置，该配置是Angular路由解析根路径的基础。

内容的提问来源于stack exchange，提问作者Rahul