How it works: Angular Components

Angular components are elements composed by a template that will render your application.

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

@Component({
  providers: [],
  selector: 'app-required',
  styleUrls: ['required.component.scss'],
  // template: `This field is required.`,
  templateUrl: 'required.component.html',
})
export class RequiredComponent { }

Continue reading

How it works: Angular Modules

Angular modules are containers for different parts of your app.

You can have nested modules, your app.module is already actually nesting other modules such as BrowserModule and you can add RouterModule and so on.

A module is a class with the @NgModule decorator

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

Continue reading

Webpack DllPlugin and DllReferencePlugin

The Dll and DllReference plugins allow the code to be split in multiple bundles in a way the bundles can be compiled independently.

It is possible to build “vendor” scripts in a library that does not need to be compiled often (ex: React, jQuery, Bootstrap, Fontawesome…) and reference it in your app bundle that will need those scripts.

The application bundle, the one that is constantly going to be changed, will be in a separate configuration just referencing a already built “vendor” bundle.

For an example in a full project see https://github.com/brunolm/ts-react-redux-startup

Continue reading