We Keep Coding

NullInjectorError: StaticInjectorError(i)[s -> e] : Angular 8

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,
]

Angular 9 forChild module not getting loaded

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 { }

Angular 6 routing redirect not redirecting properly

When I go to localhost:4200, I'm expecting to be directed to AboutComponent (on the /home path), and am also expecting /home to be appended to the URL, but instead I'm getting redirected to the PageNotFoundComponent, and /home is not being appended to the URL. Any ideas what I'm doing wrong? Thank you!
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { SignupComponent } from '../signup/signup.component';
const routes: Routes = [
{path: 'signup', component: SignupComponent },
{path: '' , redirectTo: '/home', pathMatch: 'full'},
{path: '**', component: PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { Router } from '#angular/router';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { AdminModule } from './admin/admin.module';
import { AppRoutingModule } from './app-routing.module';
import { AboutModule } from './about/about.module';
#NgModule({
imports: [
BrowserModule,
FormsModule,
AboutModule,
AppRoutingModule
],
declarations: [
AppComponent,
PageNotFoundComponent
],
providers: [CookieService],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(router: Router) {
}
}
about-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AboutComponent } from './about.component';
import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';
const aboutRoutes: Routes = [
{path: 'home', component: AboutComponent}
{path: '**', component: PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forChild(aboutRoutes)],
exports: [RouterModule]
})
export class AboutRoutingModule { }
about.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AboutRoutingModule } from './about-routing.module';
import { AboutComponent } from './about.component';
#NgModule({
declarations: [AboutComponent],
imports: [
CommonModule,
AboutRoutingModule
]
})
export class AboutModule { }

App-routing module is the parent whereas about-routing module is child, So when you will get triggered with '/home' you need to tell the parent to load the child routes that will be done like
const routes: Routes = [
{path: 'signup', component: SignupComponent },
{path: '' , redirectTo: '/home', pathMatch: 'full'},
{
path: 'home',
loadChildren: './About/about.module.ts#AboutModule'
},
{path: '**', component: PageNotFoundComponent}
];
when we will provide 'loadChildren' in routes, then the parent will load the child module(About module), and routes forchild is called, then will work.
why it is failing because there no route is mentioned for '/home' in parent so it choose the
{path: '**', component: PageNotFoundComponent}
so pageNotFoundComponent is loaded

the problme is the
order
of your routing defintion array .. try this:
const routes: Routes = [
{path: '' , redirectTo: '/home', pathMatch: 'full'}, // as first
{path: 'signup', component: SignupComponent },
{path: '**', component: PageNotFoundComponent} // always as last
];

Component CustomerListComponent is not part of any NgModule or the module has not been imported into your module

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?

Angular router error - Invalid configuration of route

Using angular 4, I am redirecting the route with an empty path to navbar component. So I have added pathMatch: full and I placed this entry at the top in routes array.
But I still get the following error:
zone.js:522 Unhandled Promise rejection:
Invalid configuration of route '': Array cannot be specified ;
Zone: root ;
Task: Promise.then ;
Value: ZoneAwareError {
__zone_symbol__error: Error: Invalid configuration of route '': Array
cannot be specified
at Zone.run (http://localhost:4200/polyfills.bundle.js:6405:43) [ => angular]
route.component.ts
import {Route} from '#angular/router';
import { AppComponent } from './app.component';
import {NavbarComponent} from './navbar/navbar.component';
import {RegistrationComponent} from './registration/registration.component';
export const appRoutes:Route =[
{
path: '',
redirectTo: 'navbar',
pathMatch: 'full'
}, {
path: 'home',
component: NavbarComponent
}, {
path: 'navbar',
component: NavbarComponent
}, {
path: 'registration',
component: RegistrationComponent
}
];
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import {NavbarComponent} from './navbar/navbar.component';
import {RegistrationComponent} from './registration/registration.component';
import { appRoutes } from './app.route';
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
RegistrationComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([appRoutes])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Just change
From
RouterModule.forRoot([appRoutes])
To
RouterModule.forRoot(appRoutes)

export const appRoutes: Route[] = [
instead of
export const appRoutes:Route =[