我正在构建一个 angular2 应用程序/小部件，它将作为插件嵌入到 TYPO3 中，可以插入到任何内容页面上。这意味着它可能以不同的根路径结束，例如：
/page1/app
/page/subpage/subpage/whatever
全局基本 url (base href=..) 已由 TYPO3 设置，无法更改。我怎样才能给 angular 某种根前缀，以便它可以正确地建立它的路线？
我正在使用此处记录的新路由器：https://angular.io/docs/ts/latest/guide/router.html
【问题讨论】：
标签： angular typo3 angular2-router3
在最新版本的 Angular 中，我收到关于变量的错误，所以我使用数据属性来代替
<body data-base-url="whatever/"> ...
角度：
import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
providers: [{provide: APP_BASE_HREF, useValue:documnent.body.dataset.baseUrl}]
})
class AppModule {}
【讨论】：
看本例中的APP_BASE_HREF，基本上在Angular2及以上，你可以像这样覆盖provider，这是Angular.io中展示这种情况的例子：
import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}
所以在这种情况下，APP_BASE_HREF 将被 /my/app 替换，因此您可以为每个模块单独执行此操作...这仅适用于 Angular 应用程序...
有关更多信息，请查看 Angular 文档上的这些页面：
https://angular.io/docs/ts/latest/api/common/index/PathLocationStrategy-class.html
https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
【讨论】：
实际上，角度文档中有一个解决方案，但很难找到。可以在不使用<base> 标签的情况下以角度设置基本网址。
因此，您只需使用流体将基本 url 设置为全局 JavaScript 变量，然后将其提供给应用模块中的 Angular。
流体：
<script>
var app_base_url = '<f:uri.page pageUid="{currentPageUid}" />';
</script>
角度：
declare var app_base_url;
import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
providers: [{provide: APP_BASE_HREF, useValue:app_base_url}]
})
class AppModule {}
https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
【讨论】：
--base-href，例如：ng build --base-href=/myapp
我建议不要使用 baseURL 配置属性。它有点过时了，会导致一些问题，比如你的。
你可以设置
config.absRefPrefix = /
现在所有链接都将以 / 开头，并且也可以使用。
【讨论】：
config.absRefPrefix = auto 自动配置一致的路径。但是，仅此一项并不能解决 Angular2 路由的问题。
原因是您的网络服务器已经在处理 URL，因此它没有委托给 Angular2 路由。要克服这个问题，您必须在 Angular 中使用不同的 LocationStrategy。
您要查找的内容称为 HashLocationStrategy 以创建类似 /page1/app/#/angular-controller/ 的路由，其中 /page1/app/ 由网络服务器提供服务，/angular-controller/ 是 Angular2 应用程序逻辑的第一个参数。
调整你的模块声明（例如app.module.ts）
import {Component, NgModule} from '@angular/core';
import {
LocationStrategy,
HashLocationStrategy
} from '@angular/common';
@NgModule({
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}
在Angular2 documentation 中找到更多详细信息（示例也取自那里）。
【讨论】：