Angular-cli: Assets not correctly adjusting with deploy-url parameter on the build

[ignaciolarranaga]

Versions

Angular CLI: 1.7.2
Node: 9.4.0
OS: darwin x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

• Create an empty project ng new example and install the dependencies npm install.
• Add on sample images to assets (whatever image) cp sample.png src/assets and modify app.components.html adding the image:

...
<h2>Here are some links to help you start: </h2>
<img src="/assets/sample.png">
<ul>
...

• Build the application changing the path to '/y' ng build --deploy-url=/y --base-href=/y -op=/tmp/y
• Start a server on tmp folder (e.g. http-server -p 4200 /tmp)
• Now open the browser and you will see the problem

Repo with the code for easier reproduction: https://github.com/ignaciolarranaga/9835-issue

Observed behavior

The img src is not prepended with /y as expected (or the folder you want to):

Desired behavior

The image src to be prepended with the /y:

<img _ngcontent-c0="" src="/y/assets/sample.png">

[ignaciolarranaga]

It seems to be the same as #6666 (just discovered)

[rhythmnewt]

Got hit by this as well.

Cliff's notes:
Looks like angular team does not apply --deploy-url to html src content. The two options are to either set the url prefix in environment variable and apply it in your template (create component variable, assign env variable to component variable, use component variable in template), or to move your src declaration to CSS/LESS where the url will get updated.

[clydin]

A browser only applies the base href to relative assets. The baseHref option is generally the more appropriate option to use (vs. the deployUrl option). Changing the <img src="/assets/sample.png"> to <img src="assets/sample.png"> should allow the browser to apply the configured base href value.

Note also that based on the HTML spec., the base HREF value should end with a / to indicate the last path segment is a directory and not a file.

[rhythmnewt]

In some cases you need to host the app itself in one place (a sub-directory or an MVC area in my case) but the assets are elsewhere (like CDN). In these cases both baseHref and deployUrl options have to be provided, and just like OP said <img src="/assets/sample.png"> will not get rewritten to <img src="/y/assets/sample.png"> by deployUrl.

[clydin]

If you are referring to the need to set the routing root for the application, then you can do that with the APP_BASE_HREF token while still using the base href option for the application build. The deployUrl option is not needed in that scenario.

Documentation for the token can be found here: https://angular.io/api/common/APP_BASE_HREF

[filipesilva]

This issue is the same as https://github.com/angular/angular-cli/issues/6666. Please follow that issue for updates.

[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._}