propertylist/propertylist.component.ts 中類型 NgbdModalContent 中的錯誤是 2 個模塊聲明的一部分

Question

我在屬性組件中使用 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 個模塊聲明的一部分：/home/hh/vibeeportal/src/app/app.module.ts 中的 AppModule 和 /home 中的 NgbdModalComponentModule /hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.module.ts。 請考慮將 /home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.ts 中的 NgbdModalContent 移動到將 AppModule 導入 /home/hh/vibeeportal/src/app/app.module.ts 和 NgbdModalComponentModule 的更高模塊/home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.module.ts。 您還可以創建一個新的 NgModule，它在 /home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.ts 中導出並包含 NgbdModalContent，然后在 /home/hh/vibeeportal/src/app/app 的 AppModule 中導入該 NgModule /home/hh/vibeeportal/src/app/pendingpropertylist/pendingpropertylist.component.module.ts 中的 .module.ts 和 NgbdModalComponentModule。

Answer 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]

編輯：使用延遲加載

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'}
];

而已。 快樂編碼；）