Angular 12 in .NET Core project - Routing Not Working

Question

I'm following a tutorial on how to create a specific project in Angular 10 with .NET Core Web API and SQL Server functionality. I'm using Angular 12 on my setup.

The tutorial functions up to the routing portion.

-I've created the ./app/department and ./app/employee folders and the components them. So those files are there and they read:

<p>department works!</p>

and

<p>employee works!</p>

-In the ./app folder, I've modified app-routing.module.ts to include importing the those components and adding them to the routes. So the routing file knows about my component files and it knows that URL+'/employee' should bring up the employee component and URL+'/department' should bring up the department component. That is all I'm trying to do.

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

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

-In the ./app folder, I've modified shared.service.ts to include methods and observables related to the urls. I'm not sure how any of these provide me routing functionality I need, but the /api/employee, /api/department, and /api/GetAllDepartmentNames actually work.

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

-In ./app, I've modified app.module.ts to import the shared service, HttpClientModule, Forms Module, and Reactive Forms Module. This is in some way different to regular list of library imports at the top of these other files.

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

-Finally, in app.component.html in the main project folder, I've added the call for router outlet.

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

-I then switch from Visual Studio Code back to Visual Studio, run the project, and I cannot bring up the contents of ./app/department/department.component.html by navigating to the /department extension on the localhost:5000 location where the project displays, or to its employee.component.html counterpart (http://localhost:5000/employee).

The error I receive is a pretty basic, 'your webpage doesn't work' error: This localhost page can't be found. No webpage was found for the web address: http://localhost:5000/department HTTP ERROR 404

I've combed over this thing for punctuation and spelling and all the little errors. Most of the posted questions about this issue use a different form of routing than what I'm using, which requires more knowledge of what these systems do than I have. The others are about more detailed creation of routes based on controllers and actions, which I'm working on yet.

I just don't understand why this routing isn't working. It seems like a simple setup.

Answer 1

are you running ng serve? That would start up the angular project that you could then go to http://localhost:4200. If that is not working for you, you might have to make changes to your proxy, something like:

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

My hope is that this gives you some information to lead you in the right direction based on what I know the problem to be for you.