CODEWITHSUNDEEP
angulartypo3angular2-router3
jdachtera
jdachtera

Reputation: 759

Angular2 how to set app root path independently from html base url

I'm building an angular2 application/widget that will be embedded into TYPO3 as a plugin that can be inserted on any content page. This means it could end up at different root paths e.g.:

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

The global base url (base href=..) is already set by TYPO3 and can't be changed. How can I give angular some kind of root prefix so that it can build up its routes correctly?

I'm using the new router as documented here: https://angular.io/docs/ts/latest/guide/router.html

Upvotes: 11

Views: 37948

Answers (5)

Steve Maris
Steve Maris

Reputation: 1006

In the latest versions of angular I get an error about the variable, so I use a data-attribute instead 

<body data-base-url="whatever/"> ...

Angular:

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

Upvotes: 2

Alireza
Alireza

Reputation: 104740

Look at APP_BASE_HREF in this case, basically in Angular2 and above, you can override the provider like this, this is the example in Angular.io showing this case: 

import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}

So in that case the APP_BASE_HREF will be replaced by /my/app, so you can do it for each module separately...This just apply within Angular application...

For more info, looking at these pages on Angular doc:

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

Upvotes: 1

jdachtera
jdachtera

Reputation: 759

Actually there is a solution in the angular docs but it's pretty hard to find. It's possible to set the base url in angular without using a <base> tag.
So you just have to set the base url to a global JavaScript variable using fluid and then provide it to angular in the app module.

Fluid:

<script>
   var app_base_url = '<f:uri.page pageUid="{currentPageUid}" />';
</script>

Angular:

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

Upvotes: 18

Dimitri Lavren&#252;k
Dimitri Lavren&#252;k

Reputation: 4879

I would advice not to use the baseURL config attribute. It is a bit outdated and leads to some problems, like yours.

You can set

config.absRefPrefix = /

All links will be prepended with / now and will also work.

Upvotes: 2

Oliver Hader
Oliver Hader

Reputation: 4202

The reason is that your web-server is handling the URL already and thus it's not delegated to the Angular2 routing. To overcome this, you have to use a different LocationStrategy in Angular.

What you're looking for is called HashLocationStrategy to create routes like /page1/app/#/angular-controller/ where /page1/app/ is served from the web-server and /angular-controller/ is the first argument to your Angular2 application logic.

Adjust your module declaration (e.g. app.module.ts)

import {Component, NgModule} from '@angular/core';
import {
  LocationStrategy,
  HashLocationStrategy
} from '@angular/common';
@NgModule({
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}

Find more details in the Angular2 documentation about that (the example was taken from there as well).

Upvotes: 1

Related Questions