Is there a way to compile files in src using angular?

Question

I have the following structure:

apps
|-api
  |-src
    |-_migrations
    |-_seeds
      |-dev
      |-test
    |-app
    |-assets
    |-environments
    |-main.ts
  |-tsconfig.app.json
  |-tsconfig.json

I am using ng serve api to compile and serve api which is a NestJS backend. This belongs to a monorepo with an Angular frontend.

The migrations and seeders inside _migrations and _seeds are in TypeScript. To run them when serving the backend, I need to compile them to JavaScript and locate the compiled files into dist/apps/api.

I know I could compile the files with tsc before serving, or specify a webpack configuration file in angular.json, but I would like to keep it as simple as possible, and just try to use some configuration with ng.

I tried adding the paths in the tsconfig.app.json which is used in the angular.json.

// angular.json
"api": {
  "root": "apps/api",
  "sourceRoot": "apps/api/src",
  "projectType": "application",
  "prefix": "api",
  "schematics": {},
  "architect": {
    "build": {
      "builder": "@nrwl/node:build",
      "options": {
        "outputPath": "dist/apps/api",
        "main": "apps/api/src/main.ts",
        "tsConfig": "apps/api/tsconfig.app.json",
        "assets": ["apps/api/src/assets"]
      },
      "configurations": {
        "production": {
          "optimization": true,
          "extractLicenses": true,
          "inspect": false,
          "fileReplacements": [
            {
              "replace": "apps/api/src/environments/environment.ts",
              "with": "apps/api/src/environments/environment.prod.ts"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@nrwl/node:execute",
      "options": {
        "buildTarget": "api:build"
      }
    }
  }
}

// tsconfig.app.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": ["node"]
  },
  "exclude": ["**/*.spec.ts"],
  "include": ["**/*.ts"], // or ["**/*.ts", "src/_migrations/*.ts", "src/_seeds/**/*.ts"] without "files"
  "files": ["src/_migrations/*.ts", "src/_seeds/**/*.ts"]
}

Is there a way to compile all the files in _migrations and _seeds when running ng serve api and ng build api just switching some configuration or similar?
If not, which would be the simplest webpack configuration to achieve this?

M A Salman · Answer 1 · 2020-03-22T22:55:33.087

1

Ref: https://indepth.dev/configuring-typescript-compiler/

TS compiles recursively searches for all files in the root directory and sub-directories and compiles them.

Assuming that you are referencing them , they should compile
TS compiler will also compile files that are referenced inside any file from the files list. For example, if main.ts imports exports from a.ts, this file will also be compiled.

files - tell the compiler to only compile files inside files[] and leave everything else out.

{
  "compilerOptions": { ... },
  "files": [
    "main.ts",
    "router/b.ts"
  ]
}

Instead of listing each file manually if there are more no of files, we can use include option to specify directories using glob-like file patterns This will only compile the files in specified directories in include[] So in your case this will only compile files in migrations and seeds.

{
      "extends": "./tsconfig.json",
      "compilerOptions": {
        "outDir": "../../dist/out-tsc",
        "types": ["node"]
      },
      "exclude": ["**/*.spec.ts"],
      "include": ["src/_migrations/*.ts", "src/_seeds/**/*.ts"] 
  }

edited Mar 22 '20 at 22:55

answered Mar 22 '20 at 22:29

M A Salman

3,666
2
12
26

Thanks for the answer. I tried using `tsc` to compile and it did compile everything, but that's not what I'm looking for. I want to compile the files in `_migrations` and `_seeds` using the Angular builder with `ng serve` and `ng build`. – Oriol Miró Mar 22 '20 at 22:42
did you try checking if they are compiling after you enter ng-build command? – M A Salman Mar 22 '20 at 22:49
Yes, this is all the output: ``` Starting type checking service... Using 2 workers with 2048MB memory limit Hash: dfa3f3187e4fa63feb6d Built at: 03/22/2020 23:53:28 Entrypoint main = main.js main.js.map chunk {main} main.js, main.js.map (main) 13.9 KiB [entry] [rendered] ``` Only `main.ts` is compiled. – Oriol Miró Mar 22 '20 at 22:54
This may help you .https://stackoverflow.com/a/21425873/8029211 – M A Salman Mar 23 '20 at 00:48
Thanks. If I cannot find a better solution I might use this. – Oriol Miró Mar 23 '20 at 06:30

Is there a way to compile files in src using angular?

1 Answers1