Separate TypeScript (TS) And JavaScript (JS) Files In Different Folders In Angular 2

Introduction

This article explains how to separate TypeScript and JavaScript files into different folders to manage Angular 2 applications in a cleaner and better way.

Prerequisites

1. I will be using Visual Studio 2015 as my IDE to develop Angular 2 applications in this article.
2. Download the Angular seed project from below to start with the Angular 2 application.
   
   Angular Seed Project
   
   (Or)
   If you want to create the Angular 2 project manually, follow the below articles,
   
   Getting Started with Angular 2 application using Visual Studio 2015
   Getting started with Angular 2 application using Visual Studio Code

Step 1 Create new project

Create a new empty web application and copy the Angular seed project files in the solution directory.



After copying the seed project files into your solution directory, include the files in your Visual Studio.





Right click on package.json file and restore the packages. This installs the necessary packages required to start working with Angular 2.

After installing, you should find “node_modules” and “typings” folder in the solution.


Step 2 Separate TS and JS files

We will add TypeScript (ts) files in the “app” folder and we will create a new folder to save JavaScript (js) files that will be generated after compiling the code.

Create a new folder and name it “JSFiles”.



In order to output the JavaScript files to “JSFiles” directory, add the following line under in “tsconfig.json” file.

“outDir”: “JSFiles”



Build the code and you will find that JavaScript files are saved in “JSFiles” folder.



Note

If you do not find files under “JSFiles”, click on the “Show All Files” button to display the hidden files.

Step 3 Run the application

The next step is to change the System Configuration file “systemjs.config.js” to tell the system loader where to find the application files; i.e., JS files to run the application.

Change
map: {
// our app is within the app folder
app: 'app',

to
map: {
// our app is within the JSFiles/app folder
app: JSFiles/app,

If you are using Visual Studio IDE, please set index.html as your startup page .

Now, run the application to see the output.



Download the project from,

GitHub (or) BitBucket

If you came across any other approach to separate Typescript and JavaScript files in Angular 2 applications, please share it with your comments below.

Thanks for reading, hope it helps.