Can’t resolve all parameters in Angular and Webpack

I have recently faced an issue while configuring an Angular 6 application using Webpack 4 , All the dependencies I am injecting in to the component are throwing error.

This error will throw because of various reasons such as circular dependency , not properly spelled @Injectable() decorator etc. You can check the scenarios in the below link
https://stackoverflow.com/questions/37997824/angular-di-error-exception-cant-resolve-all-parameters

My issue was little bit different , typescript is not resolving decorator> To fix the issue I have set emitDecoratorMetadata=true in tsconfig.json file

Webpack throwing TypeError: Data must be a string or a buffer in Angular CLI

Recently I got some error unexpectedly while running my Angular-CLI application.

By default you will not get any information about the error which WebPack is throwing. But I will tell you , how you can log the exact error related to your issue. The reason could be different for your scenario.

Navigate to yoursource\node_modules\webpack\lib\dependencies and open HarmonyExportImportedSpecifierDependency.js file and log the import dependency
updateHash(hash) {
super.updateHash(hash);
const hashValue = this.getHashValue(this.importDependency.module);
if (this.importDependency.module != null){
// console.log('Module resource: ', this.importDependency.module.resource);
}else{
console.log('\nFile not found: ', this.importDependency);
}
hash.update(hashValue);
}

In my case I got the module in my application where the issue is.

Hope this helps

Load Components Dynamically at runtime in Angular 4

Angular Version I have used – 4.2.0
Here I am going to explain how to load dynamic components at runtime. By using angular ComponentFactoryResolver you can load components dynamically. In the below example I am loading a component dynamically in to another component at runtime .

DynamicComponentHostDirective
In order to load a dynamic component you have to create a directive that you can apply to ng-template , which will helps to place the components at run time. This directive injects ViewContainerRef to gain access to the view container of the element that will host the dynamically added component.
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[dynamiccomponent-host]',
})
export class DynamicComponentHostDirective {
constructor(public viewContainerRef: ViewContainerRef) {
}
}

ContainerComponent

This is just a place holder component to load the dynamic component.This component accepts an input(contains what component you want to load at runtime)  which is coming from a parent components or you can load from your service based on your implementation. This component is doing the major role to resolve the components at runtime. In this method you can also see a method named renderComponent() which ultimately loads the component name from a service and resolve with ComponentFactoryResolver and finally setting data to pass the dynamic component.
import { Component, Input, OnInit, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { DynamicComponentHostDirective } from './DynamicComponentHost.Directive;
import { YourInputDataModel } from './Data.Model';
import { DynamicComponentService } from "./DynamicComponent.Service";
@Component({
selector: 'container-component,
templateUrl: 'app/tile/ContainerComponent.Template.html'
})
export class ContainerComponent implements OnInit {
@Input() tile: any;
@ViewChild(DynamicComponentHostDirective ) componentHost: DynamicComponentHostDirective ;
constructor(private _componentFactoryResolver: ComponentFactoryResolver,private dynamicComponentService :DynamicComponentService ) {
}
ngOnInit() {

}
ngAfterViewInit() {
this.renderComponents();
}
renderComponents() {
let component=this.dynamicComponentService .getComponent(this.tile.componentName);
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
let viewContainerRef = this.componentHost.viewContainerRef;
let componentRef = viewContainerRef.createComponent(componentFactory);
(componentRef.instance).data = this.tile;
}
}
export interface YourInputDataModel {
data: any;
}

You can see I have applied the directive we have created before to the ng-template

ContainerComponent.Template.html



DynamicComponentService
This is a simple angular service factory to register the component you want to load at runtime.

@Injectable()
//register your component
export class DynamicComponentService {
getComponent(componentName:string) {
if(componentName==="YourDynamicComponent"){
return YourDynamicComponent
}
else if(componentName==="OtherComponent"){
return OtherComponent
}
}
}

YourDynamicComponent(Component we registered inside the factory loads dynamically )
import { Component, OnInit, Input, ReflectiveInjector, Injector } from '@angular/core';
@Component({
selector: 'mydynamiccomponent',
templateUrl: 'app/templates/YourDynamicComponent.html'
})
export class YourDynamicComponent implements OnInit {
@Input() data: any;
constructor() {
}
ngOnInit() {

}
}

Entry Component

Finally to ensure that the compiler still generates a factory, add dynamically loaded components to the NgModule’s entryComponents array. You can add this in to your app module

@NgModule({
imports: [BrowserModule,HttpModule],
providers: [DynamicComponentService],
declarations: [

YourDynamicComponent,
OtherComponent
],
exports: [],
entryComponents: [YourDynamicComponent,OtherComponent],
bootstrap: [MainApplicationComponent]
})
export class AppModule {
constructor() {

}
}

Source Code
Download Source

Communicating with parent component from child component in Angular 2+

In my last blog I have explained about @Input decorator to pass data from parent component to the child component. @Output is on other hand used in response to some event within a child component to receive some information for the parent component through some events. If you are not read my previous blog , I would suggest you to read the same. I have used the same example here also.

Child Component
Let’s talk about the child component first. You can see I have a simple method named productCardClick() which I am calling when clicking on the button. It’s pretty straight forward.

Modifying the child component
Next I am going to pass some data to the parent through the same productCardClick() method in the child component. In order to do that first you have to add a new property of type EventEmitter and emit the data you want to pass in to the parent component through this property like below .

Parent Component
Let’s go the parent component named ProductListComponent


In the parent component (ProductListComponent) you can see I have receiver method named onProductCardClickHandled(data:any) with a parameter to receive the data from the child component and I am calling this receiver method with a parameter via the @Output decorated property onProductCardClick inside the child component. Now when you click the button you will receive the child component data in to the parent component

Ajax Loader using Angularjs

Introduction
In this article i am focus on How to implement Ajax Loader or busy Indicator using AngularJs
Custom Directive for loader
Angular Directives are markers of a DOM element. Using this you can create your own custom elements,custom events.

More about angular directives

Here i am going to create a custom attribute directive named busyindicator to show a busy loading indicator during Ajax call.


(function () {
"use strict";
angular.module("App").directive("busyindicator", busyIndicator);
function busyIndicator() {
var directive = {
restrict: "A",
link: function ($scope) {
$scope.$on("showBusyIndicator", function () {
$scope.canShow = true;
});
return $scope.$on("hideBusyIndicator", function () {
$scope.canShow = false;
});
}
};
return directive;
}
})();

If any http request is in progress , Angular JS will automatically update the anyRequestInProgress property to true on the scope object and once the request complete it will set back to false. In this directive link function i have created a angular watch function whenever if any changes in anyRequestInProgress property it will notify this method.

Apply the busyindicator directive to the html element as an attribute also the visible status property canShow to angularjs ng-show directive to hide and show the div.

 

//CSS for showing loader image in the center of a screen

#loaderdiv
{
display : none;
}
#loaderdiv.loader {
display : block;
position : fixed;
z-index: 100;
background-image : ‘loader.gif’
-ms-opacity : 0.4;
opacity : 0.4;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;
}


You no need to write any code for show & hide loader element . Our custom directive automatically handle this based on our service request.