19

I'm developing an Angular App with SSR, but I'm getting the following error when building with npm run build:ssr:

ERROR in [...]/tsconfig.json
[tsl] ERROR
      TS6306: Referenced project '[...]/tsconfig.app.json' must have setting "composite": true.

ERROR in [...]/tsconfig.json
[tsl] ERROR
      TS6306: Referenced project '[...]/tsconfig.server.json' must have setting "composite": true.

I then tried to add this key to the tsconfig.app.json and tsconfig.server.json, but I'm not sure where to add this key:

tsconfig.app.json (and tsconfig.server.json accordingly)

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [],
        "composite": true   // <-- generates the next error (see below)
    },
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ],
    "exclude": [
        "src/test.ts",
        "src/**/*.spec.ts"
    ],
    "composite": true   // <-- no effect
}

After adding the key as mentioned above, while building, the following error occurred for each typescript-file:

ERROR in error TS6304: Composite projects may not disable declaration emit.

( So this cannot be the way... )

A few things to know:

  • Angular v 10.0.5
  • Added SSR-support via @nguniversal/express-engine
  • ng serve is working fine

package.json:

{
  "name": "cg",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --localize",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "xi18n": "ng xi18n --outFile=de.xlf --outputPath=src/i18n",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod && ng run cg:server:production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.8",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "~10.0.8",
    "@angular/compiler": "~10.0.8",
    "@angular/core": "~10.0.8",
    "@angular/elements": "^10.0.8",
    "@angular/forms": "~10.0.8",
    "@angular/google-maps": "^9.2.4",
    "@angular/localize": "^10.0.8",
    "@angular/platform-browser": "~10.0.8",
    "@angular/platform-browser-dynamic": "~10.0.8",
    "@angular/platform-server": "^10.0.8",
    "@angular/router": "~10.0.8",
    "@angular/service-worker": "~10.0.8",
    "@ngrx/effects": "^10.0.0",
    "@ngrx/store": "^10.0.0",
    "@nguniversal/builders": "^10.0.2",
    "@nguniversal/express-engine": "^10.0.2",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@types/express": "^4.17.7",
    "@types/lodash": "^4.14.155",
    "document-register-element": "^1.7.2",
    "express": "^4.17.1",
    "http-server": "^0.12.3",
    "lodash.merge": "^4.6.2",
    "lodash.pick": "^4.4.0",
    "rxjs": "~6.6.2",
    "smoothscroll-polyfill": "^0.4.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.5",
    "@angular/cli": "~10.0.5",
    "@angular/compiler-cli": "~10.0.8",
    "@angular/language-service": "~10.0.8",
    "@locl/cli": "0.0.1-beta.9",
    "@types/node": "^14.0.13",
    "fs-extra": "^9.0.1",
    "git-describe": "^4.0.4",
    "ts-loader": "^5.2.0",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.0",
    "typescript": "^3.9.7",
    "webpack-cli": "^3.1.0"
  }
}

angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "cg": {
            "i18n": {
                "sourceLocale": "de",
                "locales": {
                    "fr": "src/i18n/fr.xlf"
                }
            },
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "inlineStyle": true,
                    "style": "scss",
                    "skipTests": true
                },
                "@schematics/angular:class": {
                    "skipTests": true
                },
                "@schematics/angular:directive": {
                    "skipTests": true
                },
                "@schematics/angular:guard": {
                    "skipTests": true
                },
                "@schematics/angular:module": {
                    "skipTests": true
                },
                "@schematics/angular:pipe": {
                    "skipTests": true
                },
                "@schematics/angular:service": {
                    "skipTests": true
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "cg",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/browser",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "localize": [
                            "de"
                        ],
                        "aot": true,
                        "assets": [
                            {
                                "glob": "**/*",
                                "input": "src/assets/",
                                "output": "/assets/"
                            },
                            {
                                "glob": ".htaccess",
                                "input": "src/",
                                "output": "/../"
                            },
                            "src/manifest.webmanifest"
                        ],
                        "styles": [
                            "src/sass/main.scss"
                        ],
                        "scripts": []
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb",
                                    "maximumError": "10kb"
                                }
                            ],
                            "serviceWorker": true,
                            "ngswConfigPath": "ngsw-config.json"
                        },
                        "fr": {
                            "localize": [
                                "fr"
                            ]
                        },
                        "it": {
                            "localize": [
                                "it"
                            ]
                        },
                        "en": {
                            "localize": [
                                "en"
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "cg:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "cg:build:production"
                        },
                        "fr": {
                            "browserTarget": "cg:build:fr"
                        },
                        "it": {
                            "browserTarget": "cg:build:it"
                        },
                        "en": {
                            "browserTarget": "cg:build:en"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "cg:build"
                    }
                },
                "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                        "outputPath": "dist/server",
                        "main": "src/main.server.ts",
                        "tsConfig": "tsconfig.server.json"
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ]
                        }
                    }
                }
            }
        }
    },
    "defaultProject": "cg"
}

Since I'm new to SSR, I'm a little bit lost. Does anybody have an idea? Thanks in advance!

8
  • 1
    any luck with this? I am facing the same problem now! Commented May 8, 2021 at 19:12
  • Unfortunately not. I decided against SSR and postponed the problem... My next step would be to test this with Angular 11.
    – uruk
    Commented May 11, 2021 at 5:46
  • 1
    Did you fix this? I'm running into the same issue...
    – Ryan
    Commented Jun 2, 2021 at 20:19
  • 1
    Were you guys able to fix it using the tsconfig.server.json I provided, or the other config files in the project?
    – Pieterjan
    Commented Jun 4, 2021 at 6:28
  • 1
    If anyone new is finding this, if you are in VS Code: run the command Develop: Reload Window. VS code just gets confused Commented Aug 12, 2022 at 18:59

1 Answer 1

24

Step 1. Add composite: true in tsconfig.app.json inside compilerOptions like below

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "composite": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.app.json 's image

Step 2. Restart vscode

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.