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,
]
Related
In my Angular 9 application, I've created a separate admin routing module and calling it in app.module to initialize. But the routes for the components like login and signup are not getting called nor the component load on the view while getting error in the console. Only the AdminComponent is getting loaded. You can check my GitHub repository if you want to https://github.com/tridibc2/sample-angular.
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 { }
I've cloned your repo from master and here is the solution I've come about.
I've created an examples.routing.ts and added the following code.
const routes: Routes = [
{ path: 'user-profile', component: ProfileComponent },
{ path: 'signup', component: SignupComponent },
{ path: 'landing', component: LandingComponent },
];
#NgModule({
imports: [CommonModule, BrowserModule, RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ExamplesRoutingModule {}
I've added ExamplesRoutingModule to module imports array in examples.module.ts
#NgModule({
imports: [CommonModule, FormsModule, NgbModule, ExamplesRoutingModule],
declarations: [LandingComponent, SignupComponent, ProfileComponent],
})
export class ExamplesModule {}
Then inside the app.module, I've removed the RouterModule imports from imports array
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
FooterComponent
],
imports: [
BrowserModule,
NgbModule,
FormsModule,
ComponentsModule,
ExamplesModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And inside AppRoutingModule I've exported the RouterModule
const routes: Routes =[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: ComponentsComponent }
];
#NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes,{
useHash: true
})
],
exports: [
RouterModule
],
})
export class AppRoutingModule { }
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'm experimenting with Angular Lazy Load, I have a strange error, while one of the route work flawlessly, while the other (similar structure and implementation) give me an error.
Here is my simple code:
in app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
const routes: Routes = [
{
path: 'customers',
loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
path: 'orders',
loadChildren: 'app/orders/orders.module#OrdersModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
while in orders.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { OrdersRoutingModule } from './orders-routing.module';
import { OrderListComponent } from './order-list/order-list.component';
#NgModule({
imports: [
CommonModule,
OrdersRoutingModule
],
declarations: [OrderListComponent]
})
export class OrdersModule { }
and in orders-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { OrderListComponent } from './order-list/order-list.component';
const routes: Routes = [
{
path: '',
component: OrderListComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule { }
when i go to localhost:4200/orders everything works flawlessly, i.e. no error, and the lazy loading feature works as expected.
while in customers.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomerListComponent } from './customer-list/customer-list.component';
#NgModule({
imports: [
CommonModule,
CustomersRoutingModule
],
declarations: [CustomerListComponent]
})
export class CustomersModule { }
and in customers-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { CustomerListComponent } from './customer-list/customer-list.component';
const routes: Routes = [
{
path: '',
component: CustomerListComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CustomersRoutingModule { }
But when i go to localhost:4200/customers it will give me an error:
Error: Component CustomerListComponent is not part of any NgModule or the module has not been imported into your module.
Why is this happening only on customers route? How to fix this?
The problem is when directly redirecting to
http://localhost:4200/about working fine but after pushing into
nginx server, when I try to redirect to www.webpage.com/about
getting error(nginx 404 error).
But its working fine when you redirect to www.webpage.com and then click on about.
Getting error only I am trying to open direct url as www.webpage.com/about or www.webpage.com/contact or
www.webpage.com/blog
import { NgModule } from '#angular/core';
import { HttpModule } from '#angular/http';
import { RouterModule } from "#angular/router";
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { appRoutes } from "./app-routing.module";
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { BlogComponent } from './blog/blog.component';
import { ClientsComponent } from './clients/clients.component';
import { ContactComponent } from './contact/contact.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
BlogComponent,
ClientsComponent,
ContactComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot(appRoutes)
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { ClientsComponent } from './clients/clients.component';
import { ContactComponent } from './contact/contact.component';
import { BlogComponent } from './blog/blog.component';
export const appRoutes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'clients', component: ClientsComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'page-not-found', component: PageNotFoundComponent },
{ path: '**', component: HomeComponent }
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
You will need to configure your web server to redirect all unknown (404) requests to index.html, which will allow the Angular application to then route your user to the desired route/view.
You can try something like this :
error_page 404 =200 /index.html;
Source : How do I force redirect all 404's (or every page, whether invalid or not) to the homepage?
try_files $uri $uri/ /index.html;
This line has to be added in the nginx.conf incase of Windows server or in /etc/nginx/sites-enabled/default in case of ubuntu server.
That piece of code will look for angular paths before throwing a 404 error.
angular deployment check this out