Angular2 - relatif à la racine des importations

Réponse courte

Définir la compilerOption "moduleResolution" à "classic".

Réponse longue

Êtes-vous à l'aide de tsconfig.json? Je suppose que vous êtes. J'ai été à la recherche d'un moyen de faire des déclarations telles que import someModule = require ("../../../../someModule" en import someModule=require("src/path/to/someModule").
J'ai trouvé après des heures perdues que tsc peut utiliser différents algorithmes pour la résolution de module. Je suis l'aide de l'atome et il crée la tsconfig.json avec le compilerOption propriété moduleResolution ensemble de "node" et il utilise la merde (excuse my french) module de l'algorithme de résolution de nœud. Je viens de mettre "classique" et a commencé à travailler le moyen le plus évident.

** Mise à JOUR **

Il suffit de ne pas utiliser cette solution. Embrasser nœud module de l'algorithme de résolution.
La communauté repose sur elle, donc tout va briser si vous essayez de faire autrement. L'utilisation d'alias ou de certains autres fournis des solutions.

Un autre moyen serait d'avoir des fichiers qui la réexportation et de regrouper les fichiers avec un chemin plus court.

Vous pourriez avoir un des composants.ts dossier dans la racine de votre application avec.

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

Et de l'importer à partir de composants

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

Ce cependant est mieux adapté à l'exportation des modules afin que d'autres puissent les utiliser, de la façon de structurer un projet.

L'alternative serait de renoncer à l'utilisation de déclarations d'importation et de l'utilisation interne des modules à la place.

calendrier.ts

module Components {
    export class Calendar {}
}

Et vous serez en mesure de simplement l'utiliser dans un de vos fichiers dans vos projets de ce type.

new Components.Calendar();

Ou l'importer avec un alias.

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

Pour l'essentiel, dans Angular 6 vous pouvez commencer à la import de la haut ou bas.

Mes deux options

Ils sont disponibles avec une configuration par défaut généré par angular CLI

1. À partir du haut
   
   Je préfère de cette façon, si c'est plus proche de la racine de l'application

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

2. À partir du bas

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

Contexte:

Tapuscrit config: 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"
    ]
  }
}

Angulaire de la pile

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