typescript - Angular 12 i .NET Core-prosjekt - Ruting fungerer ikke

Jeg følger en veiledning om hvordan man lager et spesifikt prosjekt i Angular 10 med .NET Core Web API og SQL Server-funksjonalitet. Jeg bruker Angular 12 i mitt oppsett.

Veiledningen fungerer frem til rutingsdelen.

-Jeg har opprettet ./app/department og ./app/employee-mapper og komponentene deres. Så de filene er der, og de ser slik ut:

<p>department works!</p>

og

<p>employee works!</p>

-I ./app-mappen har jeg endret app-routing.module.ts for å inkludere import av de komponentene og legge dem til i rutene. Så rute-filen kjenner til komponentfilene mine, og den vet at URL+ '/employee' skal vise opp employee-komponenten, og URL+ '/department' skal vise opp department-komponenten. Det er alt jeg prøver å gjøre.

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

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

-I ./app-mappen har jeg endret shared.service.ts for å inkludere metoder og observables relatert til URL-ene. Jeg er ikke sikker på hvordan noen av disse gir meg ruterfunksjonaliteten jeg trenger, men /api/employee, /api/department, og /api/GetAllDepartmentNames fungerer faktisk.

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');
  }

-I ./app har jeg endret app.module.ts for å importere den delte tjenesten, HttpClientModule, Forms Module og Reactive Forms Module. Dette er på en måte forskjellig fra den vanlige listen over bibliotekimporter øverst i disse andre filene.

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 { }

-Til slutt, i app.component.html i hovedprosjektmappen, har jeg lagt til kallet for router-outlet.

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

-Jeg bytter deretter fra Visual Studio Code tilbake til Visual Studio, kjører prosjektet, og jeg kan ikke hente innholdet i ./app/department/department.component.html ved å navigere til /department-utvidelsen på localhost:5000 hvor prosjektet vises, eller til dens employee.component.html-motstykke (http://localhost:5000/employee).

Feilen jeg får er en ganske grunnleggende "din nettside fungerer ikke"-feil: Denne localhost-siden kan ikke bli funnet. Ingen nettside ble funnet for nettadressen: http://localhost:5000/department FEIL 404

Jeg har gått nøye gjennom dette for tegnsetting og rettskrivning og alle de små feilene. De fleste av de stilte spørsmålene om dette problemet bruker en annen form for ruting enn det jeg bruker, noe som krever mer kunnskap om hva disse systemene gjør enn det jeg har. De andre handler om mer detaljert opprettelse av ruter basert på controllere og handlinger, som jeg fortsatt jobber med.

Jeg forstår bare ikke hvorfor denne rutingen ikke fungerer. Det virker som en enkel oppsett.

Svar #1

kjører du ng serve? Det vil starte Angular-prosjektet som du deretter kan gå til på http://localhost:4200. Hvis det ikke fungerer for deg, må du kanskje gjøre endringer i proxyen din, noe som ligner på:

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

Mitt håp er at dette gir deg litt informasjon som kan lede deg i riktig retning basert på hva jeg vet problemet er for deg.