How to inject into a module dependency in Angular 2 - javascript

My angular 2.4.9 application A uses Http from #angular/http and another (3rd party) Angular Module B which itself also uses Http.
A -> http
A -> B -> http
In order to add generic HTTP headers, I've created a CustomHttp class in A that extends Http. I've injected it inside my app.module.ts like so
import AppComponent from './app.component';
import { Http, XHRBackend, RequestOptions } from '#angular/http';
import { CustomHttp } from '../myhttp/custom.http';
import { B } from 'some/thirdparty/module';
#NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
B.forRoot({ ... /* custom config */ })
],
providers: [{
provide: Http,
deps: [XHRBackend, RequestOptions],
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
return new CustomHttp(backend, defaultOptions);}
}]
})
This works for all usages of Http inside my application module A. However, it does not work for the B dependency. All usages of Http inside B still seem to use the original class.
I know that DI in Angular works hierarchically https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html.
Is there a way to tell Angular also to inject CustomHttp in the usages of Http in B?

Related

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.

Angular Pass HttpClient from app.module to another module to a service

I am developing an Angular (ngx-*) NPM Package. I have it compiled properly, and am using it in a new fresh project using npm link
The service has the following constructor to inject HttpClient and settings.
Updated.
MyService
constructor(private http: HttpClient, #Inject('configs') configs: ImyConfigs) {
MyService.Module
I have the following for root in the module
#NgModule({
declarations: [
],
imports: [
CommonModule,
// note that I am not importing HttpClientModule
// My understanding is that if I do I will get duplicate issues?
],
exports: [],
providers: []
})
export class MyModule {
static forRoot(configs?: ImyConfigs): ModuleWithProviders {
return {
ngModule: MyModule,
providers: [MyService, { provide: 'configs', useValue: configs }]
};
}
App.module
Now in my main project (fresh Angular project using this module) I want to use this service.
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
MyModule.forRoot(MYCONFIG_CONST)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I keep getting the following error:
ERROR Error: StaticInjectorError(AppModule)[MyService -> HttpClient]:
StaticInjectorError(Platform: core)[MyService -> HttpClient]:
NullInjectorError: No provider for HttpClient!
What am I doing wrong with regards to injecting the HttpClient into myService?
Edit: I will answer below.
ng serve --preserve-symlinks
Solved the problem.
This is an old project and it was already added to package.json, I just forgot about it ― for ... to long.

creating an angular package that has RouterModule as a dependancy

I'm trying to create a package using
Angular library starter
Everything works fine until I add RouterModule.
The module that causes an issue
import { NgModule, ModuleWithProviders } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ClientMenuComponent } from './client-menu/client-menu.component';
import { ClientMenuItemComponent } from './client-menu-item/client-menu-item.component';
import { RouterModule, Router, Routes } from '#angular/router';
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot([]) <---- Error: AoT compilation failed
],
declarations: [
ClientMenuComponent,
ClientMenuItemComponent,
],
exports: [
ClientMenuComponent,
ClientMenuItemComponent
]
})
export class ClientMenuModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: ClientMenuModule,
providers: []
};
}
static forChild(): ModuleWithProviders {
return {
ngModule: ClientMenuModule,
providers: []
};
}
}
This is the full error I get.
Error during template compile of 'ClientMenuModule'
Function calls are not supported in decorators but 'RouterModule' was called.
Error: AoT compilation failed
The environment that i'm using is
Angular CLI: 6.0.3
Node: 8.11.1
OS: darwin x64
Angular: 6.0.0
Pull out the function call:
export const MyModule = RouterModule.forRoot([]);
#NgModule({
imports: [
CommonModule,
MyModule
],
declarations: [
ClientMenuComponent,
ClientMenuItemComponent,
],
exports: [
ClientMenuComponent,
ClientMenuItemComponent
]
})
If this is a library or a module that will be imported into other libraries/modules you SHOULD NOT call the .forRoot() function when you pass it into the #NgModule.
RouterModule declares and exports some directives, e.g. router-outlet, routerLink, routerLinkActive etc. Also, it provides some services e.g. Router, ActivatedRoute etc. To avoid having multiple instances of services, RouterModule defines two methods, "forRoot" and "forChild". As the name suggests, "forRoot" method should be called only by root module, i.e. app.module, and forChild should be called by other feature modules. This way, you still get to use directives, components, pipes exported by this module and don't get new instances of services.
While this doesn't specifically get the root of your issue, it will likely resolve your issue. (Also this issue may help)

caching automatically for new patches

I have a huge angular 2 appliucation.
for every two weeks we are giving a patch release.
but everytime users need to clear the browser cache to see the js changes.
is there any inbuild method in angular 2 or js or jquery where users can delete the cache automatically when they hit the url in the browser after our release.
I thought of including that method in the below app.module.ts file since it includes all the modules
can you tell me how to solve the problem.
import './rxjs-extensions';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import {Base} from './components/base/base';
import {playerUser} from './components/player/user';
import {player} from './components/player/player';
import {
Routes,
RouterModule,
Router,
ActivatedRoute,
CanActivateChild,
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "#angular/router";
import { titleService } from './components/title/titleService';
#NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
routing,
MultiselectDropdownModule,
AccordionModule
],
declarations: [
AppComponent,
Base,
player,
playerUser,
playerFunctionalRoles,
],
providers: [
sportsUService,saveService,titleService],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
What are you using to bundle your application?
If you are using angular cli, then cache busting mechanisms are in place (notice that the generated files have a hash associated with them). In which case you can disable caching within Nginx/Apache or whatever you are using to serve your site on index.html only.
This will download the new source files identified by the new hash code reference within the index.html.
In case you are using webpack only, make sure that cache busting is enabled .
This tutorial : https://powerspace.tech/how-to-cache-busting-with-webpack-5131b4af8826 shows you how to enable hashing and cache busting.

Angular 2 lazy loaded module - service not singleton

I have implemented lazy loading modules into my application, the app.module.ts is configured correctly.
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
bootstrap: [AppComponent]
})
export class AppModule { }
The routing configuration
const APP_ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: 'tools', loadChildren: 'app/tools/tools.module#ToolsModule' }
];
export const routing = RouterModule.forRoot(APP_ROUTES);
Providing a service through the providers field in the child module and switching between components of that module reinstantiates that service (tested by logging in the service constructor).
The service is provided in the module only.
#NgModule({
declarations: [
ToolsComponent,
ToolsCartComponent,
ToolsContainerComponent,
ToolsFormComponent
],
imports: [
CommonModule,
toolsRouting
],
providers: [ToolsService]
})
export class ToolsModule { }
Why isn't the provided service not a singleton?
EDIT:
I have modified a plunker example for lazy loading modules by adding a service scoped only to that module (backend module in this case). Switching between BackendComponent and BackendSecondComponent (which are both declared under the lazy loaded module) the service gets reinstantiated (visible in the console)
Plunker link
I believe this is a known issue, tracked here https://github.com/angular/angular/issues/12869.
I think this is the same problem as this Stackoverflow post: How do I provide a service in a lazy-loaded module and have that service scoped to just the lazy-loaded module and its components?
The solution was to create a "root component" in the lazy loaded module and add the components to this new root component.

Categories

Resources