1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. EJS2 + Typescript and Visual Studio integration

EJS2 + Typescript and Visual Studio integration

Hello,


I have downloaded EJS2 and I am interested in pure typescript developement with this library

In installation folder "JavaScript - EJ2\19.1.0.54\TypeScript" one found src (source code) and sample code to execute. This is great.
I want to use VisualStudio 2019  or 2017 to incorporate one of this sample in a new VS typescript project

From syncfusion website, one ca, find easily the way to use MVC Core  +EJS2 here or javascript here or here or even with Sample creator

Using MVC is useless for me and Node js sample import hundreds of directories in "node_modules" I do not understand and that gives some pain when compiling with npm errors (like uglify + webpack)

Is there any place where a pure and simple use of Typescript + EJS2 + Visual Studio is showed or explained ?




Best regards,

Philippe 

1 Reply 1 reply marked as answer
JA Jesus Arockia Sankaran S Syncfusion Team May 6, 2021 10:47 AM UTC

Hi Philippe, 

Thank you for contacting Syncfusion support.  

We have checked your query and we want to inform you that we need to use any of the module loader/bundler (systemjs, webpack, etc..) for importing modules from the packages if we use TypeScript as development language.  We request you to try “Visual Studio Code” for TypeScript project than Visual Studio for better and easy development environment setup. You can find more details about this IDE from the following links. 

Visual Studio Code: https://code.visualstudio.com/ 

We also to ask our Github sample for TypeScript with Webpack from the following link. 

TS + Webpack: https://github.com/SyncfusionExamples/ej2-ts-webpack (Open this folder in VS Code and run “npm install”, “npm run start” respectively) 

TS + SystemJS: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SystemJS-160423479 (only using CDN links and open the HTML file using “Web Server for Chrome” extension) 


System.config({ 
    transpiler: "ts", 
    typescriptOptions: { 
        target: "es5", 
        module: "commonjs", 
        moduleResolution: "node", 
        emitDecoratorMetadata: true, 
        experimentalDecorators: true, 
    }, 
    meta: { 
        'typescript': { 
            "exports": "ts" 
        } 
    }, 
    paths: { 
        "syncfusion:": "//cdn.syncfusion.com/ej2/" 
    }, 
    map: { 
        app: 'app', 
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", 
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" 
    }, 
    packages: { 
        'app': { main: 'index', defaultExtension: 'ts' } 
    } 
 
}); 
 
System.import('app'); 



We recommend you to install the “TypeScript HTML Application Template” application project template extension to create TypeScript sample in Visual Studio. 



We request you to follow the below steps to create project this extension. 

  1. Create a project using this template as shown in the above image.
 
 
 
 
  1. Add the package.json file.
 
 
 
Content for “package.json” file.  
 
 
"devDependencies": { 
    "terser-webpack-plugin": "^2.3.5", 
    "ts-loader": "^7.0.1", 
    "typescript": "^3.8.3", 
    "webpack": "^4.43.0", 
    "webpack-cli": "^3.3.11", 
    "webpack-dev-server": "^3.10.3" 
  }, 
  "dependencies": { 
    "@syncfusion/ej2-buttons": "*" 
  } 
 
 
  1. Add the configuration file for Typescript compilation “tsconfig.json”
 
 
 
Content for “tsconfig.json” 
 
 
{ 
  "compilerOptions": { 
    "target": "es5", 
    "module": "amd", 
    "declaration": true, 
    "removeComments": true, 
    "noLib": false, 
    "experimentalDecorators": true, 
    "sourceMap": true, 
    "pretty": true, 
    "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", "es2015.promise", "dom" ], 
    "types": [] 
  }, 
  "exclude": [ 
    "node_modules" 
  ], 
  "compileOnSave": false 
} 
 

  1. Add configuration for webpack compilation
 
 
 
Content for webpack configuration 
 
 
const path = require('path'); 
const TerserPlugin = require('terser-webpack-plugin'); 
 
module.exports = { 
    mode: 'development', 
    entry: path.join(__dirname, '/app.ts'), 
    output: { 
        filename: 'app.js', 
        path: __dirname 
    }, 
    devtool: false, 
    optimization: { 
        minimize: false, 
        minimizer: [new TerserPlugin( 
            { parallel: true, } 
        )], 
        usedExports: true, 
    }, 
 
    module: { 
        rules: [ 
            { 
                test: /\.tsx?$/, 
                loader: 'ts-loader', 
            }, 
        ] 
    }, 
    resolve: { 
        extensions: [".tsx", ".ts", ".js"] 
    }, 
}; 
 

  1. Add the below configuration in “.csproj” file
 
 
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> 
    <Exec Command="npm install" /> 
    <Exec Command="webpack" /> 
  </Target> 
 

  1. Content for “index.html”
 
 
<!DOCTYPE html> 
 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>TypeScript HTML App</title> 
    <link rel="stylesheet" rel='nofollow' href="app.css" type="text/css" /> 
    <link rel='nofollow' href=https://cdn.syncfusion.com/ej2/material.css rel="stylesheet"> 
     
</head> 
<body> 
    <h1>TypeScript HTML App</h1> 
 
    <button id="normalbtn">Normal</button> 
    <script src="app.js"></script> 
</body> 
</html> 
 

  1. Content for “app.ts”
 
 
import { Button } from '@syncfusion/ej2-buttons'; 
 
// initialize button control 
let button: Button = new Button(); 
 
// render initialized button 
button.appendTo('#normalbtn'); 
 
 
Please get back to us if you have any queries. 

Regards, 
Jesus Arockia Sankaran S 
 


Marked as answer
Loader.
Up arrow icon