github页面上Angular2应用程序中的路径问题答案

【问题标题】：Path issue in Angular2 app on github pagesgithub页面上Angular2应用程序中的路径问题
【发布时间】：2016-12-28 17:39:11
【问题描述】：

我是 Angular2 的新手，打算在 github 页面上设置一个小型 Angular2 应用程序（目前是 helloworld）用于启动。

我通过angular-cli 创建了ng2-lite，托管在site。部署由angular-cli 提供。它部署到gh-pages 分支进行展示。

最近我发现了除angular-cli 之外的另一种方式。我用类似的代码从头开始创建了ng2-raw，但没有任何部署操作，托管在site

但是我在创建ng2-raw 时遇到了一些问题。调试后，通过相对路径（与ts在同一路径下）找不到css或html，所以我修改了路径使其工作。

请查看我的两个仓库中的不同代码：

github.com/MoYummy/ng2-lite/blob/master/src/app/hello.component.ts

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

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent {
    name: string = 'World';
}

github.com/MoYummy/ng2-raw/blob/gh-pages/helloworld/app/hello.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'hello',
    templateUrl: './app/hello.component.html',
    styleUrls: ['./app/hello.component.css']
})
export class HelloComponent {
    name: string = 'ng2';
}

为什么我必须更新这些路径？如果将来代码结构变得复杂，或者我尝试将一个组件移动到子文件夹怎么办？

部署 Angular2 应用的两种方式有什么区别？

【问题讨论】：

标签： angular github-pages

【解决方案1】：

在咨询了这个repo的作者后，他告诉我他的repo使用systemjs来加载js文件。

他的网站是为了简单的演示，所以不建议以这种方式部署一个精简版的 ng2 应用程序。相反angular-cli 更好。

我想在ng-raw停止进一步探索。

【讨论】：