propertylist/propertylist.component.ts 中类型 NgbdModalContent 中的错误是 2 个模块声明的一部分答案

【问题标题】：ERROR in Type NgbdModalContent in propertylist/propertylist.component.ts is part of the declarations of 2 modulespropertylist/propertylist.component.ts 中类型 NgbdModalContent 中的错误是 2 个模块声明的一部分
【发布时间】：2019-11-07 05:50:51
【问题描述】：

我在属性组件中使用 NgbdModalContent 和 PropertylistComponent 类，在进行生产构建时出现以下错误。在ionic serve --open 中一切正常，但在提供生产版本时会导致问题。

我创建了要导出的 propertylist.component.module.ts NgbdModalContent。我会用代码解释一切。

这里我使用的是 propertylistComponent。

propertylist.component.html

   <tbody>
    <tr *ngFor="let policy of table let i = index">
        <td style="font-weight:700">{{policy.propertyid}}</td>
        <td (click)="propertydetail(policy)">{{policy.surveyor}} 
        </td>
        <td>{{policy.builder}}</td>
        <td style="font-weight:700">{{policy.project}}</td>
        <td>{{policy.projecttype}}</td>
        <td>{{policy.Units}}</td>
        <td>{{policy.floors}}</td>
        <td>{{policy.Added_date}}</td>
        <td style="text-align: center" (click)="datapolicy(policy)"> 
         <img src= "/assets/image/location.svg" alt="" style="width: 17px;
            height: 21px;
            object-fit: contain;
            opacity: 0.79;"></td>
       </tr>
  </tbody>

propertylist.component.ts

        import { Component, OnInit,Input } from '@angular/core';

        import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';


        @Component({
          selector: 'ngbd-modal-content',
          template: `
            <div class="modal-header">
              <h4 class="modal-title">Location Details</h4>
              <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
           <b>Project Name</b>: {{policy.project}}<br>
           <b>Address</b>: <br>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
            </div>
          `
        })
        export class NgbdModalContent {
          @Input() policy:any; 

          constructor(public activeModal: NgbActiveModal) {}
        }
        @Component({
          selector: 'app-propertylist',
          templateUrl: './propertylist.component.html',
          styleUrls: ['./propertylist.component.scss']
        })
        export class PropertylistComponent implements OnInit {

          order: string = 'propertyid';

          reverse: boolean = false;
          table:any= []


          constructor(private modalService: NgbModal) {
            this.table = [


            { propertyid: 1,project:'sun',surveyor:'Rohit Patil', builder:"Mukesh", projecttype:"Residential", Units:34, floors:4, Added_date:"Dec 1993" },
              { propertyid: 2,project:'Mehul Test',surveyor:'Rohit Shetty',builder:"Rahul", projecttype:"Residential", Units:35, floors:4, Added_date:"Dec 1993" },
              { propertyid: 3,project:'SNMP',surveyor:'Rohit Patil1', builder:"Rahul", projecttype:"Residential", Units:36, floors:4, Added_date:"Dec 1993" },
              { propertyid: 4,project:'GSTC',surveyor:'pk Patil', builder:"Mukesh", projecttype:"Residential", Units:37, floors:4, Added_date:"Dec 1993" },
              { propertyid: 5,project:'sun1',surveyor:'cl Patil', builder:"Mukesh", projecttype:"Residential", Units:38, floors:4, Added_date:"Dec 1993" },
              { propertyid: 6,project:'sun2',surveyor:'Rohit Patil', builder:"Mukesh", projecttype:"Residential", Units:34, floors:4, Added_date:"Dec 1993" },
              { propertyid: 7,project:'sun3',surveyor:'Rohit Patil', builder:"Mukesh", projecttype:"Residential", Units:34, floors:4, Added_date:"Dec 1993" },
              { propertyid: 8,project:'sun4',surveyor:'Rohit Patil', builder:"Mukesh", projecttype:"Residential", Units:34, floors:4, Added_date:"Dec 1993" },
              { propertyid: 9,project:'sun5',surveyor:'Rohit Patil', builder:"Mukesh", projecttype:"Residential", Units:34, floors:4, Added_date:"Dec 1993" },
              { propertyid: 10,project:'sun',surveyor:'Rohit Patil', builder:"Mukesh",  Units:34, floors:4, Added_date:"Dec 1993" },
            ]
               datapolicy(policy: object){
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.policy = policy;
  } 

           }

propertylist.component.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

    import { NgbdModalContent, PropertylistComponent } from './pendingpropertylist.component';

    @NgModule({
      imports: [BrowserModule, NgbModule],
      declarations: [NgbdModalContent, PropertylistComponent],
      exports: [NgbdModalContent],
      bootstrap: [NgbdModalContent],
      entryComponents: [PropertylistComponent]
    })
    export class NgbdModalComponentModule {}

app.module.ts

    import { NgbdModalContent, PropertylistComponent} from 
   './pendingpropertylist/pendingpropertylist.component';

    @NgModule({

    declarations: [
    PropertylistComponent,
    NgbdModalContent
   ],

    imports: [
    NgbModule
    ]

    bootstrap: [AppComponent],
     entryComponents: [PropertylistComponent,NgbdModalContent]

我在 ng build --prod 之后遇到的错误是

类型 NgbdModalContent 中的错误

/home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.ts 是 2 个模块声明的一部分：AppModule 在 /home/hh/vibeeportal/src/app/app.module.ts 和 NgbdModalComponentModule 在 /home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.module.ts！请考虑将 NgbdModalContent 移入 /home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.ts 到导入 AppModule 的更高模块 /home/hh/vibeeportal/src/app/app.module.ts 和 NgbdModalComponentModule 在 /home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.module.ts。你也可以创建一个新的 NgModule 来导出和包含 NgbdModalContent 在 /home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.ts 然后在 AppModule 中导入该 NgModule /home/hh/vibeeportal/src/app/app.module.ts 和 NgbdModalComponentModule 在 /home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.module.ts.

【问题讨论】：

从 app.module.ts 声明中移除 pendingpropertylist 模块。由于您将使用延迟加载，因此您可能需要在模块中声明变量。
你能说得更具体些吗？如果我要从 app.module.ts 中删除 pendingpropertylist 模块，那么我将如何加载 pendingpropertylist 组件
你在使用 Angular LazyLoading 吗？如果是，那么当NgbdModalComponentModule 模块被加载时，它会自动加载它的组件。如果您没有使用延迟加载，则从 NgbdModalComponentModule 模块中删除 PropertylistComponent 它将起作用。
这里我没有使用延迟加载，现在我已经从 NgbdModalComponentModule 中删除了 PropertylistComponent 但仍然存在错误。从'@angular/core'导入{ NgModule }；从“@angular/platform-browser”导入 { BrowserModule }；从'@ng-bootstrap/ng-bootstrap'导入{ NgbModule }；从'./pendingpropertylist.component'导入{ NgbdModalContent }； @NgModule({ 导入：[BrowserModule, NgbModule]，声明：[NgbdModalContent]，导出：[NgbdModalContent]，引导程序：[NgbdModalContent]，entryComponents：[] }) 导出类 NgbdModalComponentModule {}

标签： angular

【解决方案1】：

正如您所说，您没有使用Angular LazyLoading，您需要进行如下修改：

propertylist.component.html

会一样

propertylist.component.ts

会一样

propertylist.component.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdModalContent, PropertylistComponent } from './pendingpropertylist.component';

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdModalContent // Remove this -> , PropertylistComponent],
  exports: [NgbdModalContent],
  bootstrap: [NgbdModalContent],
  //Remove this-> entryComponents: [PropertylistComponent]
})
export class NgbdModalComponentModule {}

app.module.ts

import { NgbdModalContent, PropertylistComponent} from 
   './pendingpropertylist/pendingpropertylist.component';

    @NgModule({

    declarations: [
    PropertylistComponent,
   // Remove this -> NgbdModalContent
   ],

    imports: [
    NgbModule,
    add this -> NgbdModalComponentModule 
    ]

    bootstrap: [AppComponent],
     entryComponents: [PropertylistComponent // Remove this->,NgbdModalContent]

已编辑：使用 LazyLoading

app.module.ts

import { NgbdModalContent, PropertylistComponent} from 
   './pendingpropertylist/pendingpropertylist.component';

    @NgModule({

    declarations: [
    // Remove this -> PropertylistComponent,
   // Remove this -> NgbdModalContent
   ],

    imports: [
    NgbModule,
    add this -> NgbdModalComponentModule 
    ]

    bootstrap: [AppComponent],
     entryComponents: [// Remove this -> PropertylistComponent // Remove this->,NgbdModalContent]

propertylist.component.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdModalContent, PropertylistComponent } from './pendingpropertylist.component';

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdModalContent, PropertylistComponent],
  exports: [NgbdModalContent],
  bootstrap: [NgbdModalContent],
  entryComponents: [PropertylistComponent]
})
export class NgbdModalComponentModule {}

在这之后你需要添加路由：

const routes: Routes = [
    { path: 'propertyList', loadChildren: './NgbdModalComponent.module#NgbdModalComponentModule'}
];

就是这样。快乐编码；）

【讨论】：