We Keep Coding

No component factory found for ContactUsComponent. Did you add it to #NgModule.entryComponents? in angular 7

Getting this error when trying to render a modalcomponent from my component.
#NgModule({
imports: [...],
exports: [...],
entryComponents: [ContactUsComponent,..],
declarations: [ContactUsComponent,...],
providers: [...]
})
Have included both in entrycomponents and declarations
but still the error.

Splitting the shared module into multiple child modules

Inside of my SharedModule I want to split up related pieces of code into multiple child modules. When I do that however, I lose the common imports from the shared module. For example, I import the FormsModule before my SharedChildModule, but when I try to use ngModel inside my SharedChildModule it tells me that ngModel isn't available. Is it possible to have child modules inside the shared module and also to have those modules inherit the modules from the SharedModule?
When I include the components and directives from ChildSharedModule directly in the SharedModule I have no issues. It is only when I attempt to move those into a child module and then import the whole module into SharedModule that I get the errors.
#NgModule({
declarations: [],
exports: [
CommonModule,
FormsModule,
ChildSharedModule
],
imports: [
CommonModule,
FormsModule,
ChildSharedModule
]
})
export class SharedModule { }
#NgModule({
declarations: [
ChildValidatorDirective,
ChildControlComponent
],
exports: [
ChildValidatorDirective,
ChildControlComponent
]
})
export class SharedChildModule {}

You can not push down dependencies of modules, but you can export modules upwards.
#NgModule({
declarations: [],
exports: [
ChildSharedModule
],
imports: [
ChildSharedModule
]
})
export class SharedModule { }
#NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
ChildValidatorDirective,
ChildControlComponent
],
exports: [
ChildValidatorDirective,
ChildControlComponent,
CommonModule,
FormsModule
]
})
export class SharedChildModule {}
Now SharedModule will import SharedChildModule and will receive everything that is exported by that child module. Since SharedModule is also exporting SharedChildModule then parents who import it will also receive CommonModule and FormsModule.
You are basically breaking tree shaking here, and making unit testing very difficult.
Angular will no longer be able to drop unused modules, because you are coupling everything together. It will also become difficult to remove FormsModule from SharedChildModule because you won't know how many parents depend upon it.
You should try to keep your modules as singular and flat as possible, and have each module import only what it specifically needs.
You can export another module when the consumer doesn't know that other module is a requirement.

How can I use an Angular app into child routes of another Angular app?

I'd like to load an Angular app using lazy-loading (when a specific route is hit by users) into another Angular app
Shall I compile the first app in order to be used into the second one or what?
Routing-Module of the app to nest into an Angular app:
const upgradeRoutes: Routes = [
{
path: '/upgrade',
component: HelloComponent
},
{ path: '', redirectTo: '/upgrade', pathMatch: 'full' }
];
#NgModule({
imports: [
RouterModule.forChild(upgradeRoutes)
],
exports: [
RouterModule
],
declarations: []
})
export class UpgradeRoutingModule { }
Module of the app to nest into an Angular app
#NgModule({
declarations: [
AppComponent,
HelloComponent
],
imports: [
CommonModule,
UpgradeRoutingModule
],
exports: [
UpgradeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class UpgradeModule { }
App module where I want to use (with lazy loading) the first one described in a child routes:
import {UpgradeModule} from '../../node_modules/module-upgrade/src/app/app.module'
#NgModule({
declarations: [
...
],
import: [ UpgradeModule ]
});
1) I'd like to understand if that is correct, and/or there is another way to do it.
2) Another problem is that the child app uses Angualr 6, whereas the second/main one uses Angular 4.

Either:
Don't bootstrap your child app and use it as a submodule (that requires that you upgrade the main app to Angular 6, which requires at least to refactor your RxJS operators calls, and probably some minor other things),
Or just configure your web server to serve your child app on a specific URL. In that case your two apps won't be able to share any state (except global namespace, cookies and localStorage) or
Angular Component/Service/Directive/Pipe

How to add an Interceptor from a lazy loaded module to application Interceptors array on Angular 4/5?

I have AppModule and LazyLoadedModule. What I want from each module components is:
Requests from AppModule components use LoggerInterceptor and UrlInterceptor;
Requests from LazyLoadedModule components use LoggerInterceptor, UrlInterceptor and also FilterInterceptor.
app.module.ts
#NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
CoreModule,
HttpClientModule,
],
providers: [
{provide: HTTP_INTERCEPTORS,useClass: LoggerInterceptor,multi: true},
{ provide: HTTP_INTERCEPTORS, useClass: UrlInterceptor, multi: true }
],
})
export class AppModule {}
lazy-loaded.module.ts
#NgModule({
declarations: [
LazyLoadedComponent,
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: FilterInterceptor, multi: true }
],
})
export class LazyLoadedModule {}
The problem is that when LazyLoadedModule is lazy loaded, FilterInterceptor is not included to the interceptors thread, like it was never injected.
Any thoughts?

I struggled with the same problem, my use case is slightly different but it might work for you.
My scenario:
- I have a feature module for integration with third party, this third party API has bearer token authentication, so I set in on my interceptor.
if you only provide the interceptor from your feature module, it won't get called, similarly if you provide it from your AppModule it would work.
The fix for me was reimporting the HttpClientModule in the feature module and it worked.
You should however carefully test that when reimporting HttpClientModule, the interceptors provided in AppModule still work

Trouble using angular/material

I am attempting to refactor my code to use Angular/Material for the front end, however I cannot seem to get it to work...
I have followed what has been said on the angular material website and from Youtube video tutorials, but it just doesn't seem to want to work.
I have run the normal npm commands:
npm install --save #angular/material#latest #angular/cdk#latest #angular/animations#latest
I have imported a material button into my app.module.ts, along with the animations:
// Other imports are above
import { MatButtonModule } from '#angular/material/button';
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
Routing,
GreyhoundComponentModule,
BrowserAnimationsModule,
MatCheckboxModule,
MatButtonModule,
],
declarations: [
AppComponent
],
providers:[
DecoratorUtils,
Configuration,
{
provide: HTTP_INTERCEPTORS,
useClass: AppHttpInterceptor,
multi: true
}
],
bootstrap: [ AppComponent]
})
export class AppModule { }
I have imported a theme into the CSS file: style.css
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
And in the HTML file I have used the element tags as given by the angular/material website:
<button mat-button color="primary">Primary</button>

Change to
import { MatButtonModule } from '#angular/material';
To as you need to import button module from angular material and add
#import '~bootstrap-sass/assets/stylesheets/bootstrap';