Angular2 – importaciones relativas raíz

Marina, miembro de nuestro staff, nos hizo el favor de redactar esta crónica porque controla muy bien dicho tema.

Solución:

Responder

A partir de TypeScript 2.0, puede establecer las propiedades de tsconfig.json baseUrl de la siguiente manera:

{
  "compilerOptions": 
    "baseUrl": "app"

Luego, puede usar la forma deseada de importar componentes, como:

import  Calendar  from 'components/calendar';

Apéndice

Resolución de rutas de respaldo

Una consideración importante es que especificar baseUrl La opción hace que el compilador de TypeScript:

1. Busque una ruta con respecto a baseUrl
2. En la resolución fallida (módulo no encontrado), busque una ruta con respecto a moduleResolution opción

SistemaJS

Dado que SystemJS se usa mucho en la etapa de desarrollo de Angular, asegúrese de configurar también en consecuencia systemjs.config.jspara que resuelva las rutas correctamente.

---

Fuente y más detalles: https://github.com/Microsoft/TypeScript/issues/5039

ACTUALIZAR

Simplemente no use esta solución. Adopte el algoritmo de resolución del módulo de nodo. La comunidad se basa en él, por lo que todo se derrumbará si intentas hacer lo contrario. Utilice alias o alguna de las otras soluciones proporcionadas.

Respuesta corta
Hay una manera, pero no debes hacerlo. Establecer la opción del compilador "moduleResolution" para "classic".

Respuesta larga

Estas usando tsconfig.json? Supongo que lo eres. He estado buscando una forma de hacer afirmaciones como import someModule = require ("../../../../someModule" dentro import someModule=require("src/path/to/someModule"). Descubrí después de horas desperdiciadas que tsc puede usar diferentes algoritmos para la resolución del módulo. Estoy usando atom y crea el tsconfig.json con la propiedad compilerOption moduleResolution ajustado a "node" y utiliza el algoritmo de resolución de módulo de mierda (disculpe mi francés) de node. Simplemente puse “clásico” y comencé a trabajar de la manera obvia.

Básicamente, en Angular 6 puedes empezar el import desde el cima o fondo.

mis dos opciones

Están disponibles con la configuración predeterminada generada por angular CLI

1. Desde la parte superior
   Prefiero de esta manera si está más cerca de la raíz de la aplicación.

   import DateService from "src/app/shared-services/context/date.service";

2. Desde el fondo

   import DateService from "../../../../../../../shared-services/context/date.service";

Contexto:

Configuración de mecanografiado: tsconfig.json

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  

pila de angular

ng -v

Angular CLI: 6.0.8
Node: 8.9.0
OS: win32 x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8

@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Si te gustó nuestro trabajo, puedes dejar una crónica acerca de qué le añadirías a esta crónica.

---

---

Utiliza Nuestro Buscador