Question

我有这样的组件

@Component({
    moduleId:__moduleName,
    selector:"awesome-component",
    templateUrl:"awesome.component.html",
    styleUrls:["awesome.component.css"]
})
export class AwesomeComponent {}

我使用Systemjs构建器捆绑它，当应用程序部署在根路径上时一切正常，例如如果应用程序是从http://localhost运行的。

当应用程序在子路径下运行时，它不起作用，例如http://localhost/awesome-app。这产生了大量的404，因为对组件的html和css文件的请求是对根进行的，例如http://localhost/awesome-component.html而不是http://localhost/awesome-app/awesome-component.html。我已将基本href设置为awesome-app，例如<base href="/awesome-app/">

有没有办法引导angular将请求发送到部署app的子路径而不是root？

Answer 1

我想即使我认为这是一个非常常见的情况，但很多开发人员都没有遇到过这个问题。在寻找配置angular / systemjs的选项几天之后，我最终动态地从站点的根生成模板和样式URL的相对路径，如下所示

   function appendToBase(path: string): string {
        return getBase() + path;
    }

    function getBase(): string {
        let baseElement = document.getElementsByTagName("base")[0];
        if (baseElement && baseElement.href) {
            var pathFragments = baseElement.href.split("/");
            if (pathFragments.length > 3) {
                pathFragments.splice(0, 3);
                return pathFragments.join("/");
            }
        }
        return "./";
    }

并更改了组件元数据，如下所示

@Component({
    selector:"awesome-component",
    templateUrl:appendToBase("awesome.component.html"),
    styleUrls:[appendToBase("awesome.component.css")]
})
export class AwesomeComponent {}

Answer 2

当我同时使用自定义基本href路径时，我遇到了类似的问题：

<base href="/something-1/">

...并设置组件的moduleId：

@Component({
    moduleId: "something-2",
    selector:"my-component",
    ...
})

如果未分配组件的moduleId，则组件路径将使用指定的基本路径正确解析。

我认为这是一个错误。

在子路径上部署的应用程序上的Angular 2 Component相对路径

2 个答案: