--deploy-url will have no effect on the HTML

[yordis]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ x ] feature request

Versions.

@angular/cli: 1.0.1
node: 8.0.0
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.6
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.3

Repro steps.

Related to #4517 (comment)

The log given by the failure.

Desired functionality.

The CLI transform the HTML as well

Mention any other details that might be useful.

I am using S3 on AWS this is kind of required for me unless I used CloudFront, I think.

[vukasin-nikodijevic]

+1 for this

[yordis]

@Brocco could we do something like i18n for the URL on the HTML, because I can see the big issues on it (no everything have to be href or src) but we could use the same strategy in the worse scenario.

[filipesilva]

This is something I'd like to have if we can find a safe way to do it. For reference, there's some more context in #4517 (comment).

[rajdeep26]

Any update here?

[lqclester]

how to fix it?

[RSginer]

+1 fix it please!

i have an app with different base href and the sass is compiling correctly the routes but not in html link, src, etc

[leichenau]

it's not only inconvenient, the code won't work.

[snow-swallow]

I'm using ng5 now. My workaround is to add a prefix {{baseHref}} of each src in HTML template.

<img src="{{baseHref}}/assets/sample.png">

@RSginer

[RSginer]

@timelyxyz thank you so much! this is a possible solution but you need to create a local variable in each component or it is a global variable?

[timbru31]

@timelyxyz this does not work for AOT :(

[christophedemey]

This is horrible.

[100cm]

pipe this plz， 我的手都快加累死了。

[davidmcdougs]

Best solution for now is to use the background-image css property. The cli will add the base href attribute to this.

Also you could define the url in your environments.ts file and import it into your components.

[gazsiadam]

Workaround until Angular takes the effort to fix, is to add a property to your environment variable, like deployUrl: '/xyz/', then for all 'assets' objects, you can add the following logic in html:

<img src="{{getEnv().deployUrl}}assets/img/logo.svg">

For i18n, I used a custom loader.

[csutorasr]

I went through the code of the Ivy rendering engine, compilers and CLI.

The main problem is that the url(...) replacement in the css files are done by webpack. The Html template is parsed by Angular compiler.

I think an AssetUrlVisitor could solve this problem. It should add the route as string concat. That would make img[src] attribute work without any binding. If it has binding the url should be added before the interpolation runs.

The visitor should look for img with src and make the changes to it. Probably there are more scenarios for example src-set for the future. Extension with the visitor would be easy. (Ivy is really great!)

The new url config should have a new name, so it could be introduced without breaking changes. E. g. assetUrl. Then in later versions could be merged with deployUrl.

The policy how to change the links could be the same as the algorithm made by webpack, for the best consistency.

[JonathanWylie]

@clydin is it possible to configure the APP_BASE_HREF from the angular.json file?
I would like to configure the two different baseHref and appBaseHref in the same place and from configuration.

[thescientist13]

Is there any way to decouple APP_BASE_HREF provider from --base-href somehow?

That way for the browser, it could respect the HTML tag for all relative static assets, lazy-loaded chunks, etc

<base href="http://www.somecdn.com/"/>

But for Angular router, configuring the provider to have it respect a different "root" so routing doesn't break, based on what is in the user's URL bar ex:

providers: [
  {
      provide: APP_BASE_HREF, useValue: `/` // or even `${window.location.origin}/`
  }
]

In this way, we can use a CDN for all our lazy chunks assets, but not breaking routing, which would be URL / hostname based.

---

So just curious to know from the maintainer's point of view, if there is a way forward through some sort of enhancement to Angular and / or the CLI (whether it's this idea or something completely different)?

If so, I would be happy to take a look into implementing such a feature, opening an issue for discussion, and contributing. Just want to make sure there is a path forward and would then be happy to put some time into working on it.

Thanks!

[vultix]

Here's my workaround:

declare const __webpack_public_path__: string;
export function deployUrl(url: string): string {
  let publicPath = __webpack_public_path__;
  if (!publicPath.endsWith('/')) {
    publicPath += '/';
  }
  if (url.startsWith('/')) {
    url = url.slice(1);
  }

  return `${publicPath}${url}`;
}

In component:

@Component({...})
export class MyComponent {
  deployUrl = deployurl;
}

In template:

<img [src]="deployUrl('assets/image.png')"/>

[dgp1130]

As there is an awful lot of confusion around --deploy-url I think this is a good candidate to review and update documentation. Specifically this could include:

1. What use cases --deploy-url is intended for (and what it is not).
2. For several common use cases (such as CDN's), what configuration recipe (whether using --deploy-url or other means) makes the most sense and does what an application wants.

/cc @aikidave for visibility.

[andreElrico]

Copied from my STACKOVERFLOW answer. Its a very annoying problem: Here is how I solve it:

When your app is for e.g. hosted under
www.domain.de/hehe.

1. in angular.json add "deployUrl": "./",
2. in src/index.html inside <head> add/update <base href="./">
3. throughout your app you will use relative paths for assets and whatnot: <img src="./assets/img/pictureOfMyCrazyWife.png">
4. just run ng build or ng build --prod conveniently.

Hope this helps and saves some grey hair, couse it only looks good on George Clooney.

[CaselIT]

@andreElrico that does not seem to work if you are using routing
If you try to navigate from the base path, let's say /base-path/ to /base-path/router-path then try to reload the page or copy the link to another tab, the application will fail to load since it tries to use /base-path/router-path as base path

[andreElrico]

@CaselIT have not tried it with routing.

[mderazon]

The problem of not being to add cache-busting hash to images used in Angular templates is a production issue many are dealing with.

I understand that this is out of scope for the CLI team at the moment, but I have seen some workarounds. I will try to summarize what i've seen so far.

If you want image cache-busting / fingerprinting you have these options:

1. Only load images from css using relative path - This works fine, but some cases you want an <img> tag in template.
2. This comment in this thread. Basically require the image in your component through Webpack and inject into the template. There are other, perhaps more elegant solutions like this one but same concept. However, these were sort-of recommended against by @filipesilva in this comment.
3. Do some string search-and-replace hack post build. I don't think anybody considers this option...
4. I've seen a comment by @mgechev about using ngx-build-plus for this purpose. Not sure how.

I think it will be very helpful for the community if we had a "blessed" workaround for this from the cli team and get their view on this. Ideally added to the official cookbook/recipe/docs

Thank you

[oliverdavidt]

@filipesilva I want to second @mderazon idea about having a "blessed" solution for this. It seems like the community is wasting a lot of time on something that is pretty common. I'd be willing to help with a solution, but I think we are looking to you guys for a little direction as to what you think should be done or info if you are already working on something.

[HDMuller]

I don't know if it is the same issue, because I use command --base-href of Angular.
But if it helps someone, I'm happy.

I used the \ before the assets like this:
<img [src]="'\assets/images/image.png'"/>

And this worked perfectly for me.

[jorgeso]

This is really annoying. The --base-href parameter is available by injecting APP_BASE_HREF. I don't understand why --deploy-url can't be accessed the same way.

[BruneXX]

Also guys, someone tried this with angular-universal? If I use:
--deploy-url /myPath/ I'm receiving these erros in node...

Unable to locate stylesheet: /var/www/html/dist/browser/**myPath**/styles.16d89a3cd69123f2ba9c.css

Also the url set to the assets seems to be wrong..

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

[Rishanthakumar]

According to #6666 (comment) in this thread. I tried building the app using:

ng build --c=qa --base-href https://your-assets-url/

and then in the app module to change the router base href:

providers: [ { provide: APP_BASE_HREF, useValue: '${window.location.origin}/' (replace single quotes ) } ]

This works fine for my scenario where I am serving the index.html in a different url and the assets from a cdn.
Correct me if I am doing anything wrong.

[maciejgunia]

Also guys, someone tried this with angular-universal? If I use:
--deploy-url /myPath/ I'm receiving these erros in node...

Unable to locate stylesheet: /var/www/html/dist/browser/**myPath**/styles.16d89a3cd69123f2ba9c.css

Also the url set to the assets seems to be wrong..

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Did you manage to solve it? I have the same thing, it doesn't result in any app misbehaviour but it does bug me a bit.

[angular-automatic-lock-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.}