We Keep Coding

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

How to use directive in more than one module in angular 2

I declare directive in two module then return error is Type PermissionDirective is part of the declarations of 2 modules and i declare only one module then return error is Can't bind to 'isPermission' since it isn't a known property of 'button'. What is the problem here.
Please understand my app structure.
permission.directive.ts
import { Directive, Input } from '#angular/core';
import { TemplateRef, ViewContainerRef } from '#angular/core';
import { LoginInfoService } from '../service/auth.service';
#Directive({ selector: '[isPermission]' })
export class PermissionDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef,
private _auth: LoginInfoService
) {
}
#Input() set isPermission(_module_action: Array<string>) {
let permission = this._auth.isPermission(_module_action[0], _module_action[1]);
if (permission) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
layout.route.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LayoutComponent } from './layout.component';
const layoutRoutes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: '',
loadChildren: () => import('app/dashboard/dashboard.module').then(m => m.DashboardModule),
},
{
path: 'users',
loadChildren: () => import('app/users/users.module').then(m => m.UsersModule),
}
]
}
];
export const layoutRouting: ModuleWithProviders = RouterModule.forChild(layoutRoutes);
layout.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { PermissionDirective } from 'app/common/directives/permission.directive';
#NgModule({
imports: [
CommonModule,
layoutRouting
],
exports:[],
declarations: [
PermissionDirective
],
providers:[]
})
export class LayoutModule { }
dashboard.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
...
import { PermissionDirective } from 'app/common/directives/permission.directive';
#NgModule({
imports: [
CommonModule,
dashboardRouting,
....
],
declarations: [
DashboardComponent,
PermissionDirective
],
providers: []
})
export class DashboardModule { }
SharedModule
import { NgModule, Optional, SkipSelf, ModuleWithProviders } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
.........
import { PermissionDirective } from 'app/common/directives/permission.directive';
#NgModule({
imports: [
....
],
declarations: [
....
PermissionDirective
],
exports: [
...
PermissionDirective,
...
],
providers: [
...
]
})
export class SharedModule {
constructor (#Optional() #SkipSelf() parentModule: SharedModule, private dateAdapter:DateAdapter<Date>) {
if (parentModule) {
throw new Error(
'SharedModule is already loaded. Import it in the AppModule only');
}
this.dateAdapter.setLocale('en-in'); // DD/MM/YYYY
}
}

I would recommend you create a shared module that import the directive then you can import that module to your module like this
shared.module.ts
#NgModule({
exports: [PermissionDirective],
declarations: [PermissionDirective]
})
export class SharedModule {}
then import SharedModule to your module
#NgModule({
imports: [
CommonModule,
dashboardRouting,
SharedModule
],
declarations: [
DashboardComponent
],
providers: []
})
export class DashboardModule { }
#NgModule({
imports: [
CommonModule,
layoutRouting,
SharedModule
],
exports:[],
declarations: [
],
providers:[]
})
export class LayoutModule { }

Declare your Directive in parent module ie(app.module.ts)
and export the directive to use it over the complete project
#NgModule({
....
export:[PermissionDirective]
})
export class AppModule { }

I remove some code in shared module.
import { NgModule, Optional, SkipSelf, ModuleWithProviders } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
.........
import { PermissionDirective } from 'app/common/directives/permission.directive';
#NgModule({
imports: [
....
],
declarations: [
....
PermissionDirective
],
exports: [
...
PermissionDirective,
...
],
providers: [
...
]
})
export class SharedModule {
// I remove this code
/*
constructor (#Optional() #SkipSelf() parentModule: SharedModule, private dateAdapter:DateAdapter<Date>) {
if (parentModule) {
throw new Error(
'SharedModule is already loaded. Import it in the AppModule only');
}
this.dateAdapter.setLocale('en-in'); // DD/MM/YYYY
}
*/
}

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?

Direct loading routes in Angular 2

I have an Angular application that navigates to two routes:
http://localhost:8080/ /* Landing page */
http://localhost:8080/details/:id /* Result page */
Whenever I navigate to, for example, http://localhost:8080/details/4235. I'm met with the error: Cannot GET /details/4235
Here is how I setup my routes, in my:
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage, pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
Which I import into my:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms'; // <-- NgModel lives here
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { AppRoutingModule } from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
LandingPage,
ResultPage
],
imports: [
BrowserModule,
FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
HttpModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm having trouble finding a working Angular 2 method of dealing with direct-linking to a url.
How can I setup direct linking in Angular 2, so that when I load, say, http://localhost:8080/details/4235 it loads my ResultPage component.
edit:
Loading http://localhost:8080/#/details/4235 , is valid, but it re-loads the LandingPage component. And I am trying to load the ResultPage component when there is an extended url.

import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from
'./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
here you're loading the empty path first. Then the other paths will load. Update the empty path route. Keep it at last in the hierarchy.
Updated Code:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from '
./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{
path: 'details/:id', component: ResultPage
},
{ path: '', component: LandingPage } //<-- here
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
EDIT:
Also there might be problem that your browser doesn't support HTML5 pushState. I'm referring some SO links that might help out.
Configure history.pushState for Angular 2
enter link description here
Angular 2.0 router not working on reloading the browser

'router-outlet' is not a known element Angular2

Repo: https://github.com/leongaban/lifeleveler.io
Not sure why I'm getting this error, I have Router imported in my app.component.ts
I'm trying to use the app.component to hold the main <router-outlet>, and serve up the login view first.
app.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './shared/services/auth.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/throw';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule,
routing
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
AuthService,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
app.component.ts
import { Component, OnInit } from '#angular/core';
import { User } from './shared/models/user';
import { Router } from '#angular/router';
#Component({
selector: 'my-app',
templateUrl: './app/app.component.html',
styleUrls: ['./app/app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit() {
}
}
app.component.html
<router-outlet></router-outlet>
app.routing.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './login/login.component';
export const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
}
]
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

I just refactored your project with webpack , your same code works just fine:
github repo
first :
npm install -g #angular/cli
npm install
ng serve

It looks like you might be importing the RouterModule multiple times.
I would remove this line from your app.routing.ts
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
In your app.module I would import your routes with:
import { routes } from './app.routing';
And then import the RouterModule as:
RouterModule.forRoot(routes)

You should add the RouterModule.forRoot(routes) statement inside your AppModule:
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes)
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
AuthService,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
and remove it from your app.routing.ts file:
export const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
}
];

Just import RouterOutlet
import { RouterOutlet } from '#angular/router';