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

Question

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"
  }
}

Answer 1

Try like this,

import { NgSemanticModule } from 'ng-semantic/ng-semantic';

if you are using angular-cli, try this,

add the following to the file ng-semantic.d.ts in the ng-semantic node package:

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

...

@NgModule({
    declarations: [
        NgSemanticModule
    ]
})
export declare class NgSemanticModule {
}

Reference