NgSemantic is not a module

[mp3sii]

When using any angularcli@>1.0.0-beta.21. It does not recognize NgSemantic as a valid module.. it works for me with [email protected]

[gnegno84]

Seems like a similar issue to https://github.com/vladotesanovic/ngSemantic/issues/144. As soon as i can i'll try to downgrade my angularcli version and test if it works

[sguiheux]

Works for me with this on package.json : "ng-semantic": "https://github.com/vladotesanovic/ngSemantic/tarball/master",

@vladotesanovic : I read somewhere on angular-cli issue, that lib must be compiled with angular > 2.2.* because of an incompatibility.

[nhance]

Failing for me with these dependencies:

  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.4.1",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "ng-semantic": "https://github.com/vladotesanovic/ngSemantic/tarball/master",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.54",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.4",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "^4.2.0",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }

[dustinblad]

Failing for me as well:

  "dependencies": {
    "@angular/common": "2.3.1",
    "@angular/compiler": "2.3.1",
    "@angular/core": "2.3.1",
    "@angular/forms": "2.3.1",
    "@angular/http": "2.3.1",
    "@angular/platform-browser": "2.3.1",
    "@angular/platform-browser-dynamic": "2.3.1",
    "@angular/router": "3.3.1",
    "alertify.js": "^1.0.12",
    "angular2-jwt": "^0.1.27",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.1.1",
    "jwt-decode": "^2.1.0",
    "moment": "^2.17.1",
    "ng-semantic": "https://github.com/vladotesanovic/ngSemantic/tarball/master",
    "primeng": "^1.1.2",
    "rxjs": "5.0.1",
    "semantic-ui": "2.2.7",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2",
    "csspin": "^1.1.0"
  },
  "devDependencies": {
    "@angular/compiler": "2.3.1",
    "@angular/compiler-cli": "2.3.1",
    "@angular/core": "2.3.1",
    "@types/jasmine": "^2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "^1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }

[gnegno84]

Ok, so after A LOT of wrestling, i've finally managed to solve my issues.

First, those are my dependencies:

"dependencies": { "@angular/common": "2.4.1", "@angular/compiler": "2.4.1", "@angular/core": "2.4.1", "@angular/forms": "2.4.1", "@angular/http": "2.4.1", "@angular/platform-browser": "2.4.1", "@angular/platform-browser-dynamic": "2.4.1", "@angular/router": "3.4.1", "class-transformer": "^0.1.3", "core-js": "^2.4.1", "es6-shim": "^0.35.2", "jquery": "^3.1.1", "ng-semantic": "https://github.com/vladotesanovic/ngSemantic/tarball/master", "reflect-metadata": "^0.1.8", "rxjs": "5.0.2", "ts-helpers": "^1.1.1", "zone.js": "^0.7.4" }, "devDependencies": { "@angular/compiler-cli": "2.4.1", "@types/es6-shim": "^0.31.32", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.24", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.7.0", "karma": "1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.4.0", "protractor": "4.0.14", "ts-node": "1.7.3", "tslint": "^4.0.2", "typescript": "2.0.10", "webdriver-manager": "11.1.0" }

The most important things are:

1. The fact that typescript MUST be v.2.0.x and not 2.1.x or it will not compile saying that AppModule is not a module
2. The import for ng-semantic should be something like import { NgSemanticModule } from "ng-semantic/ng-semantic";
3. I'm using an updated version of angular and reflect-metadata (it's not required for ng-semantic), but if anyone have a similar issue, please add as first thing the import of reflect-metadata in the main.ts otherwise you'll receive an error stating something about attributes missings

One last obvious thing...please rm -rf node modules folder and do a clean install of all the modules

[ReFiRnE]

Today I started new project, still getting NGSemanticModule is not an NgModule. My dependencies - "dependencies": { "@angular/common": "^2.3.1", "@angular/compiler": "^2.3.1", "@angular/core": "^2.3.1", "@angular/forms": "^2.3.1", "@angular/http": "^2.3.1", "@angular/platform-browser": "^2.3.1", "@angular/platform-browser-dynamic": "^2.3.1", "@angular/router": "^3.3.1", "core-js": "^2.4.1", "jquery": "^3.1.1", "ng-semantic": "^1.1.13", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", "zone.js": "^0.7.2" }, "devDependencies": { "@angular/compiler-cli": "^2.3.1", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.24", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.0.2", "typescript": "~2.0.3" } Wired I am not sure why I can't insert code with correct inline../

[gnegno84]

@ReFirnE try to use the same dependencies that i've used. In particular, update angular, ts-node and zone.js

[santiag00]

Thanks @gnegno84! That worked :)

[BennyFranco]

This issue appear when you use angular-cli (i'm using angular-cli version 1.0.0-beta.26) because is based in webpack, and the library was created for systemjs, i'm working to port it. Currently this branch works https://github.com/BennyFranco/ngSemantic/tree/angular-cli but I need to do some debug tasks and create a way to maintain the compatibility with both.

[borisfeldmann]

I just fixed one line in app.module.ts:

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

Even works with Angular 2.4.6.

[BennyFranco]

@borisfeldmann are you working with angular-cli?

[borisfeldmann]

Hi @BennyFranco, yes I am using angular-cli. But I just setup a brand new project with ´ng-semantic` and got the same error again.

I could fix it by adding this 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 {
}

[abdulapopoola]

Thanks @borisfeldmann! That worked for me!!

[n614cd]

@borisfeldmann thanks, that worked!

[ghost]

@borisfeldmann Great Fix! Will this be available with the fix on NPM anytime soon? The github shows the code in place, but when installing via npm; the code is not there.

"@angular/common": "2.4.7", "@angular/compiler": "2.4.7", "@angular/core": "2.4.7", "@angular/forms": "2.4.7", "@angular/http": "2.4.7", "@angular/platform-browser": "2.4.7", "@angular/platform-browser-dynamic": "2.4.7", "@angular/router": "3.4.7", "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.15", "@swimlane/ngx-charts": "^4.2.0", "@types/d3": "^4.5.0", "@types/socket.io-client": "^1.4.29", "core-js": "^2.4.1", "d3": "^4.5.0", "ng-semantic": "^1.1.13", "ng2-translate": "^5.0.0", "reflect-metadata": "^0.1.10", "rxjs": "^5.1.0", "socket.io-client": "^1.7.3", "zone.js": "^0.7.6"

[danlesko]

Still not working when doing a fresh npm install

[gokaygurcan]

The only working solution is @borisfeldmann's and because of zone.js' problems, every time I add/remove a dependency, I need to run rm -rf node_modules first and update ng-semantic.d.ts all over again.

[mamsoudi]

This Comment works perfectly for me thanks to @gnegno84. Just Pay attention to ts-node, typescript and ng-semantic dependencies! 👍

I still wonder why there's no latest release on NPM? 🤔 It's ok to install it from GitHub but I think it should be fixed ASAP!

[aikeda]

for me, using the version 1.0.0 of @angular/cli and its dependencies, the working solution was to add the NgModule annotation on ng.semantic.d.ts file

import { NgModule } from '@angular/core'; @NgModule() export declare class NgSemanticModule { }

[winfinit]

above solution works for me with typescript 2.2.1 and angular cli 1.0.1

[mp3sii]

Boris solution works... hopefully @vladotesanovic will update the NPM package as this does not seem such a big change

[mp3sii]

@vladotesanovic, @borisfeldmann I have forked the project and proposed a fix on #178, that would update this library to angular-cli and fix this issue. Hope that it serves.

[snstarosciak]

hey everyone,

I too have been struggling with the NgSemanticModule is not a module issue and I just recently upgraded to Angular 4. Same as above, when angular first compiles, it gives me that error, but when I change some code, it recompiles without the error.

I see some of you have found a fix by changing the ng-semantic.d.ts file, but I actually don't seem to have that file anywhere in my project or in my node_modules folder :/

Does anyone have any suggestions? I see there a pull request to fix this from @mp3sii but I'm actually not entirely sure what to do with that. Can I merge that change into my project as well?

@mp3sii would I be able to merge your changes into mine? Has anyone else gotten this to work with Angular 4?

UPDATE:

So I finally figured out how to implement @borisfeldmann 's fix. I had to find the file in node_modules/ng-semantic/ng-semantic.d.ts and basically just add those few lines of code and BOOM, problem solved. The only problem right now is if you ever have to remove your node_modules directory for any reason, you'll need to add this code again.

Verified working on Angular v4.1.3

[kevgilmore]

borisfeldmann fix didn't work for me - I already had those lines in my ng-semantic.d.ts file.

Also, tried npm install.

Line in my app.module.ts import { NgSemanticModule } from 'ng-semantic/ng-semantic';

And my dependencies:

{
  "name": "some project",
  "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": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@types/jquery": "^2.0.43",
    "chart.js": "2.5.0",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "ng-semantic": "^1.1.13",
    "ng2-charts": "^1.5.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.4",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.0.0"
  }
}

[gildniy]

@borisfeldmann your solution works for me, even on "ngx-semantic-ui" package with "[email protected]

[yaircarreno]

I had an error (ngSemantic with angular error - unexpected module NgSemanticModule) using ng build --prod and it was fixed using in ng.semantic.d.ts file: import { NgModule } from '@angular/core'; @NgModule() export declare class NgSemanticModule { }

[mloremi]

Im still having this issue. although implementing @borisfeldmann solution fixes it for me, is there a pending pull request to fix the issue or any plan to implement it?

[FiringBlanks]

Commenting out import { NgSemanticModule } from 'ng-semantic'; and NgSemanticModule in the imports array in app.module.ts makes it possible to run ng-serve. You can then uncomment those lines back in when it's up.