I use EditableComponent from EditableComponent Link
declarations [EditableComponent,ViewModeDirective,EditModeDirective,EditableOnEnterDirective]
in appModule have work
but
declarations [EditableComponent,ViewModeDirective,EditModeDirective,EditableOnEnterDirective]
in SharedModule
imports[SharedModule] in appModule not work
module
SharedModule
import { NgModule } from '#angular/core';
import { EditableComponent } from './table-edittable/editable.component';
import { ViewModeDirective } from './table-edittable/view-mode.directive';
import { EditModeDirective } from './table-edittable/edit-mode.directive';
import { EditableOnEnterDirective } from './table-edittable/editable-on-enter.directive';
#NgModule({
declarations: [EditableComponent,ViewModeDirective,EditModeDirective,EditableOnEnterDirective],
exports: [EditableComponent,ViewModeDirective,EditModeDirective,EditableOnEnterDirective]
})
export class SharedDeclarationsModule {
}
module
appModule
import {SharedDeclarationsModule}from '../../layout-module/shared.declarstions.module';
#NgModule({
declarations: [UserComponent,LeftsideComponent,DetailComponent,
FocusableDirective,
],
imports: [BrowserModule,HttpClientModule,CommonModule,
SharedModule,
MatCheckboxModule,
FormsModule,
MatGridListModule,
SharedDeclarationsModule
],
exports:[UserComponent,LeftsideComponent,DetailComponent,SharedDeclarationsModule]
})
export class UserModule { }
Which part is wrong?
Sorry for not describing 'not work'
I represent with pictures:
not work img:
have work img:
You need to import CommonModule and export it. You can follow the documentation for creating a shared module. https://angular.io/guide/sharing-ngmodules
imports: [ CommonModule ],
Related
trying to implement ej2-calender in my project but faced below error..
The same code is working with demo project.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { DateRangePickerModule } from '#syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
import { ComponentNameComponent } from './component-name/component-name.component';
#NgModule({
declarations: [
AppComponent,
ComponentNameComponent
],
imports: [
BrowserModule,
DateRangePickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
datepicker.html
<div class="form-group daterange-group">
<ejs-daterangepicker id='daterangepicker' placeholder='Select a range' [startDate]='start' [endDate]='end'></ejs-daterangepicker>
datepicker.ts
public start: Date = new Date ("10/07/2017");
public end: Date = new Date ("11/25/2017");
</div>
Uncaught Error: Template parse errors:
Can't bind to 'startDate' since it isn't a known property of 'ejs-daterangepicker'.
If 'ejs-daterangepicker' is an Angular component and it has 'startDate' input, then verify that it is part of this module.
If 'ejs-daterangepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. (" col-md-3 col-sm-4">)
you need to import the component module (i guess it is DateRangePickerModule) in the app.module.ts.
component docs
Try this example in stackblitz
In html <ejs-daterangepicker [startDate]='start' [endDate]='end'></ejs-daterangepicker>
app.module.ts
import { DropDownListModule } from '#syncfusion/ej2-angular-dropdowns';
import { DateRangePickerModule } from '#syncfusion/ej2-angular-calendars';
import { HttpModule } from '#angular/http';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from '../app.component';
#NgModule({ declarations: [ AppComponent ], imports: [ DateRangePickerModule, DropDownListModule, BrowserModule, FormsModule, ReactiveFormsModule], providers: [], bootstrap: [AppComponent]
})
export class AppModule { }
I have tried everything on the internet and nothing seems to fix my error.
this is my NgModule :
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '#angular/forms';
import { MainLayoutComponent } from './MainLayout/main-layout/main-layout.component';
import { AppRoutingModule } from './app-routing.module';
import { ContainersPageComponent } from './Containers/containers-page/containers-page.component';
import { HttpClientModule } from '#angular/common/http';
import { MatTableModule } from '#angular/material/table';
import { MarinServiceService } from './services/marin-service.service';
import { MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatFormFieldModule } from '#angular/material';
#NgModule({
declarations: [
AppComponent,
MainLayoutComponent,
ContainersPageComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MDBBootstrapModule.forRoot(),
FormsModule,
AppRoutingModule,
HttpClientModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatInputModule,
MatSelectModule,
MatFormFieldModule,
],
providers: [MarinServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }
This is the exact Error im getting :
)
: 'mat-selection-list' is not a known element:
1. If 'mat-selection-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-selection-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
<!--Check Box Search-->
[ERROR ->]<mat-selection-list >
<mat-list-option >
I have tried re-Importing and it didn't work.
I have tried importing everything Mat related.
I really don't know what seems to be the problem.
You need to import MatListModule
import {MatListModule} from '#angular/material/list';
Add it under imports array of the app.module.ts
You need to import Mat List Module in the concerned module.
import {MatListModule} from '#angular/material/list';
More information: https://material.angular.io/components/list/api
In angular 7, I'm facing following issue, where I need to inject my MenuWidgetComponent in home component, I have imported it in widget component and exported in via index.ts. But still I'm getting,
I googled it but, could not found any solution. Did I miss something in my code?
Angular 7 : ERROR Error: Uncaught (in promise): Error:
StaticInjectorError(AppModule)[MenuWidgetComponent -> TripsMenu]:
Above error, Please help.
Folder Structrue:
ApplicationWorkspace >
1. GlobalApp >
- App >
- app.module
- home Component
2. Libs >
- widget >
src >
- MenuWidgetComponent
- widget module
index.ts
index.ts
export * from './lib/widgets.module';
export * from './lib/menu-widget/menu-widget.component';
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { NxModule } from '#nrwl/nx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { WidgetsModule } from '#gp-angular-workspace/widgets';
#NgModule({
declarations: [AppComponent, HomeComponent],
imports: [
BrowserModule,
NgbModule.forRoot(),
NxModule.forRoot(),
AppRoutingModule,
WidgetsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Home.html
<div class="home" background="assets/images">
<pfj-menu-widget></pfj-menu-widget>
</div>
widget.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { WidgetWrapperComponent } from './widget-wrapper/widget-wrapper.component';
#NgModule({
imports: [CommonModule],
declarations: [MenuWidgetComponent],
exports: [ModalWidgetComponent]
})
export class WidgetsModule {}
This should get you fixed up:
#NgModule({
declarations: [AppComponent, HomeComponent],
imports: [
BrowserModule,
NgbModule.forRoot(),
NxModule.forRoot(),
AppRoutingModule,
WidgetsModule
],
providers: [],
entryComponents: [
WidgetsModule
],
bootstrap: [AppComponent]
})
Anything you want to inject into another component must be defined as an entry component. It's the same as if you were to inject a component into a mat-dialog.
See: https://angular.io/guide/entry-components for more info.
I had missed to import TripsMenu in widgets module.
import { TripsMenu } from './menu-widget/trips-menu';
And it worked!
Changing backgound color of the paragraph tag using custom directive not working for angular 6 .
#CustomDirective
import { Directive,ElementRef,HostListener } from '#angular/core';
#Directive({
selector: '[appSteps]'
})
export class StepsDirective {
constructor(private elementref: ElementRef){ }
#HostListener('mouseenter')onmouseenter()
{
this.elementref.nativeElement.style.backgroundColor = 'yellow';
}
#HostListener('mouseleave')onmouseleave()
{
this.elementref.nativeElement.style.backgroundColor = 'null';
}
}
#ModuleCreated : Added my directive here and using this module in appmodule.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {StepsDirective} from '../steps.directive';
#NgModule({
imports: [
CommonModule
],
declarations: [StepsDirective]
})
export class StartModule { }
#AppComponent.html-Hosting my custom directive ontag
<p appSteps>My Hero Academia</p>
#app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { Signup_Component } from './signup/signup.component';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { StartModule } from './start/start.module'; *Module created
#NgModule({
declarations: [
AppComponent,
Signup_Component,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
StartModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
you should first export the module that you declare your directive in then import it any where you want to use
#NgModule({
imports: [
CommonModule
],
exports:[StepsDirective]
declarations: [StepsDirective]
})
export class StartModule { }
I have this scenario: there are three modules, header.module, _shared.module and app.module.
header.module imports and exports the header component. _shared.module acts as a wrapper module and imports the header.module. app.module finally imports the _shared.module.
Finally i am using the header through it's selector eg <dir-header> in app.component.html. I have even included CUSTOM_ELEMENTS_SCHEMA in app.module to suppress any error that may arise. But i'm no longer able to see the header, although the tag <dir-header></dir-header> is there in DOM, but it's content <div class="..." >...</div> is not.
header.module :-
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HeaderComponent } from './header.component';
import { HeaderRoutingModule } from './header-routing.module';
#NgModule({
declarations: [
HeaderComponent
],
imports: [HeaderRoutingModule, ReactiveFormsModule, CommonModule],
exports: [
HeaderComponent
]
})
export class HeaderModule {}
_shared.module :-
import { HeaderModule } from './header/header.module';
import { FooterModule } from './footer/footer.module';
#NgModule({
imports: [
CommonModule,
FormsModule,
HeaderModule,
FooterModule
],
declarations: [],
exports: []
})
export class SharedModule {}
app.module :-
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
/*rest of the code*/
#NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
imports:
[...
SharedModule,
...
],
providers: [CrudService, ...],
bootstrap: [AppComponent]
})
export class AppModule { }
EDIT: It is not importing the <header-dir> from header.module rather creating a new custom selector in app.component.html. How do I import the header from header.module ?
[ISSUE SOLVED] first of all, remove the CUSTOM_ELEMENTS_SCHEMA from app.module because it is not really required in THIS case. Next, in _shared.module under the exports section, also export the custom modules you have imported here i.e. header.module and foot.module :-
_shared.module
import { NgModule} from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HeaderModule } from './header/header.module';
import { FooterModule } from './footer/footer.module';
#NgModule({
imports: [
CommonModule,
FormsModule,
HeaderModule,
FooterModule
],
declarations: [],
exports: [HeaderModule,
FooterModule]
})
export class SharedModule {}