ERROR in : 'ngx-spinner' is not a known element:
1. If 'ngx-spinner' is an Angular component, then verify that it is part of this module.
2. If 'ngx-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("[ERROR ->]
You need to import ngx-spinner module in your module.
import { NgxSpinnerModule } from 'ngx-spinner';
Read more here.
If you are using a SharedModule, then you must export the NgxSpinnerModule,
this will work:
shared.module.ts:
import { NgxSpinnerModule } from 'ngx-spinner';
#NgModule({
declarations: [...],
imports: [NgxSpinnerModule],
exports: [NgxSpinnerModule],
providers: [...]
})
export class SharedModule {}
app.module.ts:
#NgModule({
declarations: [...],
imports: [SharedModule],
bootstrap: [AppComponent]
})
export class AppModule { }
package.json:
"dependencies": {
"ngx-spinner": "^7.2.0",
},
In app.module.ts :
import { NgxSpinnerModule } from 'ngx-spinner';
then add the NgxSpinnerModule and Schema.
imports: [.....,NgxSpinnerModule ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports:[NgxSpinnerModule]
Add the CUSTOM_ELEMENTS_SCHEMA
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
Repeat the same if you have any other shared modules
import NgxSpinnerService to the component(.ts) where you want to use the spinner.
import { NgxSpinnerService } from 'ngx-spinner';
Add the constructor too,
constructor(private spinner : NgxSpinnerService)
then add this.spinner.show() to enable the spinner and this.spinner.hide() to disable the spinner.
In HTML file :
add <ngx-spinner type="ball-spin-clockwise"></ngx-spinner>
Related
i have 2 libs.
1 - ui-templates
2 - ui-components
To import ui-templates from app, im doing that:
import {UiTemplatesModule} from '#growerdiaries-web/ui-templates';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, UiTemplatesModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
And everything works fine.
But now, i want to use some components of ui-components into ui-templates.
To do that, on ui-templates module, i created this code:
//if i use #growerdiaries-web/ui-components dosent works. Dosent find the reference.
import {UiComponentsModule} from '../../../ui-components/src/lib/ui-components.module';
import { LoginTemplateComponent } from './login-template/login-template.component';
#NgModule({
imports: [CommonModule, UiComponentsModule],
declarations: [
LoginTemplateComponent
],
exports: [
LoginTemplateComponent
],
})
export class UiTemplatesModule {}
Why module cant find the reference from ui-components library direcly? Im doing something wrong?
ui-components module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ButtonComponent } from './button/button.component';
import { InputComponent } from './input/input.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
#NgModule({
imports: [CommonModule],
declarations: [
ButtonComponent,
InputComponent,
HeaderComponent,
FooterComponent
],
exports: [
ButtonComponent,
InputComponent,
HeaderComponent,
FooterComponent
],
})
export class UiComponentsModule {}
It was necessary to clear the visual studio code cache. Resolved.
I have installed new package using 'npm install angular-image-slider --save'. also i have added sliderModule on app.module.ts file
import { AppComponent } from './app.component';
import { AppRoutingModule } from './/app-routing.module';
import { SliderModule } from 'angular-image-slider';
import { HomeComponent } from './home/home.component';
#NgModule({
declarations: [
AppComponent,
],
imports: [
DragScrollModule,
SliderModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
FileUploadModule,
TagInputModule,
BrowserAnimationsModule,
NgxCurrencyModule,
NgbModule.forRoot(),
ScrollToModule.forRoot(),
MetaModule.forRoot(),
BrowserModule.withServerTransition({appId: 'my-app'}),
DataTablesModule
],
providers: [TravalservicesService, Globalvar, Alwaysguard, Alwaysguradhost, Alwaysguarduserhost, LoaderService, {provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter}],
bootstrap: [AppComponent]
})
export class AppModule { }
home.component.html
<div class="row">
<h2 class="text-uppercase fs-20px text-strong">SENSE</h2>
<angular-image-slider [images]="imagesUrl"></angular-image-slider>
</div>
on home.component.ts file
import { Component } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
viewProviders: [Title],
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
public imagesUrl;
ngOnInit() {
this.imagesUrl = [
'IMAGE_URL1.jpg',
'IMAGE_URL2.jpg',
'IMAGE_URL3.jpg',
];
}
}
and it shows some errors
Error: Template parse errors:
Can't bind to 'images' since it isn't a known property of 'angular-image-slider'.
1. If 'angular-image-slider' is an Angular component and it has 'images' input, then verify that it is part of this module.
2. If 'angular-image-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
'angular-image-slider' is not a known element:
1. If 'angular-image-slider' is an Angular component, then verify that it is part of this module.
2. If 'angular-image-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Sorry for weird question i'm newbie on angular.
You need to import your component into your declarations section also like this
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
SliderModule
],
Because you are not import the component into module so it can't find your library definition code
I've created a stackblitz where I'm trying to instantiate the HelloComponent dynamically using the ReflexiveInjector and I have the HelloComponent listed in the app modules entryComponents array.
However I'm still getting:
Component HelloComponent is not part of any NgModule or the module has not been imported into your module.
Thoughts?
Added a link to this SO in this feature request asking for virtual / logical modules. Please thumbs it up if you like the suggestion.
You should also declare the HelloComponent in your declarations array of your module. Read the official docs about entrycomponents.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
#NgModule({
imports: [ BrowserModule, FormsModule ],
entryComponents: [HelloComponent],
declarations: [ AppComponent, HelloComponent ], // declare here
bootstrap: [ AppComponent ]
})
export class AppModule { }
I have been trying to create my own datatable, but facing issues.
So my app structure is like so:
where hkdt in my custom datatable module, I want to use this in my app module so that it is accessible everywhere.
hkdt.component.ts is:
import { Component } from '#angular/core';
#Component({
selector: 'hkdt',
exportAs: "hkdt",
templateUrl: './hkdt.html',
styleUrls: ['./hkdt.css']
})
export class HkdtComponent {
}
hkdt.module.ts is:
import { CommonModule } from "#angular/common";
import { NgModule } from "#angular/core";
import {HkdtComponent} from "./hkdt.component";
#NgModule({
imports: [CommonModule],
declarations: [HkdtComponent],
exports: [HkdtComponent]
})
export class HkdtModule {
}
index.ts is:
export * from './hkdt.component';
export * from './hkdt.module';
and I want to use it in my app.module.ts like so:
In my imports array of app.module.ts I import HkdtModule from import {HkdtModule} from "./core/hkdt";
and using it in some module like so:
<hkdt></hkdt>
below is my app.module.ts:
import {HkdtModule} from "./core/hkdt";
#NgModule({
declarations: [
AppComponent,
SignInComponent,
HomeComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
HkdtModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
but I get a console error:
Can anybody help me resolve me this problem.
Note: I do not want to import the component in the module and use it because I want to later publish my hkdt as a plugin and I want to make it work independently in a pluggable manner.
I have my main module like this, where I import the basic Libraries :
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MaterialModule } from '#angular/material';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { MapModule } from './map/map.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MapModule,
MaterialModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My question is when I create a new Module within the app i.e Map Module do I need to reimport all those libraries to that Module. I was under the impression that if I import the libraries on the module it would work under child modules.
But in my Map Module I am getting errors like.
Can't bind to 'ngClass' since it isn't a known property of 'div'.
My Current MapModule looks like
import { NgModule } from '#angular/core';
import { MapComponent } from './map.component';
import { MapMenuComponent } from './map-menu/map-menu.component';
import { MapControlsComponent } from './map-controls/map-controls.component';
import { MapService } from './map.service';
#NgModule({
imports: [],
exports: [],
declarations: [MapMenuComponent, MapControlsComponent, MapComponent],
providers: [MapService],
})
export class MapModule { }
Do I need to reimport the MaterialModule, Forms etc into module again for the components in this module to work ?
You only need to reimport modules with declarations, i.e. modules that define new components, directives and pipes. Modules that register providers don't need to be imported.
In this list:
imports: [
BrowserModule,
FormsModule,
HttpModule,
MapModule,
MaterialModule.forRoot()
],
FormsModule modules need to be imported, by HttpModule need not. BrowserModule re-exports CommonModule, so in the other modules you would probably want to import CommonModule, not BrowserModule to get built-in directives like NgClass. By importing CommonModule you will not have this error:
Can't bind to 'ngClass' since it isn't a known property of 'div'.
You can use SharedModule. All modules those are used in multiple modules
sharedModule example
import { NgModule } from '#angular/core';
import { anyService} from './any.service';
#NgModule({
providers: [anyService]
})
export class SharedModule {}
Now you can import this shared module in any modules in which want to use this module