typescript - tutorial - install angular 2

Angular2-importaciones relativas de la raíz

Question

Tengo un problema con las importaciones en angular2 / typescript. Me gustaría usar importaciones con alguna raíz como ''app / components / calendar'', en cambio, la única forma en que puedo usar es algo como:

//app/views/order/order-view.ts
import {Calendar} from ''../../components/calendar 

donde el calendario se define como:

//app/components/calendar.ts
export class Calendar {
}

y, obviamente, esto empeora cuanto más baja es la jerarquía, más profunda es ''../../ ..'' pero sigue siendo muy mala y quebradiza. ¿Hay alguna manera de usar rutas relativas a la raíz del proyecto?

Estoy trabajando en Visual Studio, y las importaciones relativas parecen ser lo único que hace que VS sea capaz de reconocer estas importaciones.y

Answer 1

Responder

A partir de TypeScript 2.0, puede establecer tsconfig.json properties baseUrl siguiente manera:

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

Luego, puede utilizar la forma que desee para importar componentes, como:

import { Calendar } from ''components/calendar'';

Apéndice

Resolución de caminos de retroceso

Una consideración importante es que la especificación de la opción baseUrl hace que el compilador TypeScript:

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

Sistema js

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

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

Answer 2

Básicamente, en Angular 6 puede iniciar la import desde la parte superior o inferior .

Mis dos opciones

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

1. Desde la parte superior
   Prefiero 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 TypeScript: 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

Answer 3

No necesita cambiar nada de la configuración predeterminada de un nuevo proyecto Angular generado desde Angular-CLI. No estoy seguro acerca de las versiones anteriores, pero a partir de la versión 6, sé que esto es cierto. Para realizar una importación relativa a la raíz, use src/app/ al comienzo de sus importaciones como:

import { VideoPlayerComponent } from ''src/app/pages/shared/video-player/video-player.component'';

Esta es una solución mejor que la answer de @ MarekDulowski, ya que las importaciones relativas a la raíz pueden ser fácilmente identificables y fáciles de encontrar / buscar al consultar src/app/ .

Aprendí esto de la solución aquí: https://.com/a/51582699/1253298

Answer 4

Tl; dr: ahora deberías poder usar src como raíz y "solo funcionará".

Con Angular 2.0, cuando ejecuta ng new my-proj , crea automáticamente un archivo my-proj/src/tsconfig.app.json . Este archivo contiene una línea baseUrl :

"baseUrl": "./",

Por lo tanto, no debería tener que cambiar nada de su configuración y puede abarcar todas sus importaciones enraizadas en src . Asumiendo que la estructura de tu proyecto se ve algo como:

my-proj/
  README.md
  src/
    app/
      sidebar/
        sidebar.component.ts
      user.service.ts

puedes importar tus archivos con:

import { Sidebar } from ''app/sidebar/sidebar.component'';
import { UserService } from ''app/user.service'';

Editado para agregar: Sublime no lee src/tsconfig.json , sin embargo, solo lee el tsconfig.json de nivel superior (consulte este problema ). Si obtiene Cannot find module ''app/...'' errores del Cannot find module ''app/...'' en sus líneas de importación en Sublime, puede agregar:

"baseUrl": "./src",

a su archivo tsconfig.json de nivel superior.

Answer 5

Una forma sería tener archivos que se vuelvan a exportar y agrupar los archivos con una ruta más corta.

Podría tener una carpeta components.ts en la raíz de su aplicación con.

export {Calendar} from ''./components/calendar''
export {*} from ''./components/map''

Y importándolo desde componentes.

import {Calendar, Map} from ''../../components'';

Sin embargo, esto será más adecuado para exportar módulos para que otros puedan usarlos, que la forma de estructurar un proyecto.

La alternativa sería renunciar al uso de declaraciones de importación y utilizar módulos internos en su lugar.

calendar.ts

module Components {
    export class Calendar {}
}

Y podrá usarlo en cualquiera de los archivos de sus proyectos como este.

new Components.Calendar();

O importarlo con un alias.

import Calendar = Components.Calendar;
new Calendar();

Answer 6

Respuesta corta

Establezca el compilerOption "moduleResolution" en "classic" .

Respuesta larga

¿Estás utilizando tsconfig.json ? Supongo que eres. He estado buscando una manera de hacer declaraciones como import someModule = require ("../../../../someModule" en import someModule=require("src/path/to/someModule") . encontré después de varias horas 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 configurada en "node" y usa el algoritmo de resolución del módulo shitty (excuse my french) de nodo. Simplemente puse "clásico" y comencé a trabajar de manera obvia.

** ACTUALIZACIÓN **

Simplemente no uses esta solución. Abrazar el algoritmo de resolución del módulo de nodo . La comunidad descansa en ella, así que todo se romperá si tratas de hacer lo contrario. Use alias o alguna de las otras soluciones provistas.