Angular2如何独立于html基本url设置应用程序根路径
我正在构建一个angular2应用程序/小部件，它将作为插件嵌入TYPO3，可以插入任何内容页面。这意味着它可能会以不同的根路径结束，例如：Angular2如何独立于html基本url设置应用程序根路径,angular,typo3,angular2-router3,Angular,Typo3,Angular2 Router3,我正在构建一个angular2应用程序/小部件，它将作为插件嵌入TYPO3，可以插入任何内容页面。这意味着它可能会以不同的根路径结束，例如： /page1/app /page/subpage/subpage/whatever 全局基本url（base href=..）已由TYPO3设置，无法更改。如何给angular提供某种根前缀，以便它能够正确地建立其路由 我使用的新路由器如下所述：原因是您的web服务器已经在处理URL，因此它没有委托给Angular2路由。要克服这一点，您必须在Angul
/page1/app
/page/subpage/subpage/whatever
我使用的新路由器如下所述：原因是您的web服务器已经在处理URL，因此它没有委托给Angular2路由。要克服这一点，您必须在Angular中使用不同的
定位策略
您正在寻找的是名为HashLocationStrategy
的路由，以创建类似/page1/app/#/angular controller/
的路由，其中/page1/app/
由web服务器提供，而/angular controller/
是Angular2应用程序逻辑的第一个参数
调整您的模块声明（例如，app.module.ts
）
请在中查找有关该属性的更多详细信息（示例也取自此处）。我建议不要使用baseURL
config属性。它有点过时，会导致一些问题，比如你的问题
你可以设置
config.absRefPrefix = /
所有链接都将以/now开头，并且也将起作用。实际上，angular文档中有一个解决方案，但很难找到。可以在不使用
标记的情况下以角度设置基本url。
因此，您只需使用fluid将基本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 {}
看看APP_BASE_HREF在这种情况下，基本上是在Angular2及以上版本中，您可以像这样覆盖提供程序，这是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 application
有关更多信息，请查看Angular doc上的以下页面：
在angular的最新版本中，我得到了一个关于变量的错误，因此我使用了数据属性
<body data-base-url="whatever/"> ...
例子是基于角度2，如果你仍然在一些RC级别，考虑升级到最终的第一个。例如，在RC4和final之间有很多变化。谢谢你的回答，但我真的很想使用“真实”的URL。实际上，我找到了一个使用默认策略的解决方案，并将其发布到这里。由于TYPO3 7.6，因此可以使用自动配置一致路径的config.absRefPrefix=auto
。但是，单凭这一点并不能解决Angular2路由的问题。谢谢，但我认为这不能解决我的问题。此外，此TYPO3安装非常旧，我无法更改此设置。感谢您发布此回答。此外，在构建时使用key--base href
可能更合适，例如：ng build--base href=/myapp
<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 {}