Anil Singh | Code-sample.com

Why is it bad if a shared module provides a service to a lazy-loaded module? The lazy loaded scenario causes your app to create a new instance every time, instead of using the singleton. Lazy loading is the best practice of loading expensive resources on-demand. This can greatly reduce the initial startup time for single page web applications (SPA). Instead of downloading all the application code and resources before the app starts, they are fetched just-in-time (JIT) , as needed. The eagerly loaded scenario your app to create a singleton, instead of creates new instance every time. Explore in depths about Lazy loading - https://angular-wbecxz.stackblitz.io/partners

Should you import BrowserModule or CommonModule? BrowserModule – Most of all browser applications should import BrowserModule from @angular/platform-browser and the BrowserModule provides services that are important to launch and run your browser apps. Do not import BrowserModule in any other module. BrowserModule also re-exports CommonModule from @angular/common and CommonModule is used when you want to use directives - NgIf, NgFor and may more. BrowserModule exports a couple of NgModules like - exports : [   CommonModule ,   ApplicationModule ] And //AppModule class with the @NgModule decorator @ NgModule ({   declarations: [     AppComponent ,     LoginComponent ,     MyPipe ,     MyDirective   ],   imports: [ //DOM rendering, sanitization, and location     BrowserModule   ],   providers: [ //service providers ...

In this article, I will discuss how to redirect one page to other page and also discuss how to use the AuthGuard  and CanActivate in Angular 5 applications. Three options are available to redirect page in Angular 5 – 1.       Imperatively redirect the user in AppComponent 2.       Use the route data property 3.       Use a CanActivate guard The AuthGuard should call an application service that can login a user and retain information about the current user. Options 1 – Imperatively redirect the user in AppComponent @ Component ({   selector: 'app-root' ,   template: `.....` }) export class AppComponent {   constructor ( private _authService : AuthService , _router : Router ) {     if ( _authService . isLoggedIn ()) {       _router . navigate ([ 'user' ]);     }   } } This is not good pr...

How to Implementing Auth Guard with Component less Route in Angular 5? In this article, we take a look with few of the different types of guards  and how to implement them for specific use- 1.       Maybe the user must authenticate and then login in the app. 2.       If user has logged in but is not authorized to navigate to the target component. 3.       We might ask the user if its  OK to discard pending changes rather than save them. There are four different types of Guards - 1.       CanActivate – It use to checks to see if a user can visit a route. 2.       CanActivateChild - It use to checks to see if a user can visit a routes child. 3.       CanDeactivate - It use to checks to see if a user can exit a route. 4.       Resolve - It use to perform route data retrieval before rout...