Angular 4? That's one of my initial questions when realising that Angular's latest upgrade from 2.0 was indeed Angular 4. There seems to have been a specific reason for this, which will not be explore in this tutorial. However we will look at Angular 4 in detail, starting with modules and then covering other aspects in upcoming posts.

Modules

Angular 4 is a framework built on the notion of a modular architecture. This simply means that Angular 4 applications consist of modules that contain imported files such as components, services and other modules. To visualise this, consider the image below:

Main app module
Main app module
Components
Components
Services
Services
 Modules
 Modules

Every Angular 4 application has at least one module, which will be the main application module. This module is where the main application component, services and other modules are loaded, of course other modules can do exactly the same, however the main module will be the entry point to the application, providing the core properties through which the application will be ran. Any module could do this, but in this example the this module will be called the AppModule for convention, as it's the applications main module. For example, consider the module code below which is essentially code for the image above:

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule
    ],
    providers: [AuthGuard],
    bootstrap: [AppComponent]
})
export class AppModule { }

The syntax @NgModule is called a class decorator, which allows classes (such as NgModule) to be called in a concise manner with parameters. In this case, the class NgModule is being called with a parameter containing multiple objects, namely the declarations, imports, providers and bootstrap arrays. This class is exported as the AppModule class which can then be bootstrapped (intialised) according to the recommended approach of creating a main.ts in the src folder which will then run the function platformBrowserDynamic().bootstrapModule(AppModule); which initiates the bootstrapping.

This is an Angular module. It is clean due to utilising several syntactic advantages from TypeScript/ES6 (although in this case, it is strictly TypeScript, hence the file extension names .ts). There is more detail into how the module works with its defined components and other properties (e.g. services, modules) to actually build the application, however these are not necessary at the moment as they are not strictly related to modules and will be covered individually in later posts.

This is it for the basics needed to understand what Angular modules are and what they consist of.