.NET Core 项目中的 Angular 12 - 路由不工作

Question

我正在学习有关如何使用 .NET Core Web API 和 SQL Server 功能在 Angular 10 中创建特定项目的教程。我在我的设置中使用 Angular 12。

教程功能一直到路由部分。

-我已经创建了 ./app/department 和 ./app/employee 文件夹及其组件。所以那些文件在那里，它们是:

<p>department works!</p>

和

<p>employee works!</p>

-在 ./app 文件夹中，我修改了 app-routing.module.ts 以包括导入这些组件并将它们添加到路由中。所以路由文件知道我的组件文件，它知道 URL+'/employee' 应该调出员工组件，而 URL+'/department' 应该调出部门组件。 这就是我想要做的。

import { EmployeeComponent } from './employee/employee.component';
import { DepartmentComponent } from './department/department.component';

const routes: Routes = [
  {path: 'employee', component: EmployeeComponent},
  {path: 'department', compoennt: DepartmentComponent}
];

-在 ./app 文件夹中，我修改了 shared.service.ts 以包含与 url 相关的方法和可观察值。我不确定其中的任何一个如何为我提供所需的路由功能，但/api/employee、/api/department 和/api/GetAllDepartmentNames 确实有效。

export class SharedService {
readonly APIUrl = "http://localhost:5000/api";
readonly PhotoUrl = "http://localhost:5000/Photos";
  constructor(private http:HttpClient) { }

//department code is identical to employee code, so it's omitted for brevity

  getEmpList():Observable<any[]>{
    return this.http.get<any>(this.APIUrl+'/Employee');
  }

  addEmployee(val:any){
    return this.http.post(this.APIUrl+'/Employee',val);
  }

  updateEmployee(val:any){
    return this.http.put(this.APIUrl+'/Employee',val);
  }

  deleteEmployee(val:any){
    return this.http.delete(this.APIUrl+'/Employee/'+val);
  }

  UploadPhoto(val:any){
    return this.http.post(this.APIUrl+'/Employee/SaveFile',val);
  }

  getAllDepartmentNames():Observable<any[]>{
    return this.http.get<any[]>(this.APIUrl+'/Employee/GetAllDepartmentNames');
  }

-在 ./app 中，我修改了 app.module.ts 以导入共享服务、HttpClientModule、Forms 模块和 Reactive Forms 模块。这在某种程度上不同于这些其他文件顶部的常规库导入列表。

import { HttpClientModule } from '@angular/common/http';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    DepartmentComponent,
    ShowDepComponent,
    AddEditDepComponent,
    EmployeeComponent,
    ShowEmpComponent,
    AddEditEmpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [SharedService],
  bootstrap: [AppComponent]
})
export class AppModule { }

-最后，在主项目文件夹的 app.component.html 中，我添加了对路由器 socket 的调用。

<h2>some text</h2>
<router-outlet></router-outlet>

-然后我从 Visual Studio Code 切换回 Visual Studio，运行项目，但我无法通过导航到本地主机上的/department 扩展来调出 ./app/department/department.component.html 的内容: 5000 项目显示的位置，或对应的 employee.component.html (http://localhost:5000/employee)。

我收到的错误是一个非常基本的错误，“您的网页无法正常工作”:找不到此本地主机页面。找不到网址的网页:http://localhost:5000/departmentHTTP 错误 404

我已经梳理了这件事的标点符号和拼写以及所有的小错误。关于此问题的大多数已发布问题使用的路由形式与我正在使用的路由形式不同，这需要比我更了解这些系统的功能。其他的是关于基于 Controller 和操作更详细地创建路由，我正在研究这些内容。

我只是不明白为什么这个路由不起作用。这似乎是一个简单的设置。

Answer 1

你在运行 ng serve 吗？这将启动 Angular 项目，然后您可以转到 http://localhost:4200。如果这对您不起作用，您可能需要更改您的代理，例如:

{
  "/api/*": {
    "target": "http://localhost:5000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

我希望这能为您提供一些信息，根据我所知道的问题所在，引导您朝着正确的方向前进。