Angular2 как установить корневой путь приложения независимо от html base url

Я создаю приложение/виджет angular2, который будет встроен в TYPO3 в качестве плагина, который можно вставить на любую страницу контента. Это означает, что он может в конечном итоге на различных корневых путей т.д .:Angular2 как установить корневой путь приложения независимо от html base url

/page1/app 
/page/subpage/subpage/whatever

Глобальная база URL (база HREF = ..) уже установленные TYPO3 и не может быть изменен. Как я могу дать угловой некоторый корневой префикс, чтобы он мог правильно строить маршруты?

Я использую новый маршрутизатор как описано здесь: https://angular.io/docs/ts/latest/guide/router.html

источник

2016-10-12 jdachtera

На самом деле в угловых документах есть решение, но его довольно сложно найти. Можно установить базовый url в угловой без использования тега <base>.
Итак, вам просто нужно установить базовый url для глобальной переменной JavaScript, используя жидкость, а затем предоставить ее угловому в модуле приложения.

Fluid:

<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

источник

2016-10-20 11:16:26 jdachtera

Спасибо за сообщение этого ответа – CBA

Причина заключается в том, что ваш веб-сервер обрабатывает URL-адрес уже и, таким образом, это не делегировано маршрутизации Angular2. Чтобы преодолеть это, вы должны использовать другой 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 о том, что (пример был взят оттуда, а).

источник

2016-10-12 08:45:04

Примеры основаны на Angular 2.0, если вы все еще находитесь на каком-то RC-уровне, сначала подумайте о том, чтобы перейти на окончательный. Например, между RC4 и финалом многое изменилось. –

Спасибо за ваш ответ, но я действительно хотел бы использовать «настоящие» URL-адреса. На самом деле я нашел решение, которое работает со стратегией по умолчанию и опубликует его здесь. – jdachtera

Я бы посоветовал не использовать атрибут конфигурации baseURL. Он немного устарел и приводит к некоторым проблемам, таким как ваш.

Вы можете установить

config.absRefPrefix =/

Все ссылки будут предваряться/сейчас и будет работать.

источник

2016-10-12 21:55:03

С TYPO3 7.6 можно использовать 'config.absRefPrefix = auto', который автоматически настраивает путь соответствия. Однако это само по себе не решает проблему с маршрутизацией Angular2. –

Спасибо, но я не думаю, что это решило бы мою проблему. Также эта установка TYPO3 довольно старая, и я не могу изменить эту настройку. – jdachtera

Посмотрите на 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 будет заменен/моим/приложением, так что вы можете сделать это для каждого модуля в отдельности ... Это просто применить в угловом применении ...

Для получения дополнительной информации, смотрите на этих страницах углового документа:

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

источник

2017-04-08 03:35:25 Alireza

В последних версиях Углового я получаю ошибку о переменном, поэтому я использую данных- атрибут вместо

<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 {}

источник

2018-02-22 09:46:31 user1169849

Angular2 как установить корневой путь приложения независимо от html base url

ответ

Смежные вопросы