How to make an “alias” for a long path in angular-cli?

Question

I'm using the Angular CLI. How do I convert a path from:

import {AppConfig, AppConfigInterface} from '../../../app.config';

to something like:

import {AppConfig, AppConfigInterface} from 'root/app.config';

Answer 1

try this in tsconfig.json:

 { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ], "paths": { "@services/*": ["app/services/*"] // here! } } }

Answer 2

I found this question when tried to resolve scss . I found current approach will not work because of this issue

workaround is to add stylePreprocessorOptions to .angular-cli.json so it will resolve all styles within the directory

{
    "apps": [{
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
                "./app/global-styles"
            ]
        },
        ...
    }]
}

for server-side rendering you will need to add this for both ssr and main app build - otherwise you will get NodeInvocationException: Prerendering failed because of error: Error: Cannot find module 'C:\\Users\\...\\ClientApp\\dist-server\\main.bundle.js'

{
    "apps": [{
            ...
            "outDir": "dist",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        },
        {
            ...
            "name": "ssr",
            "outDir": "dist-server",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        }
    ]
}

Answer 3

I want to draw the attention that editing only the tsconfig.json will be effective in the code completion and building via the ts compiler. the Agular-CLI, however, can't recognize the defined address to the true paths as long as you do not define them, in addition, in the tsconfig.app.json . ng serve will show build error TS2307: Cannot find module '@...

Whereas, restricting definition into the latter will make the ts IntelliSense compiler show them as unrecognized paths

In short: define the paths in both tsconfig and tsconfig.app JSON files

Answer 4

angular cli 默认模块目录定义在 /angular-cli.json 中，如果您需要根目录，可以尝试使用 '/app.config'