How to use Syncfusion EJ2 in RequireJs application?

1 min read

Overview

This article explains how to use the Syncfusion EJ 2 component with RequireJS module.

Prerequisite

Node
TypeScript

Creating RequireJS Project

Create a directive for the project (for example “ej2-requrejs”)

directory creation

Open the command and run the following NPM command to initialize a node project.

npm init command

Install the following packages using the NPM command.

npm install requirejs typescript @syncfusion/ej2-buttons http-server --save

Create HTML file and name it as “index.html” and also refer required script and style files.

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="./node_modules/requirejs/require.js" data-main="./src/app.js"></script>
    <script src="./require.config.js"></script>
    <title>Essential JS 2 with RequireJs</title>
</head>
<body>
    <button id="element"></button> 
</body>
</html>

Create “app.ts” file inside the “src” directory.

 
import { Button } from '@syncfusion/ej2-buttons';
 
// Initialize Button component.
let button: Button = new Button({ content: 'Button' });
 
// Render initialized Button.
button.appendTo('#element');

Create “tsconfig.json” file for compiling the TypeScript file to “AMD” module.

 
{
    "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "declaration": true,
    "removeComments": true,
    "noLib": false,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "rootDir": "src",
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true,
    "allowJs": false,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "suppressImplicitAnyIndexErrors": true,
    "lib": ["es2015.collection","es2015.core","es5", "dom"]
    },
    "exclude": [
    "node_modules",
    "dist",
    "public",
    "coverage",
    "test-report"
    ],
    "compileOnSave": false
    }

Configuring RequireJS

The Syncfusion NPM packages should be configured as shown in the following code example.

 
require.config({
 
    baseUrl: './src',
 
    packages: [
        {
        name: '@syncfusion/ej2-base',
        location: '../node_modules/@syncfusion/ej2-base/dist',
        main: 'ej2-base.umd.min.js'
 
        },
        {
        name: '@syncfusion/ej2-buttons',
        location: '../node_modules/@syncfusion/ej2-buttons/dist',
        main: 'ej2-buttons.umd.min.js'
        }
    ]
});

Include NPM Commands

Include the following NPM command under scripts section of “package.json” file.

 
"scripts": {
    "start": "tsc && http-server -o"
  },

Conclusion

You can run the sample using the “npm run start” command then the sample is automatically opened in the browser.

result

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-requirejs775266460

Did you find this information helpful?

Yes

Comments (0)