How to build minimal angular 12 application with webpack

If you follow the angular documentation, you find either:

• getting started guide that leads you to a stackblitz project with 21 files
• tutorial that start with installing the code generator

What if you want to try angular without getting their complete tooling or you want to integrate it into already existing project in a more lightweight way? This article have you covered - we will take a look on a minimal webpack configuration needed to build simple angular app.

Webpack preparation

Good starting point is this post:

Minimal webpack configuration to build typescript

Marcin Wosinek ・ Jul 8 '21

#webpack #typescript

with simple webpack configuration to build typescript.

Angular code

If we want to keep our file footprint as small as we can, we can put all angular logic into just one file src/index.ts:

import "zone.js";

import { NgModule, Component } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { BrowserModule } from "@angular/platform-browser";

@Component({
  selector: "app-component",
  template: "<div>AppComponent works!</div>",
})
export class AppComponent {
  constructor() {}
}

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

platformBrowserDynamic().bootstrapModule(AppModule);

Dependencies

For this code to work, we need few dependencies. Build time dependencies the same as in ts example:

$ npm install --save-dev webpack ts-loader typescript

and run time dependencies relate to the framework:

$ npm install --save @angular/core @angular/platform-browser-dynamic @angular/platform-browser

Necessary tsconfig tweaks

Due to angular using decorators, if we build an app with ts configuration as we have from the other application the build will fail:

instead, we should set tsconfig.json to:

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Working application

When all goes well, the working application looks like:

You can see it in action at:
https://marcin-wosinek.github.io/webpack-angular/

The whole codebase is available at:

marcin-wosinek / webpack-angular

Minimal angular application build with webpack

Links

• webpack video course

Summary

In this article, we have seen a minimal set up to start playing with angular. If you are interested in more of my content, you can find links here:

Webpack links

Marcin Wosinek ・ Jul 3 '21

#webpack

Comments

[Jan Horubała]

Nice! That's exactly what I was looking for :)