Develop Reference

Standalone component NG8001: 'component' is not a known element

This is my standalone component
import { Component } from '#angular/core';
import { CommonModule } from '#angular/common';
#Component({
selector: 'app-navbar',
standalone: true,
imports: [CommonModule],
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
}
and this is where i have imported it (in admin module)
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { UsersComponent } from './users/users.component';
import { NavbarComponent } from '../components/navbar/navbar.component';
#NgModule({
declarations: [
UsersComponent
],
imports: [
CommonModule,
AdminRoutingModule,
NavbarComponent,
]
})
export class AdminModule { }
In my usercomponent.html template i did
<p>users works!</p>
<app-navbar></app-navbar>
When I run ng serve I got
`error NG8001: 'app-navbar' is not a known element:
If 'app-navbar' is an Angular component, then verify that it is part of this module.
If 'app-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
2 `
I would like to know why I have this error and how to fix it
Thanks !

If NavbarComponent is part of another module, on that module you have to export the component using exports[], and then import the module, not the component on AdminModule.
If it is not part of other module, you have to include the component on declarations[] not on imports[].

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.

'ngx-slider' is not a known element

Full error shows up in the app.component.html file where I try to use the component as follows:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
The full error is:
But I've done exactly what the guide says, and it's still not working:
I installed the library through the command line command: npm install --save #angular-slider/ngx-slider and it shows up in the package.json as:
I imported it in app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { NgxSliderModule } from '#angular-slider/ngx-slider';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxSliderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I've imported it into app.component.ts:
import { Component } from '#angular/core';
import { Options } from '#angular-slider/ngx-slider';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
value: number = 100;
options: Options = {
floor: 0,
ceil: 200
};
}
And finally added it to app.component.html:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
So why is it not working?
Versions for reference:
Node version: 14.17.1
NPM version: 6.14.13
Angular & Angular CLI version: 13

Declaration of directive or component in defferent modules, angular 4

Is it possable to declare one directive/component for many modules?
I can export only one:
import { Directive, ElementRef } from '#angular/core';
#Directive({ selector: '[appBigText]' })
export class BigTextDirective {
constructor(el: ElementRef) {
el.nativeElement.style.fontSize = '100px'
}
}
module one:
import { BigTextDirective } from '../common/directives/dir225';
#NgModule({
imports: [HttpModule...........
providers :[homeService],
declarations: [
HomeComponent,
DetailComponent,
BigTextDirective
]
component:
import { BigTextDirective } from '../common/directives/dir225';
#Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
<div appBigText>This text is huge.</div>.
`
})
module two is same inculding, but i have error
Error:
Type BigTextDirective is part of the declarations of 2 modules: HomeModule and NotesModule! Please consider moving BigTextDirective to a higher module that imports HomeModule and NotesModule. You can also create a new NgModule that exports and includes BigTextDirective then import that NgModule in HomeModule and NotesModule.

In case you need using the same component/directive in multiple modules, it means that it's common. So why don't follow error suggestion and extract BigTextDirective to separate module and export it?
NgModule({
// ...
providers: [
BigTextTexture
]
exports: [
BigTextTexture
]
})
export class CommonModule {}
So you can easily re-use it in high-level modules just by importing it:
#NgModule({
imports: [
CommonModule
],
declaration: [
INeedBigTextTextureComponent
]
})
export class HighLevelModule {}
Let Angular helps you with code organization!

How to import custom modules in Angular 4?

I am trying to use one of the custom modules I have built and put it in another module
custom modules:
my-test.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MyTestComponent } from './my-test.component';
#NgModule({
declarations: [
MyTestComponent
],
imports: [
CommonModule,
],
exports: [ MyTestComponent]
})
export class MyTestModule { }
Another module that I need to pull in
my-parent.module.ts
import {CommonModule} from '#angular/common';
import {NgModule} from '#angular/core';
import { MyParentComponent } from './my-parent.component';
import { MyTestModule } from '../my-test/my-test.module';
#NgModule({
'imports': [
CommonModule,
MyTestModule
],
'declarations': [
MyParentComponent
],
'exports': [
MyParentComponent
]
})
export class MyParentModule {}
my-parent.component.ts
import { Component, Inject, Injectable, OnInit } from '#angular/core';
import { MyTestComponent } from '../my-test/my-test.component'
#Component({
'selector': 'my-parent',
'template': `
test
`
})
#Injectable()
export class MyParentComponent implements OnInit {
public myTestComponent: MyTestComponent;
constructor() {}
ngOnInit() {
console.log(this.myTestComponent) <----show undefined here.
}
}
I am not sure how to import the my-test component into my-parent component.
What am I doing wrong? Thanks a lot!
Update
Slightly change my codes above to fit my case. It initial a MytestComponent in the beginning and this.myTestComponent shows undefined.

1- in my-parent.component.html add <test component selector> </ test component selector #test>
2- in the parent ts file add :
#ViewChild('test') test: MyTestComponent;
then you will be able to access all the methods and parameters in MyTestComponent