一个组件是 2 个模块声明的一部分 angular

Question

错误错误：未捕获（承诺）：错误：类型 UserProfileComponent 是 2 个模块声明的一部分：AdminLayoutModule 和 DemoLayoutModule！请考虑将 UserProfileComponent 移动到导入 AdminLayoutModule 和 DemoLayoutModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 UserProfileComponent，然后在 AdminLayoutModule 和 DemoLayoutModule 中导入该 NgModule。错误：类型 UserProfileComponent 是 2 个模块声明的一部分：AdminLayoutModule 和 DemoLayoutModule！请考虑将 UserProfileComponent 移动到导入 AdminLayoutModule 和 DemoLayoutModule 的更高模块。您还可以创建一个导出并包含 UserProfileComponent 的新 NgModule，然后在 AdminLayoutModule 和 DemoLayoutModule 中导入该 NgModule。

演示布局

import { NgModule, Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DemoLayoutRoutes } from './demo-layout.routing';
import { DemodashboardComponent } from '../../pages/demodashboard/demodashboard.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { ComponentsModule } from 'app/components/components.module';
import { AddComponent } from 'app/components/add/add.component';
import { DemoRetrieveComponent } from 'app/components/demoretrieve/demoretrieve.component';
import {
  MatButtonModule,
  MatInputModule,
  MatRippleModule,
  MatFormFieldModule,
  MatTooltipModule,
  MatSelectModule,
  MatRadioModule,
  MatStepperModule,
  MatListModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatIconModule,
} from '@angular/material';
import { FusionChartsModule } from 'angular-fusioncharts';
import { AnalysisComponent } from 'app/components/analysis/analysis.component';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import { UserProfileViewComponent } from 'app/components/user-profile-view/user-profile-view.component';
import { ReportEditComponent } from 'app/components/report-edit/report-edit.component';
import { ReportDeleteComponent } from 'app/components/report-delete/report-delete.component';
import { ReportViewComponent } from 'app/components/report-view/report-view.component';


FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);




@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(DemoLayoutRoutes),
    FormsModule,
    MatButtonModule,
    MatRippleModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatTooltipModule,
    ComponentsModule,
    MatRadioModule,
    MatStepperModule,
    ReactiveFormsModule,
    MatListModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    FusionChartsModule,
    HttpModule,
  ],
  declarations: [
    DemodashboardComponent,
    UserProfileComponent,
    AnalysisComponent,
    AddComponent,
    DemoRetrieveComponent,
    UserProfileViewComponent,
    ReportEditComponent,
    ReportDeleteComponent,
    ReportViewComponent,
  ]
})

export class DemoLayoutModule {}

import { Routes } from '@angular/router';

import { DemodashboardComponent } from '../../pages/demodashboard/demodashboard.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { AddComponent } from 'app/components/add/add.component';
import { DemoRetrieveComponent } from 'app/components/demoretrieve/demoretrieve.component';
import { UserProfileViewComponent } from 'app/components/user-profile-view/user-profile-view.component';
import { AnalysisComponent } from 'app/components/analysis/analysis.component';
import { ReportEditComponent } from 'app/components/report-edit/report-edit.component';
import { ReportDeleteComponent } from 'app/components/report-delete/report-delete.component';
import { ReportViewComponent } from 'app/components/report-view/report-view.component';


export const DemoLayoutRoutes: Routes = [

    { path: '', pathMatch: 'full', redirectTo: 'dashboard', component: DemodashboardComponent },
    { path: 'Dashboard',      component: DemodashboardComponent },
    { path: 'User-Profile', component: UserProfileComponent},
    { path: 'User-Profile-view', component: UserProfileViewComponent},
    { path: 'add',   component: AddComponent },
    { path: 'demoretrieve',   component: DemoRetrieveComponent },
    { path: 'analysis',   component: AnalysisComponent },
    { path: 'report-edit',   component: ReportEditComponent },
    { path: 'report-delete',   component: ReportDeleteComponent },
    { path: 'report-view',   component: ReportViewComponent },
];

管理布局


import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AdminLayoutRoutes } from './admin-layout.routing';
import { AdmindashboardComponent } from '../../pages/admindashboard/admindashboard.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { IconsComponent } from '../../pages/icons/icons.component';
import { UserAccessComponent } from 'app/pages/user-access/user-access.component';


import {
  MatButtonModule,
  MatInputModule,
  MatRippleModule,
  MatFormFieldModule,
  MatTooltipModule,
  MatSelectModule,
  MatSlideToggleModule,
  MatIconModule,
  MatDatepickerModule,
  MatNativeDateModule,

} from '@angular/material';
import { AdminEditUserDetailComponent } from 'app/pages/admin-edit-user-detail/admin-edit-user-detail.component';
import { UserProfileDeleteComponent } from 'app/components/user-profile-delete/user-profile-delete.component';
import { UserProfileEditComponent } from 'app/components/user-profile-edit/user-profile-edit.component';
import { UserProfileAddComponent } from 'app/components/user-profile-add/user-profile-add.component';
import { UserProfileViewComponent } from 'app/components/user-profile-view/user-profile-view.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    MatButtonModule,
    MatRippleModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatTooltipModule,
    MatSlideToggleModule,
    MatIconModule,
    MatDatepickerModule,
    MatNativeDateModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpModule,
  ],
  declarations: [
    AdmindashboardComponent,
    IconsComponent,
    UserAccessComponent,
    AdminEditUserDetailComponent,
    UserProfileDeleteComponent,
    UserProfileEditComponent,
    UserProfileAddComponent,
    UserProfileViewComponent,
    UserProfileComponent,
  ]
})

export class AdminLayoutModule {}

import { Routes } from '@angular/router';

import { AdmindashboardComponent } from '../../pages/admindashboard/admindashboard.component';
import { UserAccessComponent } from '../../pages/user-access/user-access.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { IconsComponent } from '../../pages/icons/icons.component';
import { AdminEditUserDetailComponent } from 'app/pages/admin-edit-user-detail/admin-edit-user-detail.component';
import { UserProfileDeleteComponent } from 'app/components/user-profile-delete/user-profile-delete.component';
import { UserProfileEditComponent } from 'app/components/user-profile-edit/user-profile-edit.component';
import { UserProfileAddComponent } from 'app/components/user-profile-add/user-profile-add.component';
import { UserProfileViewComponent } from 'app/components/user-profile-view/user-profile-view.component';
import { AdminuserService } from 'app/service/adminuser.service';

export const AdminLayoutRoutes: Routes = [
   /*  {
       path: '',
       children: [ {
         path: 'dashboard',
         component: AdmindashboardComponent
     }]}, 
    { path: '', pathMatch: 'full', redirectTo: 'dashboard',  component: AdmindashboardComponent },
    { path: 'Dashboard',            component: AdmindashboardComponent },
    { path: 'User-Profile', component: UserProfileComponent},
    { path: 'User-Profile-delete',  component: UserProfileDeleteComponent },
    { path: 'User-Profile-edit',    component: UserProfileEditComponent },
    { path: 'User-Profile-view', component: UserProfileViewComponent},
    { path: 'Add-Users',             component: UserProfileAddComponent },
    { path: 'User-Access',          component: UserAccessComponent },
    { path: 'icons',                component: IconsComponent },
    { path: 'Edit-User-Detail',       component: AdminEditUserDetailComponent}
];

Answer 1

您可以创建所有共享模块，然后 UserProfileComponent 将其放入 ngmodule 声明数组


@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    MatButtonModule,
    MatRadioModule,
    MatRippleModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatTooltipModule,
    MatSlideToggleModule,
    MatIconModule,
    MatDatepickerModule,
    MatNativeDateModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpModule,
  ],
  declarations: [
    UserProfileComponent,
    UserProfileViewComponent,
  ]
})
export class AllShareModule { }

然后所有share module放到AdminLayoutModule和DemoLayoutModule ngmodule imports array

一个组件是 2 个模块声明的一部分 angular

one Component is part of the declarations of 2 modules angular

angular-cli-v7