How to create relative url imports in Typescript and Angular2

Question

Hi I am trying to understand how typescript know wheat @angular is and how it know to import it. I know that from a Javascript level this can be configured to tell SystemJS where to look but from a Typescript level I can understand where this is achieved.

My current application has the following structure:

When loading native angular 2 components we have the following import url:

import {Component} from '@angular/core';

From this somehow Typescript knows that it can find the components in libs/@angular.

I know that at the javascript level this configuration is done like this:

(function (global) {
// map tells the System loader where to look for things
var map = {
    'app': 'app', // 'dist',
    '@angular': 'libs/@angular',
    'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
    'rxjs': 'libs/rxjs',
    '@commercify': 'app'
};

.....

var config = {
    map: map,
};
System.config(config);

})(this);

As it can bee seen I have created @commercify': 'app' that should point to app but this does not tell typescript anything. How can I configure typescript so that it knows where @commercify is found?

At the moment I am getting a cannot find module in Visual Studio for this import:

import { CategoriesComponent } from '@commercify/catalog/categories/categories.component';

The functioning url looks like this:

'import { CategoriesComponent } from '../../catalog/categories/categories.component';'

I would like to avoid adding ../../ and directly point to the root folder

Answer 1

实际上你想要的是＆＃34;非亲属＆＃34; 导入。

在你的tsconfig.json中添加以下内容，如果需要重新启动VS Code

"module": "systemjs",
"moduleResolution": "node"

模块分辨率如何在Typescript中起作用

https://www.typescriptlang.org/docs/handbook/module-resolution.html