How to make an “alias” for a long path in angular-cli?
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
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"
]
},
...
}
]
}
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!
}
}
}