He visto buenas prácticas en Angular para importar algunas cosas que están embebidas en otras carpetas.
Tengo esta estructura en mi aplicación
y he añadido el shorthand en tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"paths": {
"@components/*": ["src/app/components/*"],
"@views/*": ["src/app/views/*"]
},
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
}
}
Cuando intento importar desde el shorthand VSCode si me lo marca
Pero cuando termino de seleccionar esa instrucción Intellisense me deja de ayudar. De hecho cuando importo por ejemplo sky-header.module
me avienta lo siguiente
import { SkyHeaderModule } from '@components/sky-header/sky-header.module';
Cannot find module '@components/sky-header/sky-header.module' or its corresponding type declarations.ts
Aclaro que el archivo si existe.
import { SkyHeaderModule } from '../../components/sky-header/sky-header.module';
Así si funciona
Estas son las versiones que uso actualmente
- Angular CLI: 10.0.8
- Node: 12.18.0
- OS: linux x64
- Typescript: 4.1.3
¿Qué me está faltando?
"@components/*": ["app/components/*"],
y reiniciar tu IDE?