CODEWITHSUNDEEP
htmlangulartypescript
HARAPRIYA NAYAK
HARAPRIYA NAYAK

Reputation: 27

Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

enter image description here

Hi , I am getting the above issue. Please help me in solving how to fix this issue. I have tried as per this error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class. Restarted the server and also reinstalled the packages(npm install) but the error is still present.

my navbar.component.ts code

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

my navbar.component.html code

<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
  
    <a class="navbar-brand" routerLink="#"><B>hn</B></a>
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" routerLink="HOME">HOME  <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link active" routerLink="ABOUT">ABOUT  <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link active" routerLink="CONTACT">CONTACT  <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link active" routerLink="ADDRESS">ADDRESS <span class="sr-only">(current)</span></a>
      </div>
    </div>
  </nav>

app.module.ts code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ChartsModule } from 'ng2-charts';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RoutingModule } from './routing/routing.module';
import { MyPageComponent } from './my-page/my-page.component';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { NavbarComponent } from './navbar/navbar.component';
import {HttpClientModule} from '@angular/common/http';
import { DataService } from './dataservice';


@NgModule({
  declarations: [
    AppComponent,
    MyPageComponent,
    NavbarComponent,

  ],

  imports: [
    BrowserModule,FormsModule,ChartsModule,
    AppRoutingModule,
    RoutingModule,GridModule,NavbarComponent,HttpClientModule
  ],
  
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

mypage.component.ts code

import { Component, OnInit,ViewChild } from '@angular/core';
import { ChartDataSets, ChartOptions,ChartType } from 'chart.js';
import { Color, Label,SingleDataSet,monkeyPatchChartJsLegend,monkeyPatchChartJsTooltip } from 'ng2-charts';
import { DataService } from '../dataservice';
import { User } from '../User.module'; 
@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.css']
})
export class MyPageComponent implements OnInit {
public data: Object[];
  public lineChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
  ];
  public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions: any = {
    responsive: true,
  };
  public lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'maroon',
    },
  ];
  public lineChartLegend = true;
  public lineChartType = 'line';
  public lineChartPlugins = [];

}

Upvotes: 0

Views: 1494

Answers (1)

Aram Khachatrian
Aram Khachatrian

Reputation: 399

The NavbarComponent component should be listed in declarations, not in imports.

Upvotes: 1

Related Questions