I used in app.component.html :
<mat-toolbar>
Responsive side navigation
</mat-toolbar>
and I define MatToolbarModule in app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatToolbarModule } from '#angular/material/toolbar';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatSidenavModule,
MatButtonModule,
MatIconModule,
MatDividerModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I obtain this error when I execute ng build command:
Error: src/app/app.component.html:1:1 - error NG8001: 'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
please, how to correct this error
Based on what you shared (before any update) your set up is sufficient to make it working. In case you are on VSCode closing and opening the IDE would be sufficient sometimes to get ride of this kind of compilation errors.
Here is a stackblitz compatible with your code above works fine.
Related
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 ],
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!
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 {}