DEV Community

loading...

How to build minimal angular 12 application with webpack

Marcin Wosinek
Javascript developer
Updated on ・2 min read

If you follow the angular documentation, you find either:

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:

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

and run time dependencies relate to the framework:

$ npm install --save @angular/core @angular/platform-browser-dynamic @angular/platform-browser
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

Working application

When all goes well, the working application looks like:

Alt Text

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

The whole codebase is available at:

GitHub logo marcin-wosinek / webpack-angular

Minimal angular application build with webpack

Links

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:

Discussion (1)

Collapse
jasiek profile image
Jan Horubała

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