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
- I will be using Visual Studio 2015 as my IDE to develop Angular 2 applications in this article.
- 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: {
-
- app: 'app',
-
- to
- map: {
-
- 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.