everyone.
I'm working with angular but I've some issues with the routing.
I've followed some tutorials, but the routing is not working.
Can somebody check my code and tell me what I'm doing worse?
This is my principal router module:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LoginComponent } from './login/login.component';
import { ListadoSolicitudComponent } from './solicitudes/listado_solicitud.component';
const routes: Routes = [
{ path: 'solicitud', loadChildren: './solicitudes/solicitudes.module#SolicitudesModule' },
{ path: 'admin', loadChildren: './administracion/administracion.module#AdministracionModule' },
{ path: 'login', component: LoginComponent },
{ path: 'solicitudes', component: ListadoSolicitudComponent },
{ path: '', redirectTo: '/solicitudes', pathMatch: 'full' }
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule{ }
My principal module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule, Routes} from '#angular/router';
import { Contenedor } from './contenedor.component';
import { SolicitudesModule } from './solicitudes/solicitudes.module';
import { AdministracionModule } from './administracion/administracion.module';
import { AppRoutingModule } from './app-routing.module';
import { LoginComponent } from './login/login.component';
import { ListadoSolicitudComponent } from './solicitudes/listado_solicitud.component';
#NgModule({
declarations: [Contenedor, LoginComponent, ListadoSolicitudComponent],
imports: [BrowserModule, AppRoutingModule/*, SolicitudesModule, AdministracionModule*/],
providers: [],
bootstrap: [Contenedor]
})
export class ContenedorModule { }
And, this is one of the two router child module (SolicitudesRutaModule):
import { NgModule } from '#angular/core';
import { RouterModule, Routes} from '#angular/router';
//Importo los componentes
import { ListadoSolicitudComponent } from './listado_solicitud.component';
import { registrosolicitud } from './registro_solicitud.component';
import { RegistroParticipantes } from './registro_participantes.component';
import { Proyeccion } from './proyeccion_gastos.component';
import { DatoSolicitud } from './datos_solicitud.component';
import { ordencompra } from './orden_compra_solicitud.component';
import { Bitacora } from './bitacora.component';
import { AprobarSolicitud } from './aprobar.component';
import { editarsolicitud } from './editar_solicitud.component';
const Route: Routes = [
{ path: '', component: ListadoSolicitudComponent,
children: [
{ path: 'registro', component: registrosolicitud },
{ path: 'gasto', component: Proyeccion },
{ path: 'participantes', component: RegistroParticipantes },
{ path: 'compra', component: ordencompra },
{ path: 'bitacora', component: Bitacora },
{ path: 'aprobar', component: AprobarSolicitud },
{ path: 'edit', component: editarsolicitud }
]}
];
// Metadatos del módulo
#NgModule({
imports: [ RouterModule.forChild(Route) ],
exports: [ RouterModule ]
})
export class SolicitudesRutaModule { }
You do not import the SolicitudesRutaModule.
In your AppRoutingModule, you should do:
{ path: 'solicitudes', loadChildren: 'path/to/module#SolicitudesRutaModule' },
Note that if registro is a child of the default route '' in your SolicitudesRutaModule, the ListadoSolicitudComponent should have a <router-outlet></router-outlet> in its template.
If this is not the case, put the other routes like registro in the same array as the default route ''.
Related
I tried to create a 404 page on my Web Application, so I create the component and add the routes to the app-rouging.module.ts but the website is always redirected to the 404 page even if I enter "/home" in the URL.
The not-found component is in the public module, attached to a not-found module :
import { NgModule } from '#angular/core';
import { SharedModule } from 'src/app/shared/shared.module';
import { NotFoundComponent } from './not-found/not-found.component';
#NgModule({
declarations: [NotFoundComponent],
imports: [
SharedModule
]
})
export class NotFoundModule { }
public.module.ts :
import { NgModule } from '#angular/core';
import { PublicRoutingModule } from './public-routing.module';
import { SharedModule } from '../shared/shared.module';
import { MainPageComponent } from './main-page/main-page.component';
import { CookieInformationComponent } from './cookie-information/cookie-information.component';
import { LegaleInformationComponent } from './legale-information/legale-information.component';
import { MapComponent } from './map/map.component';
import { AgmCoreModule } from '#agm/core';
import { InnerHTMLComponent } from './inner-html/inner-html.component';
import { NotFoundModule } from './not-found/not-found.module';
#NgModule({
declarations: [MainPageComponent, CookieInformationComponent, LegaleInformationComponent, MapComponent, InnerHTMLComponent],
imports: [
SharedModule,
PublicRoutingModule,
AgmCoreModule,
NotFoundModule
]
})
export class PublicModule { }
I have 3 files for routing : app-routing, private-routing and public-routing :
app-routing.module.ts :
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { NotFoundComponent } from './public/not-found/not-found/not-found.component';
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }
];
#NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],
exports: [RouterModule]
})
export class AppRoutingModule { }
public-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { MainPageComponent } from '../public/main-page/main-page.component'
import { LegaleInformationComponent } from './legale-information/legale-information.component';
import { CookieInformationComponent } from './cookie-information/cookie-information.component';
const APP_ROUTES_PUBLIC: Routes = [
{ path: 'home', component: MainPageComponent },
{ path: 'legal', component: LegaleInformationComponent },
{ path: 'cookie', component: CookieInformationComponent }
];
#NgModule({
imports: [RouterModule.forChild(APP_ROUTES_PUBLIC)],
exports: [RouterModule]
})
export class PublicRoutingModule { }
private-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AdminComponent } from './admin/admin/admin.component';
import { UploadFileComponent } from './admin/upload-file/upload-file.component';
import { QRCreateComponent } from './admin/qr-code-management/create/create.component';
import { QRUpdateComponent } from './admin/qr-code-management/update/update.component';
const APP_ROUTES_PRIVATE: Routes = [
{ path: 'admin', component: AdminComponent },
{ path: 'admin/upload-file', component: UploadFileComponent },
{ path: 'admin/qr-code-management/create', component: QRCreateComponent },
{ path: 'admin/qr-code-management/update', component: QRUpdateComponent }
];
#NgModule({
imports: [RouterModule.forChild(APP_ROUTES_PRIVATE)],
exports: [RouterModule]
})
export class PrivateRoutingModule {
Look at your app routing module declaration:
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }
];
If someone goes to, for example 'http://localhost:3000/', you redirect him to 'http://localhost:3000/home'. But you don't have route declaration for 'home' path, so router will display NotFoundComponent.
You need to add declaration for 'home' path. For example:
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home',
loadChildren: () => import('./public.module').then(m => m.PublicModule) },
{ path: '**', component: NotFoundComponent }
];
Note 1: you need to have route with path: '' in PublicModule to make it work. Probably you have to change path 'home' to simple empty path.
Note 2: I'm assuming you want to lazy load your modules. You can read more about it: https://angular.io/guide/lazy-loading-ngmodules
I am creating an Angular Application and I have used lazy Loading. When I am serving the application using ng serve --aot there is no error in the and also when I do ng build --prod still there is no error. But When I upload the build files in my hosting and trying to navigate from HOMEPAGE (https://pawsticks.rahuls.co.in) to LOGIN (https://pawsticks.rahuls.co.in/login) page there is an error in the terminal shows -
Uncaught (in promise): NullInjectorError: StaticInjectorError(i)[s -> e]:
StaticInjectorError(Platform: core)[s -> e]:
NullInjectorError: No provider for e!.
I am not getting it from where the error is occurring.
APP Module -
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { HttpClientModule } from '#angular/common/http';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations'
import { DatePipe } from '#angular/common';
import { FeatureModule } from '#/modules/featured';
import { NgxSpinnerModule } from "ngx-spinner";
import { AppComponent } from '#/app.component';
#NgModule({
declarations: [
AppComponent,
routingComponents
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
NgxSpinnerModule, // NGX Spinner
FeatureModule.forRoot() //Injecting Feature Module as ROOT Module
],
providers: [
DatePipe
],
bootstrap: [AppComponent]
})
export class AppModule { }
Feature Module:
import { NgModule, ModuleWithProviders } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { ReactiveFormsModule, FormsModule } from '#angular/forms';
//Importing HTTP Intercepter and services
import { HTTPInterceptorProvider } from '#/core/_HTTP-interceptor';
import { AjaxService, AuthTokenService, CommonHelperService } from '#/core/_services';
import { SummaryPipe } from '#/core/_pipes';
//Externel Plugins Modules
import { ShowHidePasswordModule } from 'ngx-show-hide-password';
import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
import { ImageCropperModule } from 'ngx-image-cropper';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { NgSelectModule } from '#ng-select/ng-select';
import { NgxPaginationModule } from 'ngx-pagination';
//Success Error Component, Password Strength Component, Animated Numbers Component
import {
SuccessErrorComponent,
PasswordStrengthBarComponent,
AnimatedNumbersComponent,
} from '#/modules/shared';
#NgModule({
declarations: [
SuccessErrorComponent,
PasswordStrengthBarComponent,
AnimatedNumbersComponent,
//Pipes used are listed here
SummaryPipe
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
RouterModule,
NgxIntlTelInputModule,
ShowHidePasswordModule, // Show Hide Password Plugin Import
ImageCropperModule, // Image cropper Module
BsDatepickerModule.forRoot(), //Bootstrap Datepicker Plugin
BsDropdownModule.forRoot(),
NgSelectModule,
NgxPaginationModule
],
providers: [
],
exports: [
SuccessErrorComponent,
PasswordStrengthBarComponent,
AnimatedNumbersComponent,
SummaryPipe,
ReactiveFormsModule,
FormsModule,
NgxIntlTelInputModule,
ImageCropperModule, // Image cropper Module
BsDatepickerModule, //Bootstrap Datepicker Plugin
BsDropdownModule,
NgSelectModule,
NgxPaginationModule,
ShowHidePasswordModule
]
})
export class FeatureModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: FeatureModule,
providers: [
HTTPInterceptorProvider,
AjaxService,
AuthTokenService,
CommonHelperService
]
};
}
}
App Routing Module :
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { CustomPreloadingStrategy } from './preloading-strategy';
import { AuthGuard, SecureOuterPagesGuard } from "#/core/_guards";
// Home page of the application
import { IndexComponent } from '#/modules/index/index.component';
// Authentication and Authorization Components
import {
LoginComponent,
RegisterComponent,
VerifyAccountComponent,
VerifyAccountStatusComponent,
ForgetPasswordComponent,
ResetPasswordComponent
} from '#/modules/auth';
// Session Timeout, Page Not Found and Interner Server Error Components
import {
SessionTimeOutComponent,
PageNotFoundComponent,
InternalServerErrorComponent
} from '#/modules/shared';
const routes: Routes = [
{
path: '',
component: IndexComponent
},
{
path: 'login',
component: LoginComponent,
canActivate: [SecureOuterPagesGuard]
},
{
path: 'register',
component: RegisterComponent,
canActivate: [SecureOuterPagesGuard]
},
{
path: 'verify-account',
component: VerifyAccountComponent,
canActivate: [SecureOuterPagesGuard]
},
{
path: 'verify-account-status',
component: VerifyAccountStatusComponent,
canActivate: [SecureOuterPagesGuard]
},
{
path: 'forget-password',
component: ForgetPasswordComponent,
canActivate: [SecureOuterPagesGuard]
},
{
path: 'reset-password',
component: ResetPasswordComponent,
canActivate: [SecureOuterPagesGuard]
},
{
path: 'dashboard',
loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule),
canActivate: [AuthGuard],
data: { preload: true }
},
{
path: 'internal-server-error',
component: InternalServerErrorComponent
},
{
path: 'page-not-found',
component: PageNotFoundComponent
},
{
path: 'session-time-out',
component: SessionTimeOutComponent
},
{
path: '**',
component: PageNotFoundComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],
exports: [RouterModule],
providers: [CustomPreloadingStrategy]
})
export class AppRoutingModule { }
export const routingComponents = [
IndexComponent,
LoginComponent,
RegisterComponent,
VerifyAccountComponent,
VerifyAccountStatusComponent,
ForgetPasswordComponent,
ResetPasswordComponent,
SessionTimeOutComponent,
PageNotFoundComponent,
InternalServerErrorComponent,
]
I'm creating an application with Angular 9 where I've created a separate routing module for the admin purpose and calling it in app.module to initialize. But for some reason the routes are not getting called and and the below error is coming in the console.
ERROR Error
Angular 11
resolvePromise
resolvePromise
scheduleResolveOrReject
invokeTask
onInvokeTask
invokeTask
runTask
drainMicroTaskQueue
invokeTask
invoke
timer
core.js:3872
I've created child modules like this in previous versions of Angular and it worked perfectly. You can check my github repository if you want to https://github.com/tridibc2/sample-angular. Have a look at my modules below
AdminModule:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { Routes, RouterModule } from '#angular/router';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AdminComponent } from '../admin/admin.component';
import { SignupComponent } from '../signup/signup.component';
import { LoginComponent } from '../login/login.component';
import { ManageBlogsComponent } from '../manage-blogs/manage-blogs.component';
const routes: Routes = [
{ path: 'signup', component: SignupComponent },
{ path: 'login', component: LoginComponent },
{ path: 'admin', component: AdminComponent },
{ path: 'admin/blog', component: ManageBlogsComponent }
];
#NgModule({
declarations: [
AdminComponent,
SignupComponent,
LoginComponent,
ManageBlogsComponent
],
imports: [
RouterModule.forChild(routes),
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [RouterModule]
})
export class AdminModule { }
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { RouterModule } from '#angular/router';
import { ClientModule } from './client/client-routing/client.module';
import { AdminModule } from './admin/admin-routing/admin.module';
import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent ],
imports: [
BrowserModule,
CommonModule,
NgbModule,
ClientModule,
AdminModule,
AppRoutingModule,
FormsModule,
RouterModule ],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.ts:
import { NgModule } from '#angular/core';
import { CommonModule, } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { Routes, RouterModule } from '#angular/router';
import { BlogHomeComponent } from './client/blog-home/blog-home.component';
const routes: Routes =[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: BlogHomeComponent }
];
#NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes,{
useHash: true
})
],
exports: [
],
})
export class AppRoutingModule { }
Simple example for routing of eager loaded module.
Ref of atleast one component is required in parent module and which is mostly a component that has router-outlet tag to render child module routes.
...
const routes: Routes = [
{
path: '',
component: CompWhichHasRouterOutletTag,
children:[
{path: '', redirectTo: 'signup', pathMatch: 'full'},
{ path: 'signup', component: SignupComponent },
{ path: 'login', component: LoginComponent },
{ path: 'admin', component: AdminComponent },
{ path: 'admin/blog', component: ManageBlogsComponent }]
}
];
#NgModule({
declarations: [
CompWhichHasRouterOutletTag,
AdminComponent,
SignupComponent,
LoginComponent,
ManageBlogsComponent
],
imports: [
RouterModule.forChild(routes),
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [RouterModule, CompWhichHasRouterOutletTag]
})
export class AdminModule { }
app.routing.ts file
const routes: Routes = [
{ path: '', redirectTo: '/home/', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'admin-route', component: CompWhichHasRouterOutletTag },
]
#NgModule({
imports: [
...
RouterModule.forRoot(routes),
...
]
})
So basically I am trying to create a lazy loaded feature module in my application I have been following the official angular docs - but for some reason its not working.
I have set up my feature module DashboardModule as shown below
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
// MODULES
import { DashboardRoutingModule } from './dashboard-routing.module';
// COMPONENTS
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardAlertComponent } from './dashboard-alert/dashboard-alert.component';
import { DashboardSummaryComponent } from './dashboard-summary/dashboard-summary.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';
import { HoldingPageComponent } from './holding-page/holding-page.component';
#NgModule({
imports: [CommonModule, DashboardRoutingModule],
declarations: [
DashboardComponent,
DashboardAlertComponent,
DashboardSummaryComponent,
DashboardTasksComponent,
HoldingPageComponent,
]
})
export class DashboardModule {}
then in my DashboardRoutingModule
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { ActivityComponent } from '../activity-components/activity/activity.component';
import { IsLockedRouteGuard } from '#app/shared/common/auth/is-locked-route-guard';
import { DashboardSummaryComponent } from './dashboard-summary/dashboard-summary.component';
import { SyncComponent } from '#app/popup-components/sync/sync.component';
import { DashboardAlertComponent } from './dashboard-alert/dashboard-alert.component';
import { ChartContainerComponent } from '../chart-components/chart-container/chart-container.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';
#NgModule({
imports: [
RouterModule.forChild([
{ path: 'activity', component: ActivityComponent, canActivate: [IsLockedRouteGuard] },
{ path: 'snapshot', component: DashboardSummaryComponent },
{ path: 'sync', component: SyncComponent },
{
path: 'alerts',
component: DashboardAlertComponent,
canActivate: [IsLockedRouteGuard]
},
{ path: 'charts', component: ChartContainerComponent, canActivate: [IsLockedRouteGuard] },
{ path: 'tasks/:sort', component: DashboardTasksComponent, canActivate: [IsLockedRouteGuard] },
])
],
exports: [RouterModule]
})
export class DashboardRoutingModule {}
so as per the angular docs this has been set up correctly..
now in my AppRoutingModule
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { AppRouteGuard } from './shared/common/auth/auth-route-guard';
#NgModule({
imports: [
RouterModule.forChild([
{
path: 'app',
component: AppComponent,
children: [
{
path: '',
children: [{ path: '', redirectTo: '/dashboard/alerts', pathMatch: 'full' }]
},
{
path: 'main',
canActivate: [AppRouteGuard],
loadChildren: () => import('./main/main.module').then(m => m.MainModule),
data: { preload: true }
},
{
path: 'dashboard',
loadChildren: () => import('./main/dashboard/dashboard.module').then(m => m.DashboardModule)
},
]
}
])
],
exports: [RouterModule]
})
export class AppRoutingModule {}
but whats happening is when I try and go to /dashboard.. I get this error
Component HoldingPageComponent is not part of any NgModule or the module has not been imported into your module.
but I am clearly importing it in the DashboardModule as shown above.. what am I doing wrong??
Thanks
i don't see
RouterModule.forRoot
i think you should use it in AppRoutingModule instead of
RouterModule.forChild
I have set up a "404 - page not found" page for when the user enters a url that dooesn't match any paths in my web app:
export const routerConfig: Routes = [
{
component: LandingPageComponent,
path: "",
},
{
component: ProfilePageComponent,
path: "profile",
},
{
component: NotFoundPageComponent,
path: "**",
},
];
However when I type in my app address and then an incorrect path (eg http://localhost:3000/prcds) it just displays :
Cannot GET /prcds
In a blank web page with an error in the console:
Failed to load resource: the server responded with a status of 404
(Not Found)
I have added NotFoundPageModule into app.module imports.
I used the "configuration" section from https://angular.io/docs/ts/latest/guide/router.html and copied how they did it into my project to set up the 404 not found page.
How do I get it to stop displaying that error and display my actual page that I made for 404 errors?
It displays the same page from my other question so there is a small chance, that it is related to this issue:
My Code:
not found page file structure:
notfoundpage.component.ts
import { Component } from "#angular/core";
import { Title } from "#angular/platform-browser";
#Component({
selector: "not-found-page",
styleUrls: ["dist/app/components/not-found-page/not-found-page.component.css"],
templateUrl: "dist/app/components/not-found-page/not-found-page.component.html",
})
export class NotFoundPageComponent {
constructor(private titleService: Title) {
this.titleService.setTitle("Not Found");
}
}
notfoundpage.module.ts
import { CommonModule } from "#angular/common";
import { NgModule } from "#angular/core";
import { FormsModule } from "#angular/forms";
import * as NotFoundPage from "./index";
#NgModule({
declarations: [
NotFoundPage.NotFoundPageComponent,
],
exports: [NotFoundPage.NotFoundPageComponent],
imports: [CommonModule, FormsModule],
})
export class NotFoundPageModule { }
app.module.ts
// tslint:disable-next-line:no-reference
/// <reference path="../../../node_modules/moment/moment.d.ts" />
// Angular 2 modules
import { Component, NgModule } from "#angular/core";
import {
ControlValueAccessor,
FormBuilder,
FormGroup,
FormsModule,
ReactiveFormsModule,
Validators,
} from "#angular/forms";
import { BrowserModule } from "#angular/platform-browser";
import { RouterModule } from "#angular/router";
import { AgmCoreModule } from "angular2-google-maps/core";
import { routerConfig } from "../app.routes";
// Plugin modules
import { Ng2Bs3ModalModule } from "ng2-bs3-modal/ng2-bs3-modal";
// App modules
import { AboutPageModule } from "../components/about-page/about-page.module";
import { AddPageModule } from "../components/add-page/add-page.module";
import { FindPageModule } from "../components/find-page/find-page.module";
import { LandingPageModule } from "../components/landing-page/landing-page.module";
import { NotFoundPageModule } from "../components/not-found-page/not-found-page.module";
import { ProfilePageModule } from "../components/profile-page/profile-page.module";
import { RegisterPageModule } from "../components/register-page/register-page.module";
import { SharedModule } from "../components/shared/shared.module";
import { AppComponent } from "./app.component";
#NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot(routerConfig),
FormsModule,
Ng2Bs3ModalModule,
AgmCoreModule,
ReactiveFormsModule,
LandingPageModule,
FindPageModule,
AddPageModule,
AboutPageModule,
RegisterPageModule,
ProfilePageModule,
NotFoundPageModule,
SharedModule,
],
providers: [
FormBuilder,
],
})
export class AppModule { }
whole app.routes.ts:
import { Routes } from "#angular/router";
import { AboutPageComponent } from "./components/about-page/about-page.component";
import { AddPageComponent } from "./components/add-page/add-page.component";
import { FindPageComponent } from "./components/find-page/find-page.component";
import { LandingPageComponent } from "./components/landing-page/landing-page.component";
import { NotFoundPageComponent } from "./components/not-found-page/not-found-page.component";
import { ProfilePageComponent } from "./components/profile-page/profile-page.component";
import { RegisterPageComponent } from "./components/register-page/register-page.component";
export const routerConfig: Routes = [
{
component: LandingPageComponent,
path: "",
},
{
path: "",
pathMatch: "full",
redirectTo: "",
},
{
component: FindPageComponent,
path: "find",
},
{
component: AddPageComponent,
path: "add",
},
{
component: RegisterPageComponent,
path: "register",
},
{
component: AboutPageComponent,
path: "about",
},
{
component: ProfilePageComponent,
path: "profile",
},
{
path: "**",
pathMatch: "full",
redirectTo: "NotFoundPageComponent",
},
{
component: ProfilePageComponent,
path: "**",
},
];
Replace your app.routes.ts file with following code:
import { Routes, RouterModule } from "#angular/router";
import { AboutPageComponent } from "./components/about-page/about-page.component";
import { AddPageComponent } from "./components/add-page/add-page.component";
import { FindPageComponent } from "./components/find-page/find-page.component";
import { LandingPageComponent } from "./components/landing-page/landing-page.component";
import { NotFoundPageComponent } from "./components/not-found-page/not-found-page.component";
import { ProfilePageComponent } from "./components/profile-page/profile-page.component";
import { RegisterPageComponent } from "./components/register-page/register-page.component";
const routerConfig: Routes = [
{
component: LandingPageComponent,
path: "",
},
{
component: FindPageComponent,
path: "find",
},
{
component: AddPageComponent,
path: "add",
},
{
component: RegisterPageComponent,
path: "register",
},
{
component: AboutPageComponent,
path: "about",
},
{
component: ProfilePageComponent,
path: "profile",
},
{
component: NotFoundPageComponent,
path: "404",
},
{
path: "**",
redirectTo: '404'
}
];
export const routerConfig = RouterModule.forRoot(routerConfig);
You need to give pathMatch: 'full', like below:
export const routerConfig: Routes = [
{
component: LandingPageComponent,
path: "",
},
{
component: ProfilePageComponent,
path: "profile",
},
{ path: '', redirectTo: 'NotFoundPageComponent', pathMatch: 'full' },
{
component: NotFoundPageComponent,
path: "**",
},
];
In your "notfoundpage.module.ts", try below:
Replace this:
import * as NotFoundPage from "./index";
With this:
import {NotFoundPageComponent } from './not-found-page.component';
And replace this:
declarations: [
NotFoundPage.NotFoundPageComponent,
],
exports: [NotFoundPage.NotFoundPageComponent]
With this:
declarations: [
NotFoundPageComponent,
],
exports: [NotFoundPageComponent]