angular - Hur man importerar modul från icke-relativa sökvägar i Visual Studio 2015

Jag arbetar på ett Angular 4-projekt med Gulp i Visual Studio 2015. Jag fick Visual Studio 2015 QuickStart härifrån.

  • tsc version: 2.5.2

Min projektstruktur:

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

items.ts

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

Jag vill använda icke-relativ sökväg när jag importerar allt inom min src-mapp, dvs:

items.component.ts

import { items } from 'items';

Detta är min tsconfig.json-fil (som ligger på samma nivå som 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/"
    ]
  }
}

Jag har försökt att lägga till detta i compilerOptions:

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

efter det:

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

Jag lade också till rootDirs men jag får fortfarande detta fel:

Can't find module 'items'

Svar #1

Först, se till att du har installerat TypeScript för Visual Studio 2015 - v2.5.2, efter det:

tsconfig.json:

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

användning:

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

Så, vad händer här:

* pekar på det faktiska namnet på vår fil, så i vårt fall, efter @models, finns det * som pekar på items, och items finns någonstans inuti angular/common/models/*.

Vi bör också lägga till detta i systemjs.config.js så att sökvägen kan lösas:

 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..
  });

Och en annan viktig sak här är att starta om Visual Studio

Jag har också försökt avlasta/ladda om projektet, men det hjälper inte.

Relaterade artiklar