Encountering Build Issue: "NgSemanticModule is not recognized as an NgModule" persists despite inclusion of dependencies and importing into primary module

I have posted my module, component, and package file here. I am attempting to implement a click event with ngif, but I keep encountering an error. The specific error message is "ERROR in NgSemanticModule is not an NgModule". I'm unsure if this error pertains to the semantic-UI dependency or if it's due to something missing in the click event implementation.

If anyone can provide assistance, I would greatly appreciate it. Thank you 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

Here is a suggestion for you:

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

If you are working with angular-cli, consider the following steps:

Add the code snippet below 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 {
}

For more details, check out this reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating Through Different Environments in Your React Application

Currently, I am tackling a small project where I am utilizing React for the frontend and Java for the backend. The project involves two distinct environments. My main struggle revolves around effectively managing multiple environments. To set the API URL, ...

Having difficulty retrieving model values from the angular ui modal dialog

Being only on my second day in the world of Angular, I am trying to navigate around Angular UI and build my first modal dialog. The modal dialog displays properly, but I'm encountering an issue with using models within it. You can view my demo on Plun ...

Trigger ng-change event for each dropdown selection made in AngularJS

Currently, I have a dropdown menu that allows users to select a report for generation. When a user picks a report from the dropdown, it generates and downloads the report for mobile viewing. By utilizing ng-change, the system only detects when a user wants ...

Refresh Entity with Real-Time Data on Cesium

I have been attempting to showcase an entity moving within Cesium through the use of live/dynamic data. After trying various techniques and consulting past forums, particularly those from 2015-2016, I am still struggling to make it work. Despite my effort ...

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

I am currently utilizing the UI-Router ng2 and attempting to change routes after a certain function is triggered. My code snippet looks like this: SomeFunction() { if(condition){ router.navigate(['/newRouteName']); } } It's ...

Error: Property 'xxx' is not a valid attribute for this type

Hey there! I recently converted my React Native JavaScript project into TypeScript and everything seems to be working fine. However, I'm encountering some warnings that I could use some help with. Specifically, I need assistance on how to properly pas ...

Express and Angular2 Webpack integration

Recently, I set up Angular 2 with Webpack and explored its routing capabilities through a sample app. I am now interested in integrating Angular2 for front end routing while utilizing ExpressJS for a RESTful API backend on the same server. For example, ht ...

Sending data with Angular using a POST request can be done using the multipart/form-data content type. This

ISSUE Struggling to send a multipart/formdata post request with both a file upload and model data in JSON format. Having trouble finding working references and implementing the solutions found online. It's possible that I am doing something wrong or ...

What is the best way to convert a repetitive string into a reusable function?

I am currently retrieving data from an API and I want to display it on my website in a more user-friendly manner. The challenge I'm facing is that the number of variables I need is constantly changing, along with their corresponding values. So, I&apos ...

PHP is returning an empty response during an AJAX request

I am facing an issue with my AJAX request where I am trying to return a simple echo, but for some reason, it's not working this time. Even after stripping down the code to its bare essentials, the response is still blank. Javascript function getUs ...

Using NodeJS and Express together with Ajax techniques

I am currently developing a web application that utilizes Ajax to submit a file along with some form fields. One unique aspect of my form is that it allows for dynamic input, meaning users can add multiple rows with the same value. Additionally, the form i ...

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Here is a script I am working with: <script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script> <script> $(document).ready(function() { $('.photoset-grid').photose ...

The arrangement of a table, an iframe, and another table being showcased in close proximity

I need assistance in aligning a table, an iframe, and another table side by side without any breaks. Ideally, I would like all three elements to be centered on the page. It seems odd that they're not displaying next to each other as my screen is larg ...

Exploring Discord.js: Sorting a Collection of Retrieved Messages Using .sort()

This is a code example I am working with: .sort((a, b) => b.createdAt - a.createdAt) After fetching and filtering messages from a channel (which has a total of 8 messages), the filter operation returns a collection that may not be sorted in order. Ho ...

Ways to Loop Through a Set of Information and Retrieve it as a List

Here is some sample data: 0: {rowid: "4b531532a5a9", groups: "Group1", descriptions: "Item1"......} 1: {rowid: "e55315ccabb5", groups: "Group2", descriptions: "Item2"......} 2: {rowid: "f2713 ...

Tips on fetching the ID of the selected option using JavaScript without relying on jQuery

Looking to print the selected option ID using pure Javascript (not JQuery) for multiple select tags. If we have more than one select tag, how do we achieve this? <select onchange="showOptions(this)" id="my_select1"> <option value="a1" id="ida ...

Exploring Mikro-ORM with Ben Awad's Lireddit: Navigating the Process of Running Initial Migrations

Having some trouble following the lireddit tutorial, particularly with the initial mikro-orm migration step. Encountering a similar issue as mentioned in this post. Tried modifying the constructor of the example entity (tried both provided format and the ...

Challenges with fetching data from APIs in NextJs

I am currently working on a basic NextJs TypeScript application with the app router. The following code is functioning correctly: export default async function Page() { const res = await fetch("https://api.github.com/repos/vercel/next.js"); ...

The property linerGradiant of r cannot be destructured because it is not defined

I encountered the error "Cannot destructure property linerGradiant of r as it is undefined" during runtime, making it difficult to debug. The issue seems to stem from the compiled JS file, which is hard to read. The function is defined as follows: functio ...

Difficulty in getting callbacks triggered for basic conversation with Botkit 4 and SlackAdapter

Struggling to get conversation callbacks firing correctly. Has anyone successfully implemented botkit 4 with Slack and can share a working sample? I've set up the necessary adapters and middleware, but my callbacks just won't trigger. I followed ...