hijas - rutas angular 6

Evitar rutas relativas en CLI angular

Question

Estoy usando la última CLI de Angular, y he creado una carpeta de componentes personalizados que es una colección de todos los componentes.

Por ejemplo, TextInputComponent tiene una clase TextInputConfiguration que se coloca dentro de src/components/configurations.ts , y en src/app/home/addnewuser/add.user.component.ts donde lo uso hay:

import {TextInputConfiguration} from "../../../components/configurations";

Esto está bien, pero a medida que mi aplicación se hace más grande y más profunda, aumenta el ../ , ¿cómo puedo manejar esto?

Anteriormente, para SystemJS, configuraba la ruta a través de system.config.js como a continuación:

System.config({
..
 map : {''ng_custom_widgets'':''components'' },
 packages : {''ng_custom_widgets'':{main:''configurations.ts'', defaultExtension: ''ts''},
)};

¿Cómo puedo producir lo mismo para el paquete web usando Angular CLI?

Answer 1

Gracias a la respuesta de jonrsharpe por apuntarme en la dirección correcta. Aunque, después de agregar las paths , como se define en la respuesta, todavía no pude hacerlo funcionar. Para cualquier otra persona que enfrente el mismo problema que yo en el futuro, esto es lo que hice para solucionar los problemas.

Tengo un módulo compartido y sus servicios están siendo utilizados en múltiples componentes, así que ...

tsconfig.json:

{
    "compilerOptions": {
        ...
        "baseUrl": ".", //had to add this too
        "paths": {
            "@shared/*": ["src/app/modules/shared/*"]
        }
    }
}

Después de esto, VS Code pudo resolver la import pero aún recibí el siguiente error del webpack durante la compilación.

Módulo no encontrado: Error: no se puede resolver

Para arreglar esto, tuve que agregar

1. baseUrl of tsconfig en webpack''s resolve.modules
2. paths of tsconfig en webpack''s resolve.alias

webpack.config.js:

resolve: {
  extensions: [''*'', ''.js'', ''.ts''],
  modules: [
    rootDir,
    path.join(rootDir, ''node_modules'')
  ],
  alias: {
    ''@shared'': ''src/app/modules/shared''
  }
},

component.ts:

import { FooService } from ''@shared/services/foo.service''
import { BarService } from ''@shared/services/bar.service''
import { BazService } from ''@shared/services/baz.service''

Para hacerlo aún más limpio, agregué un index.d.ts dentro de la carpeta services y index.d.ts todos mis servicios desde allí, así:

index.d.ts:

export * from ''./foo.service'';
export * from ''./bar.service'';
export * from ''./baz.service'';

y ahora dentro de cualquier componente:

import { FooService, BarService, BazService } from ''@shared/services'';

Answer 2

No estoy seguro por qué, pero cuando probé las otras respuestas en VS2017, pude compilar Angular sin errores, pero todavía estaba viendo errores en VS "No se puede encontrar el Módulo ...". Cuando configuro la baseUrl en "src" desde "." todos estaban felices.

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"
    ],
    "baseUrl": "src",                 // Main source directory same level as tsconfig
    "paths": {
      "app/*": [ "app/*" ],           // src/app
      "ui/*": [ "ui/*" ],             // src/ui       
      "services/*": [ "services/*" ], // src/services
      "assests/*": [ "assests/*" ],     // src/assests
      "models/*": [ "models/*" ]      // src/models
    },
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Luego para importar:

import { AppMenuComponent } from ''ui/app-menu/app-menu.component'';

Nota: Si Visual Studio todavía está generando errores, intente cerrar y volver a abrir el archivo o reiniciar Visual Studio para que reconozca las nuevas rutas.

Answer 3

Por encima de todo, la respuesta es correcta, pero después de luchar buscando en Internet y tratando de entender qué es exactamente el problema y probando una opción de solución de problemas diferente, llegué a conocer la baseUrl y la ruta de acceso cómo funcionan juntos.

Si usa baseUrl: "." como a continuación funciona en VScode pero no mientras compila

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["src/app/*"]
    }    
}

Según mi comprensión y mi aplicación en funcionamiento y revisado en código angular aio , sugiero usar como baseUrl: "src" como a continuación

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@myproject/*": ["app/*"],
      "testing/*": ["testing/*"]
    }    
}

Al tener url base como fuente (directorio src), el compilador resuelve los módulos de forma adecuada.

Espero que esto ayude a las personas a resolver este tipo de problema.

Answer 4

Según este comentario , puede agregar su fuente de aplicación a través de paths en tsconfig.json :

{
  "compilerOptions": {
    ...,  
    "baseUrl": ".",
    "paths": {
      ...,
      "@app/*": ["app/*"],
      "@components/*": ["components/*"]
    }
  }
}

Luego puede importar absolutamente desde la app/ o los components/ lugar de hacerlo en relación con el archivo actual:

import {TextInputConfiguration} from "@components/configurations";

Nota: baseUrl debe especificarse si las paths son.

Ver también

• https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping