Angular-cli: using deploy-url and base-href yields in wrong assets path

[schmitch]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.1.1
node: 8.1.1
os: darwin x64

Repro steps.

create a new application and use a --base-href=/ui/ and --deploy-url=/ui/ while having a stylesheet of:

.login-body {
  background: rgba(0, 0, 0, 0) url("/assets/images/bg.png") no-repeat scroll 0 0 / cover;
}

The output will then be .login-body{background:transparent url(/ui/ui/assets/images/bg.png) no-repeat scroll 0 0/cover} in both, build --prod --deploy-url=/ui/ --base-href=/ui/ and on serve --deploy-url=/ui/ --base-href=/ui/

Mention any other details that might be useful.

Actually if I remove one of the things either base-href and deploy-url it would work, however if I omit base-href routing will actually re-initialize the application everytime I open a [href] or ng-href link (hybrid app). if I omit deploy-url i will get 404 well I might make it work without deploy-url since I proxy the ng serve in my application and I can strip the path, but I still think that setting both shouldn't end in a assets path of /ui/ui/.
What's even more strange is that the $icon-font-path and $fa-font-path of font-awesome and boostrap are working correctly and don't double add a /ui/

Basically I think that without --deploy-url I can fully use my application since angular-cli omits relative url's so the script path is ui/.... However it would've been great to use absolute-urls for everything which I can enforce with --deploy-url.

[clydin]

In regards to deployment, using --base-href=/ui/ and --deploy-url=/ui/ is the equivalent of just --base-href=/ui/. There's no reason to use deploy-url if they are the same value (with the current development caveat that ng serve doesn't yet account for --base-href; PR #6320 will correct that).

Regardless, you are correct that the asset path should not be /ui/ui/. This is indeed a bug.

[roger-borges]

I just had the exact problem as described by @schmitch. Instead of url("/assets/images/bg.png"), try to use the ../ so something like url("../../../assets/images/bg.png") depending on however many directories up the assets folder is.

In response to @clydin: I don't experience what you describe with --base-href and --deploy-url. If I just use --base-href by itself then none of my js resources get loaded up because they're trying to be loaded from / instead of /ui/

[kgonia]

I have same problem as @schmitch
--base-href /something
ads /something to scripts paths in index.html and assets urls in scss
--deploy-url /angular
add /something to base href in index.html, paths in components html, and assets url in scss

So I end with wrong urls in css

[filipesilva]

https://github.com/angular/angular-cli/pull/6320 may have fixed this case, it's release in v1.4.0-rc.2. Can you try it please?

[kgonia]

In my case I used it with ng build not ng serve

[Anirudh-Konduri]

@filipesilva i am still having this issue with ng build --base-href /test/ --deploy-url /test/. When i deploy to the server, assets path is falling back to root of the server and failing lo load.

I followed the reference #6320 you have given, still having the same issue

[filipesilva]

@clydin can you take a look please?

[boyski33]

We are having the same problem with --base-href and --deploy-url prepending the service prefix twice on image URL's in the /assets folder. 😢

[alvipeo]

Guys, this is important for us. You built an app, you deploy it and you can't show it to a client because of this! The app seem completely broken to a client!

[manbearwiz]

Changing to relative paths fixed this for me when doing a prod build with a specified --base-href. For example changing:

<img src="/assets/logo.svg">

to

<img src="./assets/logo.svg">

[smasherprog]

Is this fixed for images in html?
I am using --bh=/spa --deploy-url=/dist/
I have tried all of below

And the image tag remains the same with nothing added to the start. Is this correct?

[AntonisFK]

<img src="./assets/logo.svg">
Worked for me thx @manbearwiz

[keego]

I was having the same problem with getting my css

/* src/app/app.component.css */
.app {
  background: url('../assets/background.jpg');
}

to correctly resolve when hosted as a GitHub Project Page (keego.github.io/angular-test-app).

I was using ng build --base-href /angular-test-app --deploy-url /angular-test-app with different asset paths:

• '../assets/background.jpg'
• './assets/background.jpg'
• 'assets/background.jpg'
• '/assets/background.jpg'

All of which produced weird results:

• https://keego.github.io/background.966932addf40da9dccfa.jpg
• https://keego.github.io/angular-test-appbackground.966932addf40da9dccfa.jpg
• https://keego.github.io/angular-test-app/angular-test-app/background.966932addf40da9dccfa.jpg

instead of the desired:

• https://keego.github.io/angular-test-app/background.966932addf40da9dccfa.jpg

I finally got the path to resolve correctly by including trailing slashes to the paths in the ng build command:
ng build --base-href /angular-test-app/ --deploy-url /angular-test-app/

combined with the original asset path:
'../assets/background.jpg'

[findustrollet]

Is this is still not solved? I'm using angular cli 6.2.3, ng build with the base-href. For example ng build --c prod --base-href /app/. Problem is IIS tries to look for assets in the the root folder not in the app folder specified. It should be here /myserver/app/assets/. But it tries to find stuff in /myserver/assets/. So it obviously fails. This is more than just a little annoying, Google??

[aaron-old]

Still having the same issue, deploying the assets over iis with a deploy script;
ng build -c local
the local configuration goes to my site name + /dist/dev
All my JS Assets and fonts are loading correctly, not the images

My current workaround is to use the site base url and create a file on the root of the project.
My current environment is ASP.NET 4.x and Angular 6
with the images served from the project root, I am able to do this;
<img src="/{base-href}/images/{your-image-here.jpg}/>

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