Develop Reference

angular material table pagination issue angular 10

i am using angular material table for angular 10 project. I added material table successfully.
but now i am trying to add pagination to my table. therefor i added below code to my component.
import {MatPaginator} from '#angular/material/paginator';
i added above import to my app.module.ts file.
this is the code that i added for my html page to load pagination
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
but this html tag did not work. it occurred error.
please check below image.
my modules

As stated by your IDE, the module doesn't know that component.
The solution is to add it in your app.module.ts (or equivalent depending where your ar ein the app)
You should import the module MatPaginatorModule in your appmodule
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MatPaginatorModule } from '#angular/material/paginator';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MatPaginatorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Note that i have imported the module and not the component directly

dynamically render a component in lazy loaded module with AOT throws cant find component factory

Current behavior
I declared those dynamic components as entry components in the module where I also want to render them. With JIT it works fine.
Following structure has the part of my app I want to render them: app -> home (lazy) -> contracts (lazy) -> search.
So I added those components to the module I use for the search component/route. When I'm compiling with AOT, everytime I visit the search route, the app tells me there is no component factory. Of course I searched google and found some results:
I tried adding them to the ANALYZE_FOR_ENTRY_COMPONENTS provider, I tried to import a ModuleWithProviders with .forRoot() in my app.module and I also tried simply importing and declaring my dynamic and all of its dependant components in the root module (app.module). Everything resulting in the same error.
I declare my dynamic components as entry components like so:
#NgModule({
imports: [SharedComponentsModule, FinoSchemaFormsModule, TabGroupModule, FinoInputModule],
declarations: [EnergySearchSettingsComponent, DslSearchSettingsComponent, MobileSearchSettingsComponent, ComparisonDetailSectionComponent],
entryComponents: [EnergySearchSettingsComponent, DslSearchSettingsComponent, MobileSearchSettingsComponent],
exports: [EnergySearchSettingsComponent, DslSearchSettingsComponent, MobileSearchSettingsComponent, ComparisonDetailSectionComponent],
providers: [CategoryMappingProvider]
})
export class ComparisonComponentsModule { }
This module gets imported in the SearchModule, where also my SearchComponent is declared. In this component I want to render those components dynamically using the ComponentFactoryResolver I inject in the SearchComponent.
ngOnInit() {
this.searchSettingsComponent = this.comparisonService.getSearchComponent(); // returns either EnergySearchSettingsComponent, DslSearchSettingsComponent or MobileSearchSettingsComponent
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(searchSettingsComponent);
this.searchSettingsComponent = this.searchContainer.createComponent(componentFactory);
this.searchSettingsComponent.instance.comparisonSettings = comparisonSettings;
this.searchSettingsComponent.instance.onSave.subscribe(settings => this.saveSearchSettings(settings));
}
The SearchComponent is the routing component of the search route, which is a child route of my contract route, which gets lazy loaded. This again is a child route of my home route (also lazy loaded) and this belongs to the main route.
Environment
Angular version: 5.2.4
For Tooling issues:
- Node version: 8.11.3
- Platform: Mac

It must be pretty simple. Just create the SharedModule and put all reusable dynamic component in it, export those components from SharedModule and import this Module in all required. Lazy loaded Modules.
Since it is imported direct to the Module, it must be available while creating the Dynamic Component.

Have you tried updating angular to latest 6.1.10? With version 5 I had issues with lazy loaded modules.
I had a similar task, and it worked fine under 6.1.4.
I've created a working example for you under 7.0.1
I've created both cases
Dynamic component is declared in the module which will create the dynamic component
Dynamic component is declared in a shared module and imported in the lazy-loaded module which will create dynamic components. You can create a shared module for every dynamic component, so you import only one component in a lazy loaded module

I don't feel as though there is enough information in your question to give you the exact answer to the problem you are facing.
I was able to create a solution with, what I feel is a similar setup to yours that you could use to solve your problem or to ask a more pointed question.
TLDR: Full GitHub repo here
I created an app structure as follows:
app/
app.module
app.component
/dynamic-provider --contains component that is dynamically loading other components
--module is lazy loaded by dynamic-one module
dynamic-loader.module
slot.component
/dynamic-one --contains lazy loaded module
--module is lazy loaded by app module
dynamic-one.module
/dynamic-loader --contains a component to be dynamically loaded
dynamic-provider.module
one.component
provider.service
app.module looks as follows
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: 'dynamic-loader', loadChildren: './dynamic-one/dynamic-one.module#DynamicOneModule' },
{ path: '', component: AppComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
dynamic-one.module looks as follows
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
#NgModule({
imports: [
RouterModule.forChild([
{ path: '', loadChildren: '../dynamic-loader/dynamic-loader.module#DynamicLoaderModule' }
])
]
})
export class DynamicOneModule {
constructor() {
console.log('one');
}
}
dynamic-loader.module looks as follows
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { DynamicProviderModule } from '../dynamic-provider/dynamic-provider.module';
import { SlotComponent } from './slot.component';
#NgModule({
declarations: [ SlotComponent ],
imports: [
DynamicProviderModule,
RouterModule.forChild([
{ path: '', component: SlotComponent }
])
]
})
export class DynamicLoaderModule { }
dynamic-provider.module looks as follows
import { NgModule } from '#angular/core';
import { OneComponent } from './one.component';
import { ProviderService } from './provider.service';
#NgModule({
declarations: [ OneComponent ],
entryComponents: [ OneComponent ],
exports: [ OneComponent ],
providers: [ ProviderService ]
})
export class DynamicProviderModule { }
As you state, your dynamic creation of components is working when the module isn't loaded, so I haven't included that code here(though it is in the repo for completeness). As can be seen here though, the app module lazy loads the dynamic-one module which in turn lazy loads the dynamic-loader module. The dynamic-loader module dynamically creates components from the dynamic-provider module.
How this differs from your implementation is very hard to tell as you have provided only a small amount of information. I hope this helps you find the missing piece you are looking for though!

Creating shared modules allows you to organize and streamline your
code. You can put commonly used directives, pipes, and components into
one module and then import just that module wherever you need it in
other parts of your app.
By re-exporting CommonModule and FormsModule, any other module that imports this SharedModule, gets access to directives like NgIf and NgFor from CommonModule and can bind to component properties with [(ngModel)], a directive in the FormsModule.
EX:
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { ReactiveFormsModule } from '#angular/forms';
import { SharedModule } from '../../shared/shared.module';
import { EntryModalComponent } from './entry-modal.component';
#NgModule({
imports: [
CommonModule,
SharedModule,
ReactiveFormsModule
],
declarations: [ EntryModalComponent ],
entryComponents: [ EntryModalComponent ],
exports: [ EntryModalComponent ]
})
export class EntryModalModule { }
Now you can use this EntryModalComponent for dynamic loading in some other component after importing the module where it's defined.

In the latest versions Angular has updated a lot of staff about lazy loaded modules. And with high probability this trouble is fixed now.

Save the log in electron devtools to a file

I am working on Electron app with angular 5 for the rendering process,
is there is a way to export the console programmatically?
I need a way to synchronize the logging data to file so, I can review it anytime
without opening electron devtools and save as option, I need it programmatically
I save my own logs, but what if there is a module that logging an error i need to get whole console log history and export it to log file

You can use electron-log, which is a logging module for Electron application. It can be used without Electron.
And you should use ngx-electron.
Firstly, install electron-log
npm install electron-log
Require it in the electron's main process.
const logger = require('electron-log');
Then install ngx-electron
npm install ngx-electron
ngx-electron is exposing a module called NgxElectronModule which needs to be imported in your AppModule.
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import {NgxElectronModule} from 'ngx-electron';
import {AppComponent} from './app.component';
#NgModule({
declarations: [],
imports: [
BrowserModule,
NgxElectronModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Once the module has been imported, you can easily use angular DI to ask for ElectronService.
import {Component} from '#angular/core';
import {ElectronService} from 'ngx-electron';
#Component({
selector: 'my-app',
templateUrl: 'app.html'
})
export class AppComponent {
logger
constructor(private _electronService: ElectronService) {
// this should be in init()
if(this._electronService.isElectronApp) {
this.logger = this._electronService.remote.require("electron-log");
}
}
public testLogger() {
this.logger.info('this is a message from angular');
}
}
After that, you should be able to use electron-log in your components, just remember import {ElectronService} from 'ngx-electron';, and this.logger = this._electronService.remote.require("electron-log"); in the components.

Confusion regarding BrowserModule in Angular 2/4

I have a module AppModule and another module say FooModule. I have some components in FooModule and I' am loading routes of FooModule in AppModule like any normal app would do.
Following is the sample code for AppModule:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from 'app/components/app';
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'foo',
loadChildren: './foo.module#FooModule'
}
])
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Following is the sample code for FooModule:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'
import { FooComponent } from 'app/components/foo';
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: FooComponent
}
])
],
declarations: [FooComponent],
})
export class FooModule {}
Now when I run the app, I' am getting Can't bind to 'ngIf' since it isn't a known property of 'div'. error which as per my understanding shouldn't happen because I' am using BrowserModule in AppModule and loading routes of FooModule in AppModule.
Am I missing something?
I' am using Angular CLI v1.2.0 and Angular 4.2.5.
Edit
I know that to fix this issue I need to import CommonModule in FooModule. But that's exactly why I' am asking this question in first place that when I have imported BrowserModule in AppModule which re-exports CommonModule then why I need to include CommonModule in each individual module?
Thanks

In each feature module, such as your fooModule you need to import CommonModule. It contains the common directives and pipes.
Actually, the BrowserModule imports and re-exports CommonModule, so they export the same functionality.
For more information, see this: https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=2s
UPDATE
Modules are not inherited. To say it another way, you cannot get the functionality of a module unless you import that module or another module that exports it.
As shown in the above diagram... If Shared Module imports Forms Module and App Module imports Shared Module, App Module would not have access to the Forms Module component, directives, and pipes (such as ngModel in this example) unless Shared Module exports Forms Module.
KEY:
Orange lines: Imports
Gray lines: Exports
Blue lines: Declarations

Import CommonModule into FooModule and any other module. BrowserModule imports CommonModule. CommonModule contains *ngIf etc. directives

Angular 2 Module is available only after server is running

I've an Angular 2 application, using Angular CLI and Webpack, where I'm using a external Angular 2 module called angular2-swiper, it's basically a wrapper to a library called Swiper.
I've to import a module in my AppModule called KSSwiperModule, but when I try to start my server with my code, it give me an error:
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: KSSwiperModule is not an NgModule
But if I run without the import of this module, the server runs, and I put the import after it's running, it doesn't give any error and execute perfectly. (no, my app can't work without this module).
My code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {KSSwiperModule} from 'angular2-swiper';
import { AppComponent } from './app.component';
import { SwiperComponent } from './swiper.component';
import { AppRoutingModule } from './app-routing.module';
import { FlickityComponent } from "./flickity.component";
#NgModule({
declarations: [
AppComponent,
SwiperComponent,
FlickityComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
KSSwiperModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Somebody know why it's happening and how to handle it?

I found the answer thanks a guy from my work (Warren)!
The problem is with the angular-cli version. I was using 1.0.0-beta.22-1, when i rolled back to 1.0.0-beta.19-3 it worked smoothly.