Skip to main content

Tips and Hints on Angular 2 Modules Usage

What is Angular 2 module?

"Simply it's like a box which encapsulates angular components"

import { NgModule } from '@angular/core';

@NgModule({})




  • Class which decorated with NgModule



  • Arrange code in modular way



  • Extend our application with external modules




Some useful tips as below; 

Tip #1

Every application must bootstrap one component, which known as "root application component".

[code language="javascript"]
bootstrap: [
AppComponent
]

[/code]

Tip #2



Every components, directives and pipes must only belong to only one Angular module.

Because we follow singleton design pattern.

Tip #3



Only declare components, directives and pipes under declarations array.

[code language="javascript"]
declarations: [
AppComponent
, AppFilterPipe
, AppDirective
]
[/code]

Tip #4



Never re-declare modules belongs to another module, because if we do so we polluting core objective of Angular modules.

Tip #5



All declared components are private by default and only accessible to current module unless explicitly export them.

Tip #6



To consume directives within template, you must declare directive within the module or imported from external module.

Tip #7



Export/ Re-export components, directives & pipes when ever who need, means that you are not restrict on that.

Tip #8



No need of any imports to export our components, directives and pipes.

Tip #9



Never export services and declare those within providers array, since then its shared within all module.

[code language="javascript"]
providers: [AppGuard]
[/code]

Tip #10



Imported components, directives, pipes (it can be Angualar or 3rd party) makes available any exported module consumable within our module.

[code language="javascript"]
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
//external component imports,
imports: [
BrowserModule
, FormsModule
}
})
[/code]

Tip #11



Importing module does not mean that you have access to its imported modules. Simply imports are not inherited!

Tip #12



Avoid declaring services of shared modules in providers array since we must ensure modules not imported my times in the app.

Tip #13



Route guards must be declared within providers since navigation control is applicable to app level.

Comments

Popular posts from this blog

Turn off/ Hide Details panel/ Information Panel on modern SharePoint lists

Not always we require to show changes done by other which is a mandatory feature in SharePoint online.  What is details pane (aka. Information Pane)? Detail pane/ Information shows information regarding the document if you selected a one or its showing recent changes within a list or library. Follow link to Microsoft documentation about details pane. Bad news: Until Microsoft listen to User Voice , there is no straightforward way to enable disable this even you don't want. Good news: We could write a SharePoint framework extension to hack styles until Microsoft give us a permanent solution. How? I found this sample project (Inject CSS into modern SharePoint pages with React) which could reuse to our purpose. Thanks to Hugo for saving my time.  Steps to awesomeness:  Clone the project Resolve dependencies >  npm i Bundle >  gulp bundle --ship Package >  gulp package-solution --ship Upload package into SharePoint App catalog  

📢 Update -Top 10 Microsoft Teams questions from customers around the world

Over the last 4 months, we’ve traveled to 9 countries on Microsoft Ignite | The Tour meeting and speaking with users like you about Microsoft Teams. The insights and feedback at every location has been invaluable — Thank you. During our travels, there have been 10 questions that have repeatedly surfaced. Below are all of the questions — including the answers too, of course!   Can you restrict access to a specific channel in a team? What are best practices for governance, specifically around team creation, naming, and retention? Can I add guests to my team? If so, how? How does external access/federation work? How is this different to guest access? What functionalities do I get in a hybrid environment? Is Teams available for on-prem environments? How do I configure Direct Routing in Microsoft Teams? Why should I move from Skype for Business to Teams? How do I make this transition? I have existing SharePoint sites that I would like to bring into Teams. Can I do that? I need t

Eliminate Duplicates in Microsoft Flow and Azure Logic Apps

There is no straight forward method or Microsoft Flow action  to eliminate values in a collection like Microsft Excel (as of March 2019). This little hack will help you to eliminate/ remove duplicates and create a collection of unique values. Sample scenario: Need to send daily summarized notification to assigned approved with pending approval items. Sample workflow: Initialize an array Iterate collection of data and append items that are not there in the filtered array Side note: This won't be an option to consider if you too concerned about the performance of the workflow but for the time being its an option to consider.