Angular-cli: Compiling app with --base-href does not prefix image src attribute value with --base-href value

[reloaded]

Versions

<!--
Output from: `ng --version`.
If nothing, output from: `node --version` and `npm --version`.
  Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
-->

ng --version
@angular/cli: 1.4.3
node: 8.9.1
os: win32 x64

npm --version
5.5.1

Repro steps

• Create a new Angular CLI project.
• Configure the base URL to be <base href="/" /> in the index.html
• Create a new component transition-indicator at app/widgets/ (the resulting directory tree should be app/widgets/transition-indicator/transition-indicator.component.{ts,html,scss,spec.ts}.
• Update transition-indicator.component.html and use an <img /> where the src is relative and stored in assets/. Mine is <img src="../../../assets/images/loading/fading-lines-loader-32x32.gif" alt="Loading..." />.
• Create an image (i'm using a loading GIF from https://icons8.com/preloaders/) at app/assets/images/loading/fading-lines-loader-32x32.gif
• Update app.module so it declares TransitionIndicatorComponent.
• Create another component called home (the resulting directory tree should be app/home/home.component.{ts,html,scss,spec.ts}).
• Reference <app-transition-indicator></app-transition-indicator> from HomeComponent's view template.
• Create a route in app.route that loads HomeComponent.
• Build the application with ng build --environment=dev --base-href /angular-app-2/

Let's assume your application is at C:\angular-app-2.

Configure your local IIS / Nginx / Apache to host a new virtual website at http://localhost/angular-app-2.

• Point this new virtual host document root to C:\angular-app-2\dist
• Restart IIS / Nginx / Apache.
• Load http://localhost/angular-app-2 in the browser. Notice all assets loaded correctly in the browser developer tools (network tab), except the image that was referenced by the transition-indicator component.

Here's a ZIP with the project that can reproduce this. https://www.dropbox.com/s/euoyxria5lzfbrk/angular-app-2%28angular%20cli%20bug%29.zip?dl=0

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

The Angular CLI compiler is not updating the transition-indicator component's <img/> tag src attribute to request the loading GIF from /angular-app-2/assets/images/loading/fading-lines-loader-32x32.gif and instead the src value is /assets/images/loading/fading-lines-loader-32x32.gif.

This results in a HTTP request to http://localhost/assets/images/loading/fading-lines-loader-32x32.gif instead of http://localhost/angular-app-2/assets/images/loading/fading-lines-loader-32x32.gif.

Desired behavior

I would expect the loading image to be loaded from /angular-app-2/assets/* because the Angular CLI build command sets the <base /> element href to /angular-app-2/.

Mention any other details that might be useful (optional)

The purpose of this build style is to host multiple apps under the same sub-domain (one sub domain for each environment like sprint staging, release staging, production staging, etc), but each app using their own unique sub-path. In this case my sub-domain is for all applications that are in the current Agile Sprint iteration (sprint-stage.mydomain.com).

I have two Angular applications:

• sprint-stage.mydomain.com/ <-- this is the first Angular app and it's hosted at the root path.
• sprint-stage.mydomain.com/angular-app-2/ <-- this is the second Angular app. My CI/CD build server executes ng build --environment=dev --base-href /angular-app-2/ so the app will run on the sub-path /angular-app-2/.
• sprint-stage.mydomain.com/api/v1/microservice-1
• sprint-stage.mydomain.com/api/v1/microservice-2
• sprint-stage.mydomain.com/api/v1/microservice-3

I'm using a custom environment file for my stage-sprint environment so normally the command is ng build --environment=stage-sprint --base-href /angular-app-2/; but for simplicity of this issue I replaced it with --environment=dev.

[filipesilva]

Heya, thanks for the detailed issue and reproduction! This is a known limitation where assets in HTML are not processed. You can read more about it https://github.com/angular/angular-cli/issues/6666. Workaround for now is to load that image in a CSS file.

[clydin]

Relative asset URL's present within a component's HTML template will be affected by the base HREF (this is in direct contrast to the deployUrl option). However, the asset's URL must be relative in the context of the deployed location not the project's source location.

[joelswanson123]

This is wrong, I think.

<img src="../../../assets/images/loading/fading-lines-loader-32x32.gif" alt="Loading..." />

Folder assets will be in the root of your deployed location. Therefore the path should be:

< img src="./assets/images/loading/fading-lines-loader-32x32.gif" alt="Loading..." />

At least that worked for me.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}