Search code examples
angularbuildmulti-project

Angular 7: Multi-projects app, prevent the build of a project to compile the style of another project

This issue will be hard to explain I'm afraid. I'll do my best to explain it.

I have 2 projects in my Angular app: "roldos" and "shadra"

When I run a prod build for a project: ng build --prod --project="roldos" I'm getting this error

enter image description here

What's odd here is that it's trying to compile app.component.scss which is in the "shadra" project. What's even odder is that the "variables.scss" file it's importing comes from Roldos and not Shadra (both have a variables.scss file)

Even if I completely remove the shadra project from my angular.json file I still get this error which makes me think that the build is just looking for EVERY scss file it can find and tries to compile it...

Here's my angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "shadra": {
      "root": "projects/shadra/",
      "sourceRoot": "projects/shadra/src",
      "projectType": "application",
      "prefix": "sha",
      "schematics": {
        "@schematics/angular:component": {
          "prefix": "sha",
          "styleext": "css"
        },
        "@schematics/angular:directive": {
          "prefix": "sha"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/shadra",
            "index": "projects/shadra/src/index.html",
            "main": "projects/shadra/src/main.ts",
            "polyfills": "projects/shadra/src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "assets": [
              "projects/shadra/src/favicon.ico",
              "projects/shadra/src/assets"
            ],
            "styles": [
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/angular2-draggable/css/resizable.min.css",
              "projects/shadra/src/style/app.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "projects/shadra/src/style",
                "shared/style"
              ]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "shared/environments/environment.ts",
                  "with": "shared/environments/environment.prod.ts"
                }
              ],
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "shadra:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "shadra:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "shadra:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.json",
              "projects/shadra/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "roldos": {
      "root": "projects/roldos/",
      "sourceRoot": "projects/roldos/src",
      "projectType": "application",
      "prefix": "rol",
      "schematics": {
        "@schematics/angular:component": {
          "prefix": "rol",
          "styleext": "css"
        },
        "@schematics/angular:directive": {
          "prefix": "rol"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/roldos",
            "index": "projects/roldos/src/index.html",
            "main": "projects/roldos/src/main.ts",
            "polyfills": "projects/roldos/src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "assets": [
              "projects/roldos/src/favicon.ico",
              "projects/roldos/src/assets"
            ],
            "styles": [
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/angular2-draggable/css/resizable.min.css",
              "projects/roldos/src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "projects/roldos/src/style",
                "shared/style"
              ]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "shared/environments/environment.ts",
                  "with": "shared/environments/environment.prod.ts"
                }
              ],
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "roldos:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "roldos:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "roldos:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.json",
              "projects/roldos/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "shadra"
}

So my question is:

"How can I configure my angular app so that the build doesn't try to compile SCSS files from other projects"

Solution

  • The problem was caused by the tsConfig property in angular.json

    I thought it wasn't necessary to have a specific tsconfig.app.json in every projects if I didn't need to override it but apparently it is. So I've added a tsconfig.app.json file in my projects folder

    {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

    and I've updated the angular.json file and now it works.

    {
  "tsConfig": "projects/roldos/tsconfig.app.json"
}