Geek Answers Handbook

Angular2 how to set application root path independent of html base url

I am creating an angular2 application / widget that will be built into TYPO3 as a plugin that can be inserted into any content page. This means that it can end on different root paths, for example:

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

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

I am using a new router as described here: https://angular.io/docs/ts/latest/guide/router.html

+6
source share
5 answers

Actually there is a solution in angular docs, but it's pretty hard to find. You can set the base url in angular without using the <base> .
Thus, you just need to set the base url for the global JavaScript variable using liquid, and then provide it angular in the application module.

Liquid:

 <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

+11
source

The reason is because your web server is already processing the url and therefore it is not delegated to the Angular2 router. To overcome this, you must use a different LocationStrategy in Angular.

What you are looking for is called HashLocationStrategy to create routes like /page1/app/#/angular-controller/ , where /page1/app/ served from a web server and /angular-controller/ is the first argument of your logic Angular2 applications.

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

You can learn more about this in the Angular2 documentation (an example was also taken).

+1
source

I would advise baseURL using 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 added to / now and will work.

+1
source

In recent versions of angular, I get an error message, so instead I use the data attribute p>

 <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 {}
+1
source

Look at APP_BASE_HREF in this case, mainly in Angular2 and above, you can override the provider like this, this is an 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 this case, APP_BASE_HREF will be replaced by / my / app, so you can do this for each module separately ... This is true in the Angular application ...

See these pages in the Angular doc for more information:

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

0
source

More articles:


All Articles