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
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 created component within module and trying to output the result with simple html code in 'app.component.html'
When I hover on the code it shows me this error "BlogpostModule' is declared but its value is never read.ts(6133)"
When I remove the code "". I see the output.
Please help me to fix this blank page.
app.component.html
<div class="container">
<app-header></app-header>
<app-banner></app-banner>
<app-blogpost-featured></app-blogpost-featured>
<app-footer></app-footer>
</div>
<router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BlogpostModule } from './blogpost/blogpost.module';
import { CmspageModule } from './cmspage/cmspage.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { BannerComponent } from './banner/banner.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
BannerComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CmspageModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
blogpost.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { BlogpostRoutingModule } from './blogpost-routing.module';
import { BlogpostFeaturedComponent } from './blogpost-featured/blogpost-featured.component';
import { BlogpostListComponent } from './blogpost-list/blogpost-list.component';
import { BlogpostDetailComponent } from './blogpost-detail/blogpost-detail.component';
import { BlogpostRecentComponent } from './blogpost-recent/blogpost-recent.component';
import { CategoriesComponent } from './categories/categories.component';
#NgModule({
imports: [
CommonModule,
BlogpostRoutingModule
],
exports: [
BlogpostFeaturedComponent
],
declarations: [BlogpostFeaturedComponent, BlogpostListComponent, BlogpostDetailComponent, BlogpostRecentComponent, CategoriesComponent],
})
export class BlogpostModule { }
You forgot to include BlogpostModule in your app.module.ts.
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!
I have integrated ProseMirror in my Angular 6 as a text editor using Directives as below:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Injector } from '#angular/core';
import { ProsemirrorModule } from './prosemirror/prosemirror.module';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatInputModule } from '#angular/material';
#NgModule({
declarations: [
AppComponent,
MyElementComponent
],
imports: [
BrowserModule,
ProsemirrorModule,
BrowserAnimationsModule,
MatButtonModule,
MatCardModule,
MatInputModule
],
providers: [],
})
export class AppModule {
}
ngDoBootstrap() {
}
}
and used html as:
<div appEditor></div>
all are working well...but toolbar does not appear properly...all aligned one below other
No idea how to make it to appear properly. Any help please
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 {}