Develop Reference

Angular 12, Typecript 4.2 : The class is listed in the declarations of the NgModule , but is not a directive, a component, or a pipe

I upgraded my app from Angular 11 to 12, and to typescript 4.2.4. When I do ng serve, app fails to compile with the error :
error NG6001: The class 'ChartComponent' is listed in the declarations of the NgModule 'PrototypeModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
41 , ChartComponent
~~~~~~~~~~~~~~~~~~~~~~~~
src/app/chartPage/Chart/chart.component.ts:46:14
46 export class ChartComponent implements OnInit {
~~~~~~~~~~~~~~~~~~~~~~~~
'ChartComponent' is declared here.
This is the code in the PrototypeModule
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { ChartComponent } from './chartPage/Chart/chart.component';
#NgModule({
declarations: [
ChartComponent
]
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
#NgModule({
imports: [ChartPrototypeModule]
, exports: [],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class PrototypeModule { }
The ChartComponent is as follows :
import {Component, Input, ViewEncapsulation, Injectable, OnInit, SimpleChange, NgModule} from '#angular/core';
import { DataLoadService } from '../../services/data-load.service';
#Component({
selector: 'app-chart',
templateUrl: `./chart.component.html`,
styleUrls: ['./chart.component.scss']
, encapsulation: ViewEncapsulation.None
})
#Injectable({
providedIn: 'root'
})
#NgModule({
imports: [SharedModule]
})
export class ChartComponent implements OnInit {
constructor(private data: DataLoadService) {
//constructor code
};
}
I have no leads as to what might be causing the error. How do I fix this?

So, as #Muhammet Can TONBUL has mentioned you're using the component in a wrong way.
First of all your component should look something like this:
#Component({
selector: 'app-chart',
templateUrl: `./chart.component.html`,
styleUrls: ['./chart.component.scss'],
// Use this only if you DON'T want to encapsulate your SCSS
encapsulation: ViewEncapsulation.None
})
export class ChartComponent implements OnInit {
constructor(private data: DataLoadService) { ... };
...
}
The next step is to create a NgModule like you've already done:
#NgModule({
declarations: [
ChartComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
So, now you've declared your component and you can use it now but currently only in the other components of the ChartPrototypeModule.
To change this, you need to export your component in the module as well. This would look something like this:
// Introduced an additional array so it is not needed
// to add your components twice
const COMPONENTS = [
ChartComponent
];
#NgModule({
declarations: [
COMPONENTS
],
exports: [
COMPONENTS
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ChartPrototypeModule { }
Now you can use your component in each module where you have imported the ChartPrototypeModule.
You can read more about feature modules here.
Note: If you're using the introduced array COMPONENTS to reduce redundancy only add the components to it, which you want to use outside of the module.

'google-chart' is not a known element: in angular

I am trying add google chart in angular app, I have done the following step
npm install angular-google-charts --save
After that I have imported in to app module.
import { GoogleChartsModule } from 'angular-google-charts';
#NgModule({
imports: [
GoogleChartsModule
],
})
export class AppModule {}
Calling in myComponent.html
<google-chart #chart [title]="title" [type]="type" [data]="data [columnNames]="columnNames" [options]="options" [width]="width [height]="height">
</google-chart>
In my component.ts
import { Component, ElementRef, OnInit, ViewChild } from '#angular/core';
import { GoogleChartComponent } from 'angular-google-charts';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'googlechart';
type = 'PieChart';
data = [
['Name1', 5.0],
['Name2', 36.8],
['Name3', 42.8],
['Name4', 18.5],
['Name5', 16.2]
];
columnNames = ['Name', 'Percentage'];
options = {
};
width = 500;
height = 300;
constructor(){}
ngOnInit() {}
}
Error :
error NG8001: 'google-chart' is not a known element:
1. If 'google-chart' is an Angular component, then verify that it is part of this module.
2. If 'google-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.

Component was exported on the library.
https://github.com/FERNman/angular-google-charts/blob/master/libs/angular-google-charts/src/lib/google-charts.module.ts#L13
You can use schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
import { GoogleChartsModule } from 'angular-google-charts';
#NgModule({
imports: [
GoogleChartsModule
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}
This will fix the issue.

I managed to solve the problem by putting it in shared.module.ts.
And not in the AppModule as indicated.

[angular 4 / typescript ]import component path not reconized. But seems valid and should work

I am building a router component in angular and typescript.
observe my current project structure below.
Lets focus on the landingPageComponent
observe by the image that my path to the component is valid but is not recognized.
my code in my landingpageComponent.ts file:
import { Component, OnInit, ViewChild } from '#angular/core';
import {NgForm} from '#angular/forms';
#Component({
selector: 'app-landing-page',
templateUrl: './landingpage.component.html',
styleUrls: ['./landingpage.component.css']
})
export class LandingPageComponent implements OnInit {
#ViewChild('f')citySubmit : NgForm;
cities:string[]=['Chicago', 'New Mexico', 'London'];
ngOnInit() {
}
}
the proper imports are done in the app.module.ts file without error. Meaning the path is recognized.
I am hoping I am just making a silly mistake somewhere
Thank you.

In your app.routing.module.ts it should be,
import { LandingPageComponent } from './landingpage/landingpage.component';
import { HowItWorksComponent } from './howitworks/howitworks.component'

Vanilla NG2 component not displaying?

So in my angular 2 app I have:
//app.component.ts
import { Component } from '#angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';
#Component({
selector: 'my-app',
template: `<sidebar></sidebar>
<h1>helps</h1>`,
providers: [sidebarComponent]
})
export class AppComponent { }
and
//sidebar.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'sidebar',
template: `<h1>sidebar</h1>`
})
export class sidebarComponent { }
When I load my app and app.component is displayed, I get <sidebar></sidebar><h1>helps</h1> rendered directly (in the page source), but no <h1>sidebar</h1>. What have I missed here?

What have I missed here? Directives :-)
import { Component } from '#angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';
#Component({
selector: 'my-app',
template: `<sidebar></sidebar>
<h1>helps</h1>`,
directives: [sidebarComponent]
})
export class AppComponent { }

use directives:[sidebarComponent] instead of providers: [sidebarComponent]

Angular 1 directive inside angular 2 application

We created an Angular 2 application using this awesome Angular2 Seed which works very well. So the question that I have is, how can I upgrade this Angular 1 directive:
import template from './sbgOutlineButton.html!text';
var app = angular.module('sbgOutlineButton', []);
app.directive('sbgOutlineButton', function() {
let link = function(scope, element, attributes) {
if (attributes.icon === undefined) {
let materialIcon = element.find('i.material-icons');
materialIcon.addClass('hidden');
}
};
return {
link: link,
restrict: 'E',
template: template,
replace: true,
transclude: true,
scope: { icon: '#' }
};
});
export default app;
So that I can use it in the following Angular 2 component:
import { Component, OnInit, ChangeDetectionStrategy } from '#angular/core';
import { UpgradeAdapter } from '#angular/upgrade';
#Component({
moduleId: module.id,
selector: 'test-page',
templateUrl: 'testpage.page.html',
styleUrls: ['testpage.page.css']
})
export class TestPage implements OnInit {
constructor() { }
ngOnInit() { }
}
Do you guys maybe have any idea on how I will be able to accomplish this? Is it even possible? Because a lot of the other articles that I have found during my research suggests that your "base" application should be Angular 1...
Thanks in advance.
Francois

How about converting your angular1 directive to angular2 directive?
NOTE: I don't know whether it will be useful or not but just have a look.
Look at the demo here : https://plnkr.co/edit/4Fhtm76iJl0aQmgjO7n0?p=preview
customeDirective.ts
import {Directive, Attribute,ElementRef,Renderer} from '#angular/core';
#Directive({
selector: '[myAttr]'
})
export class myDir {
constructor(#Attribute('icon') private icon,private el:ElementRef,private rd: Renderer){
console.log(this.icon);
if(this.icon===null){ //<--- you can play here as per your need.
console.log('icon is undefined');
}
else{
rd.setElementClass(el.nativeElement, 'myClass',true);
}
console.log(el.nativeElement);
}
}
AppComponent.ts
//our root app component
import {Component} from '#angular/core';
import {myDir} from 'src/customDirective';
#Component({
selector: 'my-app',
directives:[myDir],
template:
`
<style>
.myClass{
color:red;
background:yellow;
}
</style>
<div myAttr icon="myIcon">Angular2</div> <!-- icon attribute is present so it will add the class -->
<!-- OR USE BELOW HTML INSTEAD OF ABOVE -->
<div myAttr>Angular2</div> <!-- icon attribute is not present so it gives null -->
`
})
export class App {}

You need to upgrade to angular2 by using "#angular/upgrade": "2.0.0-rc.4",
Guide
Because a lot of the other articles that I have found during my
research suggests that your "base" application should be Angular 1...
It's if you have a already angular 1 project and you want to upgrade to one. Angular2 don't need angular1 as base
writing directive in angular2
import { Directive, ElementRef, Input } from '#angular/core';
#Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
My First Attribute Directive
Highlight me!
import { Component } from '#angular/core';
import { HighlightDirective } from './highlight.directive';
#Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [HighlightDirective]
})
export class AppComponent { }
you Don't need to mix up angular1 into two..