We Keep Coding

Angular Routing : routes always redirect to 404 page

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

Trouble implementing lazy loaded feature module Angular 8

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

Angular2 - Router does not pick up route/home path

I have and Angular2 app using this Angular2 Webpack Starter. I just added a fallback route to my app.routes.ts file after adding its module (NotFoundModule) to app.module.ts and everything works great except now my home path('') does not register anymore and the NotFoundComponent loads. The code is below:
import { Routes } from '#angular/router';
import { HomeComponent } from './home';
import { NotFoundComponent } from './notfound/notfound.component';
import { DataResolver } from './app.resolver';
export const ROUTES: Routes = [
{
path: '', component: HomeComponent },
{
path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
},
{
path: 'open-account', loadChildren: './open-account/#OpenAccountModule'
},
...
...
...
{
path: '**', component: NotFoundComponent
},
];
How can I fix this problem so my Home route will work properly again and the NotFoundComponent won't load in its place?

When you have routes that use '' for their path and don't have children, you'll want to specify pathMatch: 'full' for that route.
export const ROUTES: Routes = [
{
path: '', pathMatch: 'full', component: HomeComponent },
{
path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
},
{
path: 'open-account', loadChildren: './open-account/#OpenAccountModule'
},
...
...
...
{
path: '**', component: NotFoundComponent
},
];
See https://angular.io/docs/js/latest/api/router/index/Routes-type-alias.html#!#matching-strategy for the reasoning.

Angular 2 - 404 page not displaying

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]

Angular2 nested module routing with same routes

I'm facing a common problem in a backend app.
I got several ressources which can be viewed by consulting this kind of routes:
reports/view/:id
campains/view/:id
suts/view/:id
certifications/view/:id
Note that the route ends with the same part : /view/:id.
My app modules are :
App.module
|-MainLayoutModule
|- ReportModule
|- CampaignModule
|- SutModule
|- ...
Each module (except mainlayoutModule) defines it's own routing.
App.routing
{
path:'certification',
loadChildren: './+certification/certification.module#CertificationModule',
canActivate:[AuthGuard]
},
{
path:'reports',
loadChildren: './+report/report.module#ReportModule'
canActivate:[AuthGuard],
},
{
path:'suts',
loadChildren: './+sut/sut.module#SutModule',
canActivate:[AuthGuard]
},
{
path:'campaigns',
loadChildren: './+campaign/campaign.module#CampaignModule',
canActivate:[AuthGuard]
},...
Report.routing
import { Routes, RouterModule } from '#angular/router';
import { ReportDetailsComponent } from "./ReportDetails/report-details.component";
import { ReportDetailsResolver } from "./ReportDetails/report-details.resolver";
import { ReportListComponent } from "./ReportsList/report-list.component";
export const reportRoutes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'list'
},
{
path: 'view/:id',
component: ReportDetailsComponent,
data: {
pageTitle: 'Report detail'
},
resolve: {
report: ReportDetailsResolver
},
pathMatch: 'full'
},
{
path: 'list',
component: ReportListComponent,
data: {
pageTitle: 'Reports Lists'
},
pathMatch: 'full'
}
];
export const reportRouting = RouterModule.forChild(reportRoutes);
Campaign.routing
import { Routes, RouterModule } from '#angular/router';
import { CampaignDetailsComponent } from './campaignDetails/campaign-details.component'
import { CampaignDetailsResolver } from './campaignDetails/campaign-details.resolver'
import { CampaignListsComponent } from './campaignList/campaign-list.component'
export const campaignRoutes: Routes = [
{
path: 'view/:id',
component: CampaignDetailsComponent,
data: {
pageTitle: 'Campaign detail'
},
resolve: {
campaign: CampaignDetailsResolver
},
pathMatch: 'full'
},
{
path: 'lists',
component: CampaignListsComponent,
pathMatch: 'full'
}
];
export const campaignRouting = RouterModule.forChild(campaignRoutes);
The campaign module needs to use directive from the report Component, here is it's code :
#NgModule({
imports: [
CommonModule,
campaignRouting,
ReportModule
],
declarations: [CampaignDetailsComponent,CampaignListsComponent],
providers:[CampaignDetailsResolver]
})
export default class CampaignModule { }
Here is the problem : when i go to the route "/campaigns/view/:id" the router outlets loads content from the report component module and not from the campaign component...
A stupid solution would be to have unique route in each module (like /view Report/:id, /viewCampaign/:id... ) but i think i'm missing something in my app routing configuration....
Any idea on how to solve this kind of problem?
Thanks,
Olivier

I think the best solution here could be to change the way that you create your app hierarchy.
By using a "root" component for each module (report, campaign and stut), you could define "children" routes.
Here is an example from the "Routing and Navigation" Guide :
const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
#NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
],
exports: [
RouterModule
]
})
export class CrisisCenterRoutingModule { }
Also, i would recommend to follow a "Routing Module" way, like the one presented on the same guide :
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
const heroesRoutes: Routes = [
{ path: 'heroes', component: HeroListComponent },
{ path: 'hero/:id', component: HeroDetailComponent }
];
#NgModule({
imports: [
RouterModule.forChild(heroesRoutes)
],
exports: [
RouterModule
]
})
export class HeroRoutingModule { }