You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add flexibility to modify the base-href of the application according to need. Define the base href of choice at the time of image creation.
Which Areas Would Be Affected?
the Dockerfile and app-config.service.ts file
Why Is the Feature Desired?
When we try to deploy the edc-datadashboard to a Kubernetes cluster and implement an ingress route to access the service, it encounters the following issue:
The index file loads correctly but, it cannot load the asset files (css, js, images) properly. As a result, the angular app cannot be loaded properly, and the browser shows a blank page.
For example, in the following ingress file we have defined the ingress route /company-dashboard/ for our dashboard application.
Now, if we try to access the application from our browser (for instance, at "http://localhost/company-dashboard/"), then it encounters the above-mentioned problem.
This happens because we are accessing our application from a non-root path ('/company-dashboard/'), but the angular application is trying to load the assets from the root path ('/').
This can easily be solved by modifying the base-href in index.html file. If we change the <base href="/"> to <base href="/company-dashboard/">, the application will use this path to load the script files.
However, directly modifying the index.html file is not a good option as it compromises our flexibility for defining the paths.
Solution Proposal
One solution for this is to include the following command in the Dockerfile.
RUN npm run build -- --base-href=$BASE_PATH
We can take the $BASE_PATH as input during image creation. It will change the <base href=…> of the application according to our choice.
Also, when trying to fetch any asset from within the code, the URL to the asset should be adapted accordingly.
For example, in app-config.service.ts file we are using the url 'assets/config/app.config.json' to get the config files.
In case, we are using a base-href different than root (‘/’) then this will fail to get the files. We can modify this and prepare the url by adding the base-href with it. We can utilize Angular LocationStrategy, prepareExternalUrl in this scenario.
Feature Request
Add flexibility to modify the base-href of the application according to need. Define the base href of choice at the time of image creation.
Which Areas Would Be Affected?
the
Dockerfile
andapp-config.service.ts
fileWhy Is the Feature Desired?
When we try to deploy the
edc-datadashboard
to a Kubernetes cluster and implement an ingress route to access the service, it encounters the following issue:The index file loads correctly but, it cannot load the asset files (css, js, images) properly. As a result, the angular app cannot be loaded properly, and the browser shows a blank page.
For example, in the following ingress file we have defined the ingress route
/company-dashboard/
for our dashboard application.Now, if we try to access the application from our browser (for instance, at "http://localhost/company-dashboard/"), then it encounters the above-mentioned problem.
This happens because we are accessing our application from a
non-root path ('/company-dashboard/')
, but the angular application is trying to load the assets from theroot path ('/')
.This can easily be solved by modifying the base-href in index.html file. If we change the
<base href="/">
to<base href="/company-dashboard/">
, the application will use this path to load the script files.However, directly modifying the index.html file is not a good option as it compromises our flexibility for defining the paths.
Solution Proposal
One solution for this is to include the following command in the Dockerfile.
RUN npm run build -- --base-href=$BASE_PATH
We can take the
$BASE_PATH
as input during image creation. It will change the<base href=…>
of the application according to our choice.Also, when trying to fetch any asset from within the code, the URL to the asset should be adapted accordingly.
For example, in
app-config.service.ts
file we are using the url'assets/config/app.config.json'
to get the config files.In case, we are using a base-href different than root (‘/’) then this will fail to get the files. We can modify this and prepare the url by adding the base-href with it. We can utilize Angular
LocationStrategy
,prepareExternalUrl
in this scenario.The text was updated successfully, but these errors were encountered: