Getting Build Error " ERROR in NgSemanticModule is not an NgModule " Even after adding dependencies and importing to mail module

I have shared my module , component and package file here , my trying to use click event with ngif but still getting the error. The error it showing is "ERROR in NgSemanticModule is not an NgModule" am not able to understand if this error is because of semantic-UI dependency or its happening because am missing something in click event

Can any one help thanks in advance.

    // app.module.ts
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { CommonModule } from '@angular/common'; 
    import { AppComponent }   from './app.component';
    import { HomeComponent } from './home/home.component'; //import home components
    import { AboutComponent } from './about/about.component'; //import about component
    import { NgSemanticModule } from 'ng-semantic';
    import { routing }  from './app.routing';

    @NgModule({
    imports:      [ BrowserModule, routing , NgSemanticModule,CommonModule ], //other modules the app depends on
    declarations: [ AppComponent, AboutComponent, HomeComponent ], // declare all derectives and components
    bootstrap : [ AppComponent ] // root component to bootstarp
    }) 
    export class AppModule { }


//app.component.ts
import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent { 
  isActive:boolean = true;
  isCollapsedMenu() {
    this.isActive = !this.isActive;
  }

}


//package.json

{
  "name": "angularapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "ng-semantic": "^1.1.13",
    "ng2-bootstrap": "1.1.16-11",
    "ngx-bootstrap": "^1.7.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.5",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.77",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}