angular2 (angular2-seed) 在导入时使用路径避免 ../../

Question

我正在使用 angular2-seed：https://github.com/mgechev/angular2-seed

如何创建一个变量来使用导入绝对链接而不是相对链接，像这样：

import { MyService } from '@shared/services/MyService';

代替：

import { MyService } from '../shared/services/MyService';

避免相对导入路径../../...

@angular 导入就是一个例子：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

它是如何定义的？我们可以为我们的共享文件夹做这样的事情吗？

Answer 1

@angular 是脚本库文件夹中的文件夹名称，@ 字符没有什么特别之处。

我猜想，为了根据需要导入模块，您应该在 systemjs.config.js 中将其定义为模块。

我目前使用的 systemjs.config.js 的一个例子是：

System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    map: {
        'app': 'app',
        'rxjs': 'libraries/rxjs',
        '@angular': 'libraries/@angular',
        'ng2-bootstrap': 'libraries/ng2-bootstrap/',
        'ng2-select': 'libraries/ng2-select',
        'moment': 'libraries/moment/moment.js'
    },
    packages: {
        'app': { main: 'main.ts', defaultExtension: 'ts'},
        'rxjs': { main: 'Rx.js' },
        '@angular/core': { main: 'index.js' },
        '@angular/common': { main: 'index.js' },
        '@angular/compiler': { main: 'index.js' },
        '@angular/router': { main: 'index.js' },
        '@angular/platform-browser': { main: 'index.js' },
        '@angular/platform-browser-dynamic': { main: 'index.js' },
        '@angular/http': { main: 'index.js' },
        'ng2-bootstrap': { 'defaultExtension': 'js' },
        'ng2-select': { main: 'ng2-select.js'}

    }
});