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:
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
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:
Top comments (1)
Nice! That's exactly what I was looking for :)