Delete js files from dist folder when deleting ts files angular 2 project

Question

I followed the answer here

Separate Angular2 TypeScript files and JavaScript files into different folders, maybe 'dist‘ in order to separate my files into app and dist folders. The interesting thing is that when I create a new .ts file somewhere in the app folder ir creates a .js and .js.map files automatically in the dist folder, but when I delete a .ts file from the app folder the corresponfing .js and .js.map files from the dist folder are not deleted. Why is that and how can I fix it ?

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "2.3.0",
    "@angular/compiler": "2.3.0",
    "@angular/core": "2.3.0",
    "@angular/forms": "2.3.0",
    "@angular/http": "2.3.0",
    "@angular/platform-browser": "2.3.0",
    "@angular/platform-browser-dynamic": "2.3.0",
    "@angular/router": "3.3.0",
    "@angular/upgrade": "2.3.0",
    "angular-in-memory-web-api": "0.2.0",
    "core-js": "2.4.1",
    "primeng": "1.0.0",
    "querystring": "0.2.0",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-rc.4",
    "systemjs": "0.19.39",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@types/core-js": "0.9.34",
    "@types/node": "6.0.45",
    "concurrently": "3.0.0",
    "lite-server": "2.2.2",
    "typescript": "2.1.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "inlineSourceMap": false,
    "inlineSources": false,
    "outDir" : "dist"
  },
   "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": true
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'dist',
      // our app modules
      'domain' : 'app/domain',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'primeng':                   'npm:primeng'            
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'                
      },
      // for our app modules
      domain : {
        main: 'index.js',  defaultExtension: 'js'
      },
      // other libraries
      rxjs: {
        defaultExtension: 'js'
      },
      primeng: {
          defaultExtension: 'js'
      }      
    }
  });
})(this);

It can't be done with tsc --watch but this issue on github provides some workarounds ... — derpirscher
– derpirscher, Commented Jun 27, 2024 at 14:30
not while in dev mode, when deploying add the --clean flag when building and it'll clean out the folder for your production build. — danielRICADO
– danielRICADO, Commented Jul 1, 2024 at 0:22

BKK · Accepted Answer · 2024-07-02 07:06:17Z

2

+125

When you delete .ts file from your app folder, the corresponding .js and .js.map files are not automatically deleted from the dist folder because TypeScript does not track file deletions by default. The TypeScript compiler (tsc) is responsible for converting TypeScript files into JavaScript, but it does not manage the deletion of generated files.

You can try to fix this using a script which should clean the dist folder first and then build the app.

Add the following script to your package.json file

{
  "scripts": {
    "clean": "rm -rf dist",
    "build": "npm run clean && tsc"
  }
}

Now, running npm run build will first clean the dist folder and then compile the TypeScript files.

answered Jul 2, 2024 at 7:06

BKK

4972 gold badges5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

narguis · Accepted Answer · 2024-07-01 15:25:26Z

Why is that?

When you compile your TS files, the TypeScript compiler automatically generates the compiled file (.js) and source map (.js.map) on your output directory. You can check for that in your tsconfig.json file, where you will find something like this:

  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./app",
    .
    //the rest of your options
    .
    }

However, this does not mean that these files are tracking each other, and that deleting one will automatically delete the other. The dist folder simply has the output of your compilation.

How to fix it?

To automate the file deletion, you will need an external script to watch your files. There are a few tools that can be used for that, but i believe one of the easiest ones is Gulp.

Here's a simple example of a script that does that:

const gulp = require('gulp');
const watch = require('gulp-watch');
const del = require('del');
const path = require('path');

const tsPath = 'app/**/*.ts';

gulp.task('watch', () => {
  watch(tsPath, { events: ['unlink'] }, (vinyl) => {
    const jsFile = path.resolve('dist', vinyl.relative.replace(/\.ts$/, '.js'));
    const mapFile = jsFile + '.map';

    del([jsFile, mapFile]);
  });
});

gulp.task('default', gulp.series('watch'));

After installing the dependencies, name the file gulpfile.js and run the script with

npx gulp

Collectives™ on Stack Overflow

Delete js files from dist folder when deleting ts files angular 2 project

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related