It seems that the route /users is not functioning as expected; instead of loading the UsersComponent, it loads the AppComponent.
Why is the /users route not loading the correct component?
Here is a snippet from app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
import { AppRouting } from './app-routing.component'
@NgModule({
declarations: [
AppComponent,
UsersComponent
],
imports: [
BrowserModule,
AppRouting,
FormsModule
// other imports here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is a snippet from app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
Here is a snippet from user.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
And here is a snippet from app-routing.component.ts:
import { UsersComponent } from './users/users.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
//{path:'appcomponent',component:AppComponent},
{ path: 'users', component: UsersComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRouting {
}
In the HTML code, only this should be displayed:
Snippet from user.component.html:
<p>
users works!
</p>