Angular workspace - paths configuration for multiple projects

Question

I have two projects - app-x and app-z in an Angular workspace, and I am trying to shorten my import paths. I have come across several related posts here on SO, but couldn't find the solution I'm looking for my scenario.

I have a _core folder in both projects and I have imports like below -

import { ISomething } from 'projects/app-x/src/app/_core/infrastructure/interfaces';
// or relative equivqlent -
// import { ISomething } from '../../../_core/infrastructure/Interfaces';

import { ISomethingElse } from 'projects/app-z/src/app/_core/infrastructure/interfaces';
// or relative equivqlent -
// import { ISomethingElse } from '../../../_core/infrastructure/Interfaces';

I want to be able to write them as -

import { ISomething } from '@core/infrastructure/interfaces';

// and -
import { ISomethingElse } from '@core/infrastructure/interfaces';

in their respective project.

Following is how I have tried to configure the path for project app-x in the tsconfig.app.json file generated for this project -

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

But it doesn't work, VS Code shows red squiggles with -

Cannot find module '@core/infrastructure/Interfaces' or its corresponding type declarations.ts(2307)

This answer here suggests to add the path configuration to the tsconfig.json file at the workspace root, and not to the tsconfig.app.json file. I know that works, but then I cannot use @core in app-z project since it is pointing to the _core folder of app-x project.

That is why I'm trying to put the configuration to the respective tsconfig.app.json files. I tweaked the paths option with several values, and also added a baseUrl option (even though one is present in the root tsconfig.json) and tried several values in combination of different paths values. But failed.

Any help, tip/suggestion, would be appreciated. Thanks

Answer 1

• rename tsconfig.app.json to tsconfig.json.

• config tsConfig that under app-x in anuglar.json to this projects/app-x/tsconfig.json

It works for me.