SystemJS is a dynamic ECMAScript (ES) module loader that is used by Angular Quickstart and other projects.
To use Kendo UI components for Angular with SystemJS, you have to explicitly list the package entry points. This article demonstrates how to implement the required configuration when you use the Angular Quickstart project template.
The source code for the completed sample project is available on GitHub at telerik/kendo-angular-quickstart.

Sample Project

To configure a typical SystemJS setup in the Angular Quickstart sample:
  • Clone the Agular Quickstart project
  • Add the required Kendo UI package to your project
  • Add the styles
  • Configure the SystemJS module loader
  • Run your application

1. Cloning Angular Quickstart

To clone the Angular Quickstart project into a local folder (It didn't run so I create a new angular4 project):
  • sudo npm install -g npm@latest
  • sudo npm cache clean -f
  • sudo npm install -g n
  • sudo n stable
  1. ng new KendoUIAngularQuickstart 
  2. cd KendoUIAngularQuickstart
  3. npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations
    npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n
    npm install --save @progress/kendo-theme-default

2. Adding the Kendo UI Package

  1. Choose a Kendo UI package for Angular to add to your project. For example, to include the Buttons, use the following command:
    npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations
  2. Import the component directives into your source code. Change the code in src/app/app.module.ts to:
    import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

// Import the ButtonsModule...
import { ButtonsModule } from '@progress/kendo-angular-buttons';

@NgModule({
   declarations: [
       AppComponent
   ],
   imports: [
       BrowserModule,
       BrowserAnimationsModule,
       FormsModule,
       HttpModule,

       // ... and register it
       ButtonsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }
  3. Add the HTML for the Button to src/app/app.component.html:
    <h1>{{title}}</h1>

<button kendoButton [primary]="true">My Kendo UI Button</button>

3. Adding the Styles

Kendo UI for Angular distributes its Default theme as a separate NPM package that is available as @progress/kendo-theme-default.
  1. Install the Default theme in the same way you included the Buttons package:
    npm install --save @progress/kendo-theme-default
  2. Import the CSS file from the Default theme package into src/app/app.component.ts:
    @Component({
 selector: 'my-app',
 styleUrls: [
   // Load the Kendo UI Default theme
   'node_modules/@progress/kendo-theme-default/dist/all.css'
 ],
 template: `
   <h1>Hello {{name}}!</h1>
   <button kendoButton (click)="onButtonClick()" [primary]="true">My Kendo UI Button</button>
 `,
})
--
and here is my app.component.ts file:
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css',
              '../../node_modules/@progress/kendo-theme-default/dist/all.css'
             ]
})
export class AppComponent {
  title = 'Angular2';
  onButtonClick() {
        this.title = 'from Kendo UI Button';
    }
}

4. Configuring SystemJS

The configuration file, which SystemJS uses, is located in the project template under src/systemjs.config.js.
The complete list of entry points for all Kendo UI components for Angular is available in telerik/kendo-angular2-quickstart/src/systemjs.config.js.
To add the Kendo UI configuration to the map and packages section, use the following example:
CODE SAMPLE
map: {
  // ...


  // Kendo UI for Angular scopes
  '@progress': 'npm:@progress',
  '@telerik': 'npm:@telerik'
},
packages: {
  // ...


  // Kendo UI for Angular packages
  'npm:@progress/kendo-angular-buttons': {
    main: './dist/npm/main.js',
    defaultExtension: 'js'
  }
}
NOTE: with angular 4, systemjs.config.js file is optional.

5. Running Your Application

To run the application in the browser, use the npm start command.

Suggested Links