DEV Community: Don

Customize Angular Webpack config

Don — Wed, 16 Jun 2021 13:32:25 +0000

add customWebpackConfig to angular.json

{
    "projects": {
        "architect": {
            "build": {
                "options": {
                  "customWebpackConfig": {
          "path": "./custom-webpack.config.js",
          "replaceDuplicatePlugins": true
        },
                }
            }
        }
    }
}

add the extra webpack plugin config in the custom-webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-env'
                    ]
                }
            }
        ]
    }
}

A better way to connect to NgRx store

Don — Tue, 15 Jun 2021 13:02:19 +0000

As shown in the NgRx documentation example, in order to access the NgRx state, we have to create an observable and assign a selector to it. Due to the nature of observable, async pipe is required to apply to the observable in the HTML template. This is quite cumbersome in general.

export class MyCounterComponent {

  public count$: Observable<number>;

  constructor(private store: Store<{ count: number }>) {
    this.count$ = store.select('count');
  }
}

<div>Current Count: {{ count$ | async }}</div>

In a bid to turning the observable into regular variable. We can assign the state to a variable in the subscription.

export class MyCounterComponent {

  public count: number;
  public count$: Observable<number>;

  private countSubscription: Subscription;

  constructor(private store: Store<{ count: number }>) {
    this.count$ = store.select('count');
    this.countSubscription = this.count$.subscribe(count => {
      this.count = count;
    })
  }

  public ngOnDestroy() {
    this.countSubscription.unsubscribe();
  }
}

However, the above code doesn't look very nice. Once the component has a few more selectors, it could easily become a mess.

Can we come up with an approach so that we can connect the NgRx state with ease? Yes, we can!

We create a AbstractConnectableComponent to automate the observable subscription steps. This improved approach does not need to create the observable properties. The connectable component iterates through the connected properties and assigns the selected NGRX state to them. It is easy to unsubscribe the observables too. Once the observable destroy$ emits in ngOnDestroy() lifecycle hook, the subscriptions will be destroyed. Plus, since these connected public properties are just regular variables, we don't need the async pipe in the HTML template any more. All in all, this is a clever approach to connect NgRx store just with a little bit abstraction.

export class MyCounterComponent extends AbstractConnectableComponent  {

  public count: number;

  constructor(private store: Store<{ count: number }>) {
    this.connect<MyCounterComponent>({
      count: this.store.select('count'),
    })
  }

}

 @Component({ template: '' })
export class AbstractConnectableComponent implements OnDestroy {

  protected destroy$: Subject<void> = new Subject();

  public ngOnDestroy(): void {
    this.destroy$.next();
  }

  protected connect<T extends AbstractConnectableComponent>(data: ConnectableData<T>): void { 
    Object.entries(data).forEach(([key, value$]) => {
      value$.pipe(
        takeUntil(this.destroy$),
      ).subscribe(val => {
        this[key] = val;
        this.cdr.detectChanges();
      });
    });
  }
}

Using npm link in Angular9+

Don — Tue, 05 Jan 2021 12:12:32 +0000

When building an Angular library, 'npm link' can shorten the feedback loop between the library and the application. However, if you simply build the library and link it, it will throw errors when the project starts.This is because the application is compiled in Ivy mode, so its dependencies i.e. the linked library, should be compiled in Ivy mode too.

Here is a solution:

Create a new tsconfig.lib.ivy.json in project/PROJECT_NAME with the following setting. This ensures that Ivy view engine is used to compile the project whereas the library build does not use Ivy.

{
  "extends": "./tsconfig.lib.json",
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

In the library's angular.json, add a new configuration ivy under project->PROJECT_NAME->architect->build.

...
"configurations": {
  "production": {
    "tsConfig": "projects/PROJECT_NAME/tsconfig.lib.prod.json"
  },
  "ivy": {
    "tsConfig": "projects/PROJECT_NAME/tsconfig.lib.ivy.json"
  }
}

Update your package.json for easy access to the following commands:

 "scripts": {
    ...
    "build:ivy": "ng build PROJECT_NAME --configuration=ivy"
  }

Run npm run build:ivy. This will build an Ivy-compatible library.
Run cd dist/PROJECT_NAME
Run npm link
In the project, run npm link LIBRARY_NAME to link to the library.

Now the library is linked to the project.

Bonus tip: Run npm run build:ivy -- --watch so that the library gets rebuilt on every code change.

Webpack Overview

Don — Sat, 01 Aug 2020 00:00:00 +0000

Entry

An entry point indicates which module webpack should use to begin building out its internal dependency graph.

Output

The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

Chunks

Chunks come in two forms:

initial is the main chunk for the entry point. This chunk contains all the modules and its dependencies that you specify for an entry point.
non-initial is a chunk that may be lazy-loaded. It may appear when dynamic import or SplitChunksPlugin is being used.

Compilation

Compilation process:

initialization： read arguments, load plugins and instantiate Compiler
start compilation
find entry
compile modules and call corresponding loaders: The loader transpiles the match modules.
complete compilation
output resources and produce chunks
complete output: write files to system
Webpack broadcast different events throughout the process, the plugins subscribe the events will be called and change the final output.

graph LR
  A[Compiler]-->B[Compilation]
  B-->C[Modules]
  C--Loaders-->D[Parser]
  D-->E[Output]

Compiler Object

Compiler is a singleton. It controls the whole bundling process.

acorn library generates the AST tree for analyzing the relations of modules.
The final output is a IIFE function.
During the bundling process, modules are combined into chunks. Chunks combine into chunk groups and form a graph (ChunkGraph) interconnected through modules.

Compiler Hooks

The Compiler module is the main engine that creates a compilation instance with all the options passed through the CLI or Node API. It is the context containing all information for bundling. Every hot reload and compiling, compiler creates a new compilation object. It extends the Tapable class in order to register and call plugins. Most user facing plugins are first registered on the Compiler.

compiler.hooks.someHook.tap('MyPlugin', (params) => {
  /* ... */
});

Compilation Object

The Compilation object has many methods and hooks available. On this page, we will list the available methods and properties.

Compilation Hooks

The Compilation module is used by the Compiler to create new compilations (or builds). A compilation instance has access to all modules and their dependencies (most of which are circular references). It is the literal compilation of all the modules in the dependency graph of an application. During the compilation phase, modules are loaded, sealed, optimized, chunked, hashed and restored.

compilation.hooks.buildModule.tap(
  'SourceMapDevToolModuleOptionsPlugin',
  (module) => {
    module.useSourceMap = true;
  }
);

Hot Module Replacement

If Hot Module Replacement has been enabled via the HotModuleReplacementPlugin, its interface will be exposed under the module.hot property.

if (module.hot) {
  module.hot.accept('./library.js', function () {
    // Do something with the updated library module...
  });
}

Hot Module Replacement process

graph LR
check-->ready
ready-->apply
apply-->dispose
dispose-->apply
apply-->idle

Loader

Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

sync loader

/*
@param {string|Buffer} content Content of the resource file
@param {object} [map] SourceMap data consumable by https://github.com/mozilla/source-map
@param {any} [meta] Meta data, could be anything
*/
module.exports = function webpackLoader(content, map, meta) {
  // code of your webpack loader
}

async loader

  module.exports = function webpackLoader(content, map, meta) {
      var callback = this.async();
      someAsyncOperation(content, function (err, result) {
          if (err) return callback(err);
          callback(null, result, map, meta);
      })
  })

Plugin

Creating a plugin

A plugin for webpack consists of:

A named JavaScript function or a JavaScript class.
Defines apply method in its prototype.
Specifies an event hook to tap into.
Manipulates webpack internal instance specific data.
Invokes webpack provided callback after functionality is complete.

// A JavaScript class.
class MyExampleWebpackPlugin {
  // Define `apply` as its prototype method which is supplied with compiler as its argument
  apply(compiler) {
    // Specify the event hook to attach to
    compiler.hooks.emit.tapAsync(
      'MyExampleWebpackPlugin',
      (compilation, callback) => {
        console.log('This is an example plugin!');
        console.log(
          'Here’s the `compilation` object which represents a single build of assets:',
          compilation
        );

        // Manipulate the build using the plugin API provided by webpack
        compilation.addModule(/* ... */);

        callback();
      }
    );
  }
}