22

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. Commented May 11, 2021 at 5:46
  • 1
    Did you fix this? I'm running into the same issue... 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? 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

28

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

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

1 Comment

This works but weird how it pops up randomly. typescriptlang.org/tsconfig#Projects_6255

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.