Problem creating a component

[cdholley21]

I am trying to create a new component and then add it to the sidebar layout element.

I generate all the parts of the new module and and it to the sidebar HTML.

When clicking on the new sidebar link, instead of loading the page it loads the main dashboard page slightly off center.

[artemioestrella]

I am trying too with the same result. The workaround is copy and paste blank-page folder (in layout folder), rename with the name for your component and rename all the archives in new folder too. After that, change the archive's content with the component's name and module’s name.

Open the layout-routing.module.ts and add the next line:

{ path: 'your-new-component', loadChildren: './your-new-component/your-new-module.module#ModuleNameModule' },

[artemioestrella]

In my example I added the countries component:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';

const routes: Routes = [
	{
		path: '',
		component: LayoutComponent,
		children: [
			{ path: '', redirectTo: 'dashboard' },
			{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
			{ path: 'countries', loadChildren: './countries/countries.module#CountriesModule' },
			{ path: 'charts', loadChildren: './charts/charts.module#ChartsModule' },
			{ path: 'tables', loadChildren: './tables/tables.module#TablesModule' },
			{ path: 'forms', loadChildren: './form/form.module#FormModule' },
			{ path: 'bs-element', loadChildren: './bs-element/bs-element.module#BsElementModule' },
			{ path: 'grid', loadChildren: './grid/grid.module#GridModule' },
			{ path: 'components', loadChildren: './bs-component/bs-component.module#BsComponentModule' },
			{ path: 'blank-page', loadChildren: './blank-page/blank-page.module#BlankPageModule' }
		]
	}
];

@NgModule({
	imports: [RouterModule.forChild(routes)],
	exports: [RouterModule]
})
export class LayoutRoutingModule {}

[rokive]

Solve this issue add two module countries & countries-routing cli-> ng g module countries & ng g module countries-routing

remove CountriesComponent in layout.module.ts

ng build & reload

[achrafbenalaya]

@rokive tried your solution but didnt work for me !

[rokive]

please run ng build command, if not work then you open a new port of your local host new port command -> ng serve --port 4201.

[TyTran]

@rokive thanks that worked.

I used: ng g module /layout/[module-name] --routing remember to remove the components in the layout.module

[zoumhane]

@rokive @TyTran i try to do same thing like you, but still didn't work, i removed CountriesComponent from layout.module.ts