An issue has occurred: Error - The specified NgModule is not a valid NgModule

Everything was working smoothly, but suddenly I encountered this error message while running ng serve. I haven't made any recent upgrades or changes to dependencies.

Could someone please provide guidance on how to resolve this issue?

ERROR in Error: NgModule is not an NgModule
    at _getNgModuleMetadata (E:\Going-on\czc-admin-startupui\node_modules\@angular\compiler-cli\src\ngtools_impl.js:140:15)
    at _extractLazyRoutesFromStaticModule (E:\Going-on\czc-admin-startupui\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
    at E:\Going-on\czc-admin-startupui\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27
    at Array.reduce (native)
    at _extractLazyRoutesFromStaticModule (E:\Going-on\czc-admin-startupui\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10)
    at includeLazyRouteAndSubRoutes (E:\Going-on\czc-admin-startupui\node_modules\@angular\compiler-cli\src\ngtools_impl.js:66:25)
    at Array.reduce (native)
    at includeLazyRouteAndSubRoutes (E:\Going-on\czc-admin-startupui\node_modules\@angular\compiler-cli\src\ngtools_impl.js:67:26)
    at Array.reduce (native)
    at Object.listLazyRoutesOfModule (E:\Going-on\czc-admin-startupui\node_modules\@angular\compiler-cli\src\ngtools_impl.js:54:36)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (E:\Going-on\czc-admin-startupui\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (E:\Going-on\czc-admin-startupui\node_modules\@ngtools\webpack\src\plugin.js:207:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (E:\Going-on\czc-admin-startupui\node_modules\@ngtools\webpack\src\plugin.js:443:24)
    at process._tickCallback (internal/process/next_tick.js:109:7)

webpack: Failed to compile.

Below is the content of my package.json file:

{
  "name": "sb-admin-angular4-bootstrap4",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ec=true",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.4.3",
    "@angular/cli": "^1.4.3",
    "@angular/common": "^4.4.3",
    "@angular/compiler": "^4.4.3",
    "@angular/compiler-cli": "^4.4.3",
    "@angular/core": "^4.4.3",
    "@angular/forms": "^4.4.3",
    "@angular/http": "^4.4.3",
    "@angular/platform-browser": "^4.4.3",
    "@angular/platform-browser-dynamic": "^4.4.3",
    "@angular/platform-server": "^4.4.3",
    "@angular/router": "^4.4.3",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
    "@ngx-translate/core": "^6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "@swimlane/ngx-datatable": "^9.3.0",
    "angular2-datatable": "^0.6.0",
    "angular2-multiselect-dropdown": "^1.2.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ionicons": "^3.0.0",
    "ng-block-ui": "^1.0.0-beta.15",
    "ng-spin-kit": "^5.1.1",
    "ng2-charts": "^1.5.0",
    "rxjs": "^5.1.0",
    "typescript": "^2.3.4",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.3",
    "@angular/compiler-cli": "^4.0.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-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

I have tried uninstalling, reinstalling, and attempting again without success. I also attempted using the latest TypeScript versions, but encountered different errors so I reverted those changes.

typescriptangular-cli

Answer №1

My solution was quite simple - I mistakenly included NgModule in the imports section, which was unnecessary. Once I removed it, the issue was resolved.

import { NgModule } from '@angular/core';
import { AddBannerComponent } from './add-banner/add-banner.component';
import { BannerComponent } from './banner.component';
import { BannerRoutingModule } from './banner-routing.module';

@NgModule({
  imports:[NgModule,BannerRoutingModule],
  declarations:[AddBannerComponent,BannerComponent],
  providers:[]
})
export class BannerModule{

}

Here is the corrected code snippet where I removed NgModule from the imports:

import { NgModule } from '@angular/core';
import { AddBannerComponent } from './add-banner/add-banner.component';
import { BannerComponent } from './banner.component';
import { BannerRoutingModule } from './banner-routing.module';

@NgModule({
  imports:[BannerRoutingModule],
  declarations:[AddBannerComponent,BannerComponent],
  providers:[]
})
export class BannerModule{

}

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

Mapping JSON objects to TypeScript Class Objects

I am in the process of transitioning my AngularJS application to Angular 6, and I'm encountering difficulties converting a JSON object into a TypeScript object list. In my Angular 6 application, I utilize this.http.get(Url) to retrieve data from an AP ...

typescriptangular6

The attribute 'commentText' is not found within the 'Comment' data type

Currently, I am immersed in building a user-friendly social network application using Angular 12 for my personal educational journey. Running into an error has left me puzzled and looking for assistance. About the Application: The home page (home.compone ...

angulartypescript

Issues with tsconfig Path Aliases in Angular 8+ when used in .spec files

While working on Angular testing, I encountered an issue where my spec files were not recognizing paths and displaying a red squiggle import warning in VS Code (and appearing under Problems), even though they functioned properly otherwise (testing worked, ...

angulartypescripttestingvisual-studio-codejestjs

What is the method to utilize global mixin methods within a TypeScript Vue component?

I am currently developing a Vue application using TypeScript. I have created a mixin (which can be found in global.mixin.js) and registered it using Vue.mixin() (as shown in main.ts). Content of global.mixin.js: import { mathHttp, engHttp } from '@/ ...

javascripttypescriptvue.jsvuejs2

Managing multiple asynchronous requests through Observables in web development

I am working on an Angular2 website that sends multiple ajax requests using Json Web Tokens for authorization when it is initialized Here are two examples: public getUser(): Observable<User> { // Code block to get user data } public getFriends ...

ajaxangulartypescriptrxjs

Error: React - Unable to access the 'lazy' property because it is undefined

I used a helpful guide on the webpack website to incorporate TypeScript into my existing React App. However, upon launching the app, an error message pops up saying: TypeError: Cannot read property 'lazy' of undefined The version of React being ...

reactjstypescript

Can a function utilize a Generic-specified type property?

function extractStringValue<T extends object, S extends keyof PickByValue<T, string>>( obj: T, key: S ): string { return obj[key]; }; The PickByValue function extracts properties of object T with values of type string. type CustomType = ...

typescript

The information in Vuex Store and Vue Component is not aligning and syncing properly

I am encountering an issue with a specific component in my Quasar project. I am currently utilizing a Q-table to display data pulled from a data field, which is supposed to sync automatically with the Vuex store. However, I am noticing that the data does ...

typescriptvue.jsvuexquasar

What steps should I take to import a module with type definitions? (receiving error TS2656: ...not a module)

I am currently working on enhancing the type definitions for a simple npm module called emitter20. The source code of this module spans 20 lines and looks like this: module.exports = function() { var subscribers = [] return { on: function (eventNa ...

typescript

Creating a single file in Angular2 for plunker can be achieved by combining all the necessary

I stumbled upon this plunker while exploring Angular2 as a starting point. However, I noticed that it performs quite sluggishly, mainly because it tries to transpile everything each time it reloads: var angularVersion = '2.0.0-rc.4'; System.con ...

typescriptangularplunker

What are the steps to incorporate web components into a Vue project with Typescript?

I am currently facing an issue with integrating a web component into my Vue project. Despite seeing the element in the DOM, it appears as an empty tag instead of the button it should be. The first error I encountered was the absence of a declared module. ...

typescriptvue.jsvuejs2web-componenttypescript-typings

Creating a type that can be used with a generic type T along with an array of the same generic type T

I am experimenting with TypeScript for this project type ArrayOrSingleType<T> = T | T[]; interface TestType<T> { a: ArrayOrSingleType<T>; b: (v: ArrayOrSingleType<T>) => void; } const testVariable: TestType<number&g ...

typescript

The Redux Store seems to be holding onto the initial state and not updating, even though the actions are functioning correctly

Upon successful authentication, the actions and reducer are updating correctly, but the mapstatetoprops function is not reflecting the changes in the new reducer state. Despite updates, the Store continues to log the initial state with each update. impor ...

reactjstypescriptreduxreact-reduxredux-thunk

Is there a way to increase the level of detail in the error trace provided by tsc? This error trace is

While attempting to compile a React project using the default tsconfig.json provided by create-react-app, I encountered a baffling error that has me stumped. $ tsc error TS2488: Type 'never' must have a '[Symbol.iterator]()' method that ...

typescriptcompiler-errorscompilation

Accessing the observable's value by subscribing to it

There is a defined observable called imageOptions$ in my code: imageOptions$: Observable<BoundImagesToProject[]> = this.imagesService .getBoundImages({ projectId: this.projectId }) .pipe(map((images) => (images.data))); and it is used in the temp ...

javascriptangulartypescriptrxjsobservable

What is the best way to define multiple variables in ionic 2 using Angular2 and TypeScript?

I'm brand new to working with ionic2/Angular2/Typescript. My project involves creating a wheel with eight slices, but I'm struggling with how to declare multiple variables. In JavaScript, I've declared them like this: function rand(min, max ...

javascriptangulartypescriptionic2

Creating a class extension without a duplicate constructor (using private parameters)

As I was attempting to improve Angular's ComponetFixture, I discovered a limitation due to the absence of a copying constructor for this class. (Or am I mistaken?) Imagine we have a class: class A { constructor(public pub, private priv) { } } Now ...

angularjstypescript

What other options exist for searching objects of functions?

Can you suggest some good, easy-to-read, scalable, and efficient alternatives for this basic pattern? type Figure = { kind: "square", sideLength: number } | { kind: "rectangle", length: number, width: number } | { kind: "circle", radius: numbe ...

javascripttypescript

When working on styling a different Styled Component, how should one define the type of props required?

I'm currently working on a NextJS project using styled components and typescript. I have customized a div element like this: export const ClippedOverlay = styled( ( props: React.DetailedHTMLProps< React.HTMLAttributes<HTMLDivElement& ...

reactjstypescriptnext.jsstyled-components

Gatsby, in combination with TSC, does not properly transpile the rest operator

I'm attempting to integrate TypeScript with Gatsby following the guidelines provided here. However, I am encountering an issue where the tsc command is failing to transpile the spread (...) operator and producing the error shown below: WAIT Compili ...

typescriptgatsby