I have a problem when i work with angular, this is my project structure (begin from app folder, please look at super-admin folder) :
- Modules
---- home [+]
---- admin [+]
---- super-admin
-------- super-admin-routing.module.ts
-------- super-admin.module.ts
-------- (And html, scss, component file)
-------- pages
------------ auth [+]
------------ unauth [+]
------------ shared
---------------- shared.component.ts
---------------- (And html, scss file)
- cores [+]
- config [+]
- shared [+]
- strores [+]
- app-routing.module.ts
- app.module.ts
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './modules/home/home.component';
import { AdminComponent } from './modules/admin/admin.component';
import { SuperAdminComponent } from './modules/super-admin/super-admin.component';
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "home",
component: HomeComponent
},
{
path: "admin",
component: AdminComponent
},
{
path: "super-admin",
component: SuperAdminComponent,
loadChildren: './modules/super-admin/super-admin.module#SuperAdminModule'
},
{
path: "**",
component: HomeComponent
}
];
@NgModule({
declarations: [
HomeComponent,
AdminComponent,
SuperAdminComponent
],
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
super-admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SuperAdminRoutingModule } from './super-admin-routing.module';
import { SharedComponent } from './pages/shared/shared.component';
@NgModule({
imports: [
CommonModule,
SuperAdminRoutingModule
],
declarations: [SharedComponent]
})
export class SuperAdminModule { }
super-admin-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { AuthComponent } from './pages/auth/auth.component';
const routes: Routes = [
{
path: "login",
component: LoginComponent
},
{
path: "",
component: AuthComponent,
loadChildren: "./pages/auth/auth.module#AuthModule"
},
{
path: "home",
component: AuthComponent,
loadChildren: "./pages/auth/auth.module#AuthModule"
},
{
path: "**",
component: AuthComponent
},
];
@NgModule({
declarations: [
LoginComponent,
AuthComponent
],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SuperAdminRoutingModule { }
super-admin.component.html
<router-outlet></router-outlet>
<app-shared></app-shared>
and finaly is shared.component.ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-shared',
templateUrl: './shared.component.html',
styleUrls: ['./shared.component.scss']
})
export class SharedComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Please look at super-admin.module.ts
file, i imported and declared ShareComponent in super-admin.module.ts
but i can't use it in super-admin.component.html
, it's say:
'app-shared' is not a known element:
- If 'app-shared' is an Angular component, then verify that it is part of this module.
- If 'app-shared' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
I think i miss something right?
I ng s
it for 7 times but it still not work
Since your super-admin.component belongs to the app.module.ts you need to export the SharedComponent
from the SuperAdminModule and import SuperAdminModule
in your app.module.ts
Change super-admin.module as,
@NgModule({
imports: [
CommonModule,
SuperAdminRoutingModule
],
declarations: [SharedComponent],
exports : [SharedComponent]
})
EDIT
As mentioned in the comment, add it in the app.routing.module.ts
@NgModule({
declarations: [
HomeComponent,
AdminComponent,
SuperAdminComponent
],
imports: [RouterModule.forRoot(routes), SuperAdminModule],
exports: [RouterModule]
})
export class AppRoutingModule { }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With