Comment importer un module à partir de chemins non relatifs dans Visual Studio 2015

Question

Je travaille sur un projet angulaire 4 en utilisant gulp dans Visual Studio 2015. J'ai obtenu le Visual Studio 2015 QuickStart de here.

• version tsc: 2.5.2

Ma structure du projet:

src 
└──angular 
    └──common 
      └──models 
       └──items.ts 
    └──ui 
     └──components 
       └──items.component.ts 

items.ts

export module items { 
    export const listOfItems = [1,2,3]; 
} 

Je veux utiliser le chemin non relatif lorsque importer tout dans mon dossier src, à savoir:

items.component.ts

import { items } from 'items'; 

Ceci est mon fichier tsconfig.json (qui est sur le même niveau que src):

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ "es2015", "dom" ], 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "typeRoots": [ 
     "node_modules/@types/" 
    ] 
    } 
} 

Ici, j'ai essayé d'ajouter ceci dans le compilerOptions:

"baseUrl": "." //it doesn't help. 

après:

"baseUrl": ".", 
    "paths": { 
     "*": [ 
     "*", 
     "src/agnular/*" // still nothing. 
     ] 
} 

J'ai aussi ajouté rootDirs mais je reçois toujours cette erreur:

Cannot find module 'items' 

Answer 1

Tout d'abord, assurez-vous que vous avez installé TypeScript for Visual Studio 2015 - v2.5.2, après:

tsconfig.json:

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "baseUrl": "./src", 
    "paths": { 
    "@models/*": [ "angular/common/models/*" ] 
    } 
    //.. 
    } 
} 

utilisation:

import { items } from '@models/items'; 

Alors, qu'est-ce qui se passe ici:

* pointe vers le nom réel de notre dossier, donc dans notre cas après @models il y a * qui pointe vers items, et items est quelque part à l'intérieur angular/common/models/*.

De plus, il faut ajouter cela en systemjs.config.js afin que le chemin peut être résolu:

System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/', 
     "@models/*": ["rootDist/angular/common/models/*"] 
         ^
         where you keep your files, for example dist/ 
    } 
    // other things.. 
    }); 

Et une autre chose importante ici est de redémarrer le studio visuel

J'ai aussi essayé décharger/recharger le projet, mais cela n'aide pas.