Using Mobiscroll components with ES6 modules

Using Mobiscroll packages as ES6 Modules prior to version 5.0.2 were only possible with "Complete" licenses or "Framework" licenses with the source code addon. By having access to the source code of the components, one could take advantage of the Modules and import only the things he needed.

Starting from Mobiscroll v5.0.2 we provide an ESM bundle with all packages, so they can be used as ES6 Modules. This way many bundlers (ex. Rollup, Webpack, etc...) can take advantage of the tree-shaking technique and eliminate dead code. This reduces the bundle size to only what is actually used in the application.

Here comes an example app module file, that loads the eventcalendar and the datepicker modules. After loading these modules, the components and directives can be used in the app component.

import { MbscEventcalendarModule, MbscDatepickerModule } from '@mobiscroll/angular';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ 
    MbscEventcalendarModule,
    MbscDatepickerModule,
    FormsModule,  
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<mbsc-eventcalendar></mbsc-eventcalendar>
<mbsc-datepicker [(ngModel)]="myDate" label="My Date"></mbsc-datepicker>
<mbsc-datepicker [(ngModel)]="myRange" select="range" label="My Range"></mbsc-datepicker>