Yogesh Chauhan's Blog

Introduction to Angular modules Part 3: NgModules vs JavaScript modules and Angular libraries

in Angular on May 10, 2020

If you haven’t read it yet, here are the Part 1 & 2 Links:

Introduction To Angular Modules Part 1: NgModule Metadata
Introduction To Angular Modules Part 2: NgModules And Components

Introduction to Angular modules: Part 3

NgModules and JavaScript modules

The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects.

These are complementary module systems that you can use together to write your apps.

How modules work in JavaScript?

In JavaScript each file is a module and all objects defined in the file belong to that module.

The module declares some objects to be public by marking them with the export key word.

Other JavaScript modules use import statements to access public objects from other modules.

NgModules Examples


import { NgModule }     from '@angular/core';
import { AppComponent } from './app.component';

export class AppModule { }

Angular libraries

Angular loads as a collection of JavaScript modules. They are library modules.

Each Angular library name begins with the @angular prefix.

You can install them with the node package manager npm and import parts of them with JavaScript import statements.

Examples

You can import Angular’s Component decorator from the @angular/core library like this.


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

You can also import NgModules from Angular libraries using JavaScript import statements.

For example, the following code imports the BrowserModule NgModule from the platform-browser library.


import { BrowserModule } from '@angular/platform-browser';

In the example of the simple root module above, the application module needs material from within BrowserModule.

To access that material, add it to the @NgModule metadata imports like this.


imports:      [ BrowserModule ],

In this way you’re using the Angular and JavaScript module systems together.

Although it’s easy to confuse the two systems, which share the common vocabulary of “imports” and “exports”.

You will become familiar with the different contexts in which they are used.

Credit: Angular.io


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to remove WordPress TinyMCE Editor buttons?WordPressHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPSequence generator (range) using JavaScript Array.from()JavaScriptAdvanced Array Methods in JavaScript (with examples)JavaScriptIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLUnderstand Inheritance in PHP in this Basic Example (For Beginners)PHP