Tag Archives: angular

Fixing angular warning “exceeded maximum budget”

With your Angular application growing, you will bump into the following warning :

WARNING in budgets: bundle initial-es2015 exceeded maximum budget. Budget 2 MB was not met by 169 kB with a total of 2.16 MB.

Fixing it is quite easy, simply edit your angular.json file, locate the “budgets” node, and incrase the limit :

"budgets": [
                 {
                   "type": "initial",
                   "maximumWarning": "3mb",
                   "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
               ]

Obviously, this is only valid if you’re getting just above the limit, or don’t care about application loading time. Because the warning is here for a reason, and you may eventually have to find out why your application is getting heavier, and how to trim it.

Preventing Angular observable leaks

A common Angular beginner error is forgetting to unsubscribe from observables. This leak may not be noticeable at first, but will eventually lead to a sluggish application, or other unexpected behaviours.

One can manually keep track of all subscriptions, in order to properly unsubscribe in ngOnDestroy. However, this is tedious, and error prone.

Depending on your subscription context, there are two solutions that you may like.

For a subscription which is a one shot, you need to retrieve your data, and then fortget it, the RxJS first operator combined if straightforward.

myObservable.pipe(first()).subscribe(...);

If you’re expecting several events, and need to unsubscribe only when the component gets destroyed, then @ngneat/until-destroy, is “a neat way to unsubscribe from observables when the component destroyed

The @UntilDestroy({ arrayName: ‘subscriptions’ }) is a nice way to both explicit the requirement for observables to be unsubsribeds, while minimizing boilerplate code.

How to create an Angular 7+ component with two way binding ?

You have an angular component, and would like to have a value with a two way binding similar to ngModel. The easiest way is to :

  • add an Input on your document
  • add an Ouput whose name is the one of the input, suffixed by Change (that’s a required naming convention)

For example :

@Component({
  selector: 'app-select-nature-document',
  template: './select-nature-document.component.html',
  styleUrls: ['./select-nature-document.component.css']
})
export class SelectNatureDocumentComponent implements OnInit {
  @Input()
  natureDocument: NatureDocument;
  @Output()
  natureDocumentChange: EventEmitter<NatureDocument> = new EventEmitter<NatureDocument>();
...

You can then notify the value change using the output event emitter :

  onNatureDocumentSelected() {
    this.natureDocumentChange.emit(this.natureDocument);
  }

And the component can be used like this :

<app-select-nature-document [(natureDocument)]="editedDocument.nature"></app-select-nature-document>

Thanks to https://stackoverflow.com/questions/42006770/angular2-component-input-two-way-binding.

Angular kanban component

While looking for some components to implement a kanban board, I found the @angular/cdk/drag-drop module, but I also stumbled upon this incredible work done by Trung Vo, a JIRA clone done in Angular : https://trungk18.com/experience/angular-jira-clone/, whose live demo can be seen here : https://jira.trungk18.com/project/board.

It’s so clean and neat, that you can’t help thinking “holy fuck,it’s open source ? I can use it even commercially ? I have to use it !”.