Angular '；组件'；不是角6中的已知元素

我在使用angular时遇到问题，这是我的项目结构（从应用程序文件夹开始，请查看超级管理员文件夹）：

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

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

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

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

@NgModule({
    declarations: [
        HomeComponent,
        AdminComponent,
        SuperAdminComponent
    ],
    imports: [RouterModule.forRoot(routes), SuperAdminModule],
    exports: [RouterModule]
})
export class AppRoutingModule { }

app-routing.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 { }

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

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

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

@NgModule({
    declarations: [
        HomeComponent,
        AdminComponent,
        SuperAdminComponent
    ],
    imports: [RouterModule.forRoot(routes), SuperAdminModule],
    exports: [RouterModule]
})
export class AppRoutingModule { }

super-admin.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 { }

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

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

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

@NgModule({
    declarations: [
        HomeComponent,
        AdminComponent,
        SuperAdminComponent
    ],
    imports: [RouterModule.forRoot(routes), SuperAdminModule],
    exports: [RouterModule]
})
export class AppRoutingModule { }

super-admin-routing.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 { }

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

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

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

@NgModule({
    declarations: [
        HomeComponent,
        AdminComponent,
        SuperAdminComponent
    ],
    imports: [RouterModule.forRoot(routes), SuperAdminModule],
    exports: [RouterModule]
})
export class AppRoutingModule { }

super-admin.component.html

<router-outlet></router-outlet>
<app-shared></app-shared>

请查看

super admin.module.ts

文件，我在

super admin.module.ts

中导入并声明了ShareComponent，但我不能在

super admin.component.html

中使用它，它说：

“应用程序共享”不是已知元素：

如果“应用共享”是一个角度组件，则验证它是否是此模块的一部分

如果“app shared”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息

我想我错过了什么，对吗

---

I

ng s

使用了7次，但仍然不起作用

，因为您的超级管理员组件属于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 { }

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

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

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

@NgModule({
    declarations: [
        HomeComponent,
        AdminComponent,
        SuperAdminComponent
    ],
    imports: [RouterModule.forRoot(routes), SuperAdminModule],
    exports: [RouterModule]
})
export class AppRoutingModule { }

将super-admin.module更改为

@NgModule({
  imports: [
    CommonModule,
    SuperAdminRoutingModule
  ],
  declarations: [SharedComponent],
  exports : [SharedComponent]
})

编辑

如注释中所述，将其添加到app.routing.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 { }

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

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

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

@NgModule({
    declarations: [
        HomeComponent,
        AdminComponent,
        SuperAdminComponent
    ],
    imports: [RouterModule.forRoot(routes), SuperAdminModule],
    exports: [RouterModule]
})
export class AppRoutingModule { }

---

如果要在模块中声明任何组件，并且要在其他模块中导入，请确保正在导出组件

超级管理模块as， 将组件导入其他模块。必须确保将共享模块导入到使用导出组件的模块中

app-routing.module.ts

---

你好@Sajeetharan，当我从

super admin

导出

ShareComponent

并将

super admin.module

导入

app.module

时，它仍然不起作用。但当我将它添加到

app routing.module

中时，它会起作用。是的，你节省了我的时间，谢谢你！添加到app-routing.module.ts就成功了。但是，当添加app-routing.module.ts而不是app.module.ts时，它怎么会起作用呢？是的，这就是代码不起作用的原因，我忘记了从

超级管理模块导出和导入到
app.routing
。非常感谢。