Angular 2 assets not resolved after changing base href

Question

I have developed an angular 2 app and deployed it to a server that is running behind something like

http://localhost:8080/platform/owa/myapp/index.html

The platform is a Java application that has support for Open Web Apps via their Open Web App(OWA) module. So all apps deployed on the platform are always accessed from /platform/owa/app_name/index.html.

So when I first deployed my Angular 2 app, I had a lot of 404 errors, I looked at the console and noticed that all JavaScript files are being resolved from root. For example http://localhost:8080/script.js instead of http://localhost:8080/platform/owa/app_name/script.js. To fix this I had to set the base-href dynamically like this

document.write('<base href="' + document.location + '" />');

With that change I stopped getting 404 error messages and the pages could display fine. But an issue pops up in pages that need to access images in the /assets/ folder. The images don't display. My logo could not display and when I checked the console I noticed that angular is still trying to resolve the assets folder with respect to root like

localhost:8080/assets/logo.png and that causes 404 and my logo can't display. I'm also using tinymce editor in my project and it expects some files to be present in the /assets/ folder but since it can't access the assets folder too the tinymce editor does not work.

Update Based on the comment below, I realized I left one important detail. To access my logo I used I set the source to /assets/logo.png. Maybe I can change that to use the path of the application since it's under my control but how do I make tinymce resolve the assets folder. It's a plugin I downloaded and it expects some files to be in the assets folder.

https://www.tinymce.com/docs/integrations/angular2/

How you do you access to assets? What is the path from your app/stylesheets? — Vega
For my logo I accessed it via by doing this /assets/logo.png. I can always modify that to reflect the part since the code is under my control. But tinymce is not under my control. It needs to access some files from the assets folder. How do I fix that? — Stylishcoder

Stylishcoder Stylishcoder · Accepted Answer · 2017-07-29T16:09:37

From @Vega comment, I realized the question I should have been asking is how to change default value for tinymce skin_url? Which would have given a more successful search. I googled and saw a doc and it says all that I need to do is specify a custom skin_url when creating the editor like below

tinymce.init({
    ...
    skin_url: '/css/mytinymceskin'
});

Thanks

Angular 2 assets not resolved after changing base href

1 Answers