app-routing
https://prnt.sc/20zqxzy
const routes: Routes = [
{
path: '',
loadChildren: () => import(/* webpackChunkName: "index" */ './pages/module/main/index-page/index-page.module').then(m => m.IndexPageModule)
}, {
path: 'user',
loadChildren: () => import(/* webpackChunkName: "user" */ './pages/module/user/user-routing/user-routing.module').then(m => m.UserRoutingModule)
}
]
#NgModule({
imports: [RouterModule.forRoot(routes, {
initialNavigation: 'enabledBlocking'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
index-page-routing
https://prnt.sc/20zr52z
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { IndexPageComponent } from './index-page.component';
// Pages
const routes: Routes = [
{
path: '',
component: IndexPageComponent,
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class IndexPageRoutingModule { }
But here when i build a project
https://prnt.sc/20zr994
It's have only main.js files and no have any lazy chunk files. what i doing wrong ?
Check these modules for static import into any non lazy loaded module.(In most cases AppModule)
Related
There are some similar discussions, but the solutions did not work. I've attempted to recreate the module a couple of times now and Angular still throws the error Maximum call stack size exceeded. The admin component is brand new as well. All of these have been generated using CLI.
Here's my code:
App Routing
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AuthGuard } from './guards/auth/auth.guard';
const routes: Routes = [
{
path: 'dashboard',
pathMatch: 'full',
data: { authorized: [true] },
canActivate: [AuthGuard],
loadChildren: () =>
import('./modules/feature/dashboard/dashboard.module').then(
(m) => m.DashboardModule
),
},
///// this admin import is the issue and I know this because if I comment it out then the app works
///// fine...
{
path: 'admin',
pathMatch: 'full',
data: { authorized: [true] },
canActivate: [AuthGuard],
loadChildren: () =>
import('./modules/feature/admin/admin.module').then((m) => m.AdminModule),
},
{
path: '',
pathMatch: 'full',
data: { authorized: [false] },
loadChildren: () =>
import('./modules/feature/website/website.module').then(
(m) => m.WebsiteModule
),
},
// {
// path: '*',
// component: MainComponent,
// data: { authorized: [false] },
// },
];
#NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
exports: [RouterModule],
})
export class AppRoutingModule {}
Module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AdminRoutingModule } from 'src/app/routing/feature/admin-routing/admin-routing.module';
import { AdminComponent } from 'src/app/components/feature/admin/admin.component';
import { AdminService } from 'src/app/services/feature/admin.service';
#NgModule({
declarations: [AdminComponent],
imports: [CommonModule, AdminRoutingModule],
providers: [AdminService],
})
export class AdminModule {}
Admin Routing
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { AdminComponent } from 'src/app/components/feature/admin/admin.component';
const routes: Routes = [
{
path: '',
component: AdminComponent,
children: [],
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AdminRoutingModule {}
Sometimes you bang your head against the wall because you've looked over your code a hundred times. Knowing good and well that it's not an error on your end. To find that the error can be solved via something simple. Like stopping the server, closing visual studio....re-opening visual studio and re-booting the server.
Which btw, solved my issue.
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,
]
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'm new in Angular 5 and trying to build an app with client side and admin side. So I did some search and made this:
AppRoutingModule
const appRoutes: Routes = [
{
path: '',
loadChildren: 'app/website/public.module#PublicModule'
},
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule'
}
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
PublicRoutingModule
const PUBLIC_ROUTES: Routes = [
{
path: '',
component: HomeComponent,
}
];
#NgModule({
imports: [RouterModule.forChild(PUBLIC_ROUTES)],
exports: [RouterModule]
})
export class PublicRoutingModule { }
AdminRoutingModule
const ADMIN_ROUTES: Routes = [
{
path: '',
component: DashboardComponent,
data: {
title: 'Dashboard'
},
children: [
]
}
];
#NgModule({
imports: [RouterModule.forChild(ADMIN_ROUTES)],
exports: [RouterModule]
})
export class AdminRoutingModule { }
And I have imported AppRoutingModule in AppModule, and also imported PublicRoutingModule in PublicModule, also imported AdminRoutingModule in AdminModule.
When I run the app, there is no errors but the HomeComponent is not been rendered initially.
Can anyone tell what's the problem here? Thank you.
For lazy load module, I think you should add components' declarations to their own router module.
Example for PublicRoutingModule(same for AdminRoutingModule)
const PUBLIC_ROUTES: Routes = [
{
path: '',
component: HomeComponent,
}
];
#NgModule({
declarations: [ HomeComponent ], // add declaration
imports: [RouterModule.forChild(PUBLIC_ROUTES)],
exports: [RouterModule]
})
export class PublicRoutingModule { }
BTW, while debugging routing problems, you should enable tracing to see what really happened during navigation.
#NgModule({
imports: [RouterModule.forRoot(appRoutes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }