使用绝对 URL 导入 Angular2 组件答案

【问题标题】：Importing Angular2 Components with Absolute URLs使用绝对 URL 导入 Angular2 组件
【发布时间】：2016-06-23 23:52:15
【问题描述】：

以下是示例项目的目录结构：

app
|-components
| |-hero-detail
| | |-hero-detail.component.ts (HeroDetailComponent)
|-services
| |-hero.service.ts (HeroService)

我想在HeroDetailComponent 中使用HeroService。

目前我正在使用以下语句将HeroService 导入HeroDetailComponent：

import {HeroService} from '../../services/hero.service'

但我不喜欢使用相对 URL 来引用 HeroService。相反，我希望它像这样绝对：

import {HeroService} from 'app/services/hero.service'

我将如何做到这一点？

【问题讨论】：

标签： angular angular2-directives angular2-services

【解决方案1】：

注意 Angular 包是如何在不需要相对路径的情况下导入的？例如：import {Component} from '@angular/core';。您可以对您的服务做同样的事情！

如果您使用的设置类似于 Angular 网站 (https://angular.io/guide/quickstart) 上的快速入门，第 4 步让您将以下内容放入您的 index.html：

您可以使用此脚本来配置 SystemJS，并使用非相对路径告诉它在哪里找到您的服务。转到https://angular.io/guide/quickstart 并选择 SystemJS 选项卡以查看快速入门文件的配置方式。您可以将自定义映射添加到map 数组。例如，添加 'myservices': 'app/services' 会使数组看起来像：

var map = {
    'app':      'app',
    '@angular':     'node_modules/@angular',
    'rxjs':         'node_modules/rxjs',
    'myservices':   'app/services'
};

请注意，map 中的路径不是 typescript 文件的路径，而是 typescript 编译器放置 JS 文件的路径。此设置应允许您随后使用Import {CustomService} from 'myservices/custom.service' 导入位于custom.service.ts 文件中的类CustomService

如果导入失败，请返回 SystemJS 配置并确保在 packages 数组中，您已注册 app 并将 defaultExtension 设置为 js。以下摘自快速入门指南：

var packages = {
    'app':  { main: 'main.js',  defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
};

【讨论】：

【解决方案2】：

您可以使用以下内容：

import {HeroService} from '/app/services/hero.service'

假设 app 是您的 Web 服务器的根文件夹。

【讨论】：