CODEWITHSUNDEEP
angulartypescriptnestjs
Oriol Miró
Oriol Miró

Reputation: 175

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

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?

Upvotes: 0

Views: 595

Answers (1)

M A Salman
M A Salman

Reputation: 3820

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

  1. 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

  2. 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"] 
  }

Upvotes: 1

Related Questions