Adding compiler options to a stackblitz project

Question

I want to add a file tsconfig.json consisting of the following code, to a stackblitz sample here https://stackblitz.com/edit/angular-1tbbrn. please anyone did this anyone did this??

  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "strict": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Answer 1

If you look at an Angular project you create on your own file system, you will find an entry in angular.json like this:

{
  "tsConfig": "tsconfig.app.json"
}

When you look in tsconfig.app.json, you will see something like this:

{
  "extends": "./tsconfig.json", // <------ inheritance
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

So you can see that tsconfig.app.json inherits from tsconfig.json via the extends attribute.

You have added tsconfig.json to your project, but not app.config.json, so it is not being referenced by angular.json.

Adding a new file tsconfig.app.json that inherits tsconfig.json should work.