Angular2 ng2-accordian conflicting components error

I am using angular2 to nest a sidebar component inside the admin component. The sidebar menu is to be created with ng2-accordian .

I have installed ng2-accordian using npm and done all neccessary config.

admin.component.html

    <div class="container_12">
    <div class="grid_2">
       <left-panel-menu-accordian></left-panel-menu-accordian>
    </div>

    <div class="grid_10">
        <div class="box round first fullpage">
            <h2>
                Form Controls</h2>
            <div class="block ">
                <form>
                    <table class="form">
                        <tbody>

                            <tr>
                                <td>
                                    <label>Base Category</label>
                                </td>
                                <td>
                                    <select #basecat>
                                        <option value="Humans">Humans</option>
                                        <option value="Animals">Animals</option>
                                        <option value="Objects">Objects</option>
                                        <option value="Nature">Nature</option>
                                        <option value="Fantasy">Fantasy</option>
                                        <option value="Backgrounds">Backgrounds</option>
                                        <option value="Personal Library">Personal Library</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>Sub Category</label>
                                </td>
                                <td>
                                    <select #subcat>
                                        <option value="SC11">SC11</option>
                                        <option value="SC21">SC21</option>
                                        <option value="SC31">SC31</option>
                                        <option value="SC41">SC41</option>
                                        <option value="SC51">SC51</option>
                                        <option value="SC61">SC61</option>
                                        <option value="SC71">SC71</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>Attach File</label>
                                </td>
                                <td>
                                    <input type="file" #imagePicker (change)="handleFileSelect($event)">

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button #ok (click)="sendToServer(basecat.value , subcat.value )">Ok</button>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <div class="clear">
    </div>
</div>

admin.component.ts

import { Component } from '@angular/core';
import { ApiService } from '../shared/api.service';
//import {AccordionModule} from "ng2-accordion";



@Component({
templateUrl: './admin.component.html',
styleUrls: ['./style/reset.css',
    './style/text.css',
    './style/grid.css',
    './style/layout.css',
    './style/nav.css']
})
export class AdminComponent {
private svgString: string = "";
constructor(private _apiService: ApiService) {

}

}

accordian.component.html

<div class="container">
<accordion>
    <accordion-group heading="About me">
        Its all about me.
    </accordion-group>
    <accordion-group heading="Contacts">
        This is content of the contacts
    </accordion-group>
    <accordion-group heading="Map">
        Content of the Map
    </accordion-group>

    <accordion-group>
        <accordion-heading>
            Custom heading
        </accordion-heading>
        Its all about me.
    </accordion-group>

    </accordion>
</div>

accordian.component.ts

import { Component } from '@angular/core';



@Component({
selector: 'left-panel-menu-accordian',
templateUrl: './accordian.component.html'

})
export class AccordianComponent {
constructor() { }
}

Since this is a webpack enabled project I have this in app.module.ts

import {AccordionModule} from "ngx-bootstrap";
import {AccordianComponent} from './menu/accordian.component';

and have also entered in the imports and declarations sections of the @NgModule object.

On running the application I get this error : -

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: AccordionPanelComponent,AccordionPanelComponent ("
<div class="container">
<accordion>
    [ERROR ->]<accordion-group heading="About me">
        Its all about me.
    </accordion-group>
"): ng:///AppModule/AccordianComponent.html@2:8 

............................( Followed by many more lines )

Can someone point out my mistake.

via Indronil Chaudhuri