Comment trouver les composants en conflit?

Question

J'utilise la saveur ES5 de angulaire 2. Et j'ai rencontré cette erreur:

Unhandled Promise rejection: Template parse errors: 
More than one component matched on this element. 
Make sure that only one component's selector can match a given element. 
Conflicting components: class2,class6 (" 
    </tbody> 
</table> 
[ERROR ->]<paging [data]="data" (changed)="loadCountries($event)" unit="country"></paging> 
<md-spinner class="lis"): class18@30:0 ; Zone: <root> ; Task: Promise.then ; Value: 

Il dit class2 et class6. Je ne peux pas trouver les noms originaux des classes.

Voilà ma définition du module:

var module = ng.core.NgModule({ 
    imports: [ 
     ng.platformBrowser.BrowserModule, 
     ng.router.RouterModule.forRoot([].concat([...])), 
     ng.material.MaterialModule, 
     ng.http.HttpModule, 
     ng.common.CommonModule, 
     ng.forms.FormsModule], 
    declarations: [ 
     app.CoalAddWorldCoalSupply, 
     app.FilterValuesDialog, 
     app.CoalFlows, 
     app.ImportWorldCoalSupplies, 
     app.CoalProducts, 
     app.CoalReports, 
     app.CoalUpsertFlow, 
     app.CoalUpsertProduct, 
     app.CoalWorldCoalSupplies, 
     app.CountryList, 
     app.CountryUpsert, 
     app.Dashboard, 
     app.ElectricityHeatGenerations, 
     ... 
     ], 
    entryComponents: [app.FilterValuesDialog, confirmDialog], 
    bootstrap: [app.Layout], 
    providers: [globalService] 
}) 
.Class({ 
    constructor: function() { } 
}); 

document.addEventListener('DOMContentLoaded', function() { 
    ng.platformBrowserDynamic 
     .platformBrowserDynamic() 
     .bootstrapModule(module); 
}); 

parties spécifiées avec ... signifie plus des mêmes choses. Comment comprendre quelle classe est zone.js?

Answer 1

Disons que nous avons l'application suivante:

app.component.js

app.AppComponent = Component({ 
    selector: 'my-app', 
    template: 
    '<h1>(es5) angular2 4.1.3</h1><comp1></comp1>' 
}) 
.Class({ 
    constructor: function AppComponent() {} 
}); 

component1.js

app.Component1 = Component({ 
    selector: 'comp1', 
    template: 
    'component1' 
}) 
.Class({ 
    constructor: function Component1() {} 
}); 

component2.js

app.Component2 = Component({ 
    selector: 'comp1', 
    template: 
    'component2' 
}) 
.Class({ 
    constructor: function Component2() {} 
}); 

https://plnkr.co/edit/AKBVbX9ruZM8DchFcfbh?p=preview

Alors mes actions: