Search code examples
angulartsconfig

Aliasing for tsconfig.app.json not working Angular 11


I'm having an issue getting aliasing to work since I've moved my app into an angular project

None of my imports work with my "@app" alias

mainApp
│   package.json
│   tsconfig.json
│   angular.json    
│
└───projects
    │  
    └───my-project (That I need the aliasing for)
        │  tsconfig.app.json
        │ 
        └───src
             │  
             └───app

When I use:

import { MyService } from '@app/shared/services/my.service';

I get errors

In my tsconfig.app.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "baseUrl": "./",
    "paths": {
      "@app/*": ["src/app/*"],
      "@env/*": ["environments/*"]
    },
  "include": [
    "src/**/*.d.ts"
  ]
}

I've tried

"@app/*": ["projects/my-project/src/app/*"],

I also updated my main tsconfig.json:

....
"baseUrl": "./",
  "paths": {
    "@app/*": ["src/app/*"],
    "@env/*": ["environments/*"]
  },
...

And then serve the project:

ng serve --project my-project

Solution

  • The issue was because my paths object was outside of the compilerOptions object, so:

     "compilerOptions": {
        "baseUrl": "./",
        "paths": {
          "@app/*": ["projects/my-/src/app/*"],
          "@env/*": ["environments/*"]
        },
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "es2020",
        "lib": [
          "es2018",
          "dom"
        ]
      }
    

    worked!!! Rather than

     "compilerOptions": {
    .......
    },"paths": {
          "@app/*": ["projects/my-project/src/app/*"],
          "@env/*": ["environments/*"]
        }