30
loading...
How to build minimal angular 12 application with webpack
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.
Good starting point is this post:
with simple webpack configuration to build typescript.
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);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 typescriptand run time dependencies relate to the framework:
$ npm install --save @angular/core @angular/platform-browser-dynamic @angular/platform-browserDue 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
}
}When all goes well, the working application looks like:
You can see it in action at:
https://marcin-wosinek.github.io/webpack-angular/
https://marcin-wosinek.github.io/webpack-angular/
The whole codebase is available at:
marcin-wosinek
/
webpack-angular
Minimal angular application build with webpack
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:
30