I'm currently following a guide on building a specific project using Angular 10 with .NET Core Web API and SQL Server functionalities. Interestingly, I decided to use Angular 12 in my environment.
The tutorial goes smoothly up until the routing section.
-I've gone ahead and created the ./app/department and ./app/employee directories along with their respective components. The files are present and they show:
<p>department works!</p>
and
<p>employee works!</p>
-Within the ./app folder, I edited app-routing.module.ts to import these components and add them to the routes. Thus, the routing file is aware of my component files and understands that URL+'/employee' should display the employee component, while URL+'/department' should display the department component. This is all I aim to achieve.
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 directory, modifications were made to shared.service.ts to include methods and observables related to URLs. Although I am uncertain how these contribute to the routing functionality I require, endpoints like /api/employee, /api/department, and /api/GetAllDepartmentNames actually function correctly.
export class SharedService {
readonly APIUrl = "http://localhost:5000/api";
readonly PhotoUrl = "http://localhost:5000/Photos";
constructor(private http:HttpClient) { }
//The department code mirrors the employee code, hence 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');
}
-Within the./app directory, I updated app.module.ts to import the shared service, HttpClientModule, Forms Module, and Reactive Forms Module. This sets it apart from the standard list of library imports at the beginning of 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 { }
-Ultimately, in app.component.html within the main project folder, I added the router outlet tag.
<h2>some text</h2>
<router-outlet></router-outlet>
-After switching back from Visual Studio Code to Visual Studio, running the project displays an issue where I cannot access the contents of ./app/department/department.component.html by navigating to the /department extension on the localhost:5000 location where the project is hosted, or its employee.component.html counterpart (http://localhost:5000/employee).
The error message received is quite simple, stating 'your webpage doesn't work': This localhost page can't be found. No webpage was found for the web address: http://localhost:5000/department HTTP ERROR 404
I have thoroughly reviewed the structure for any punctuation and spelling errors. Most of the queries related to this problem pertain to a different form of routing than what I am implementing, which demands a deeper understanding of these systems beyond my current grasp. Others delve into more detailed route creation based on controllers and actions, something I am still working on.
I am puzzled as to why this routing setup is not functioning properly. It appears to be a straightforward configuration.