SVG sprites angular 2

Question

Right inside of body tag I have svg sprites

<svg version="1.1" width="0" height="0" style="position: absolute;">
   <symbol id="icon-mail" viewBox="0 0 15 13">
     ...
   </symbol>
</svg>

And I use it inside angular 2 app like this

<svg class="icon"><use xlink:href="#icon-mail" /></svg>

If I load main page for example localhost:9000 sprites are rendered, but if I fully load other url localhost:9000/users sprites are not rendered.

What is the best way using sprites in angular 2 app?

score 1 · Accepted Answer · edited May 23 '17 at 12:32

1

Use APP_BASE_HREF instead of <base> element.

bootstrap(AppComponent, [{provide: APP_BASE_HREF, useValue: '/'}])

See also Angular 2.0 router not working on reloading the browser

edited May 23 '17 at 12:32

Community

1
1

answered Jun 26 '16 at 17:12

Günter Zöchbauer

623,577
216
2,003
1,567

Can you explain a little bit more, please... how to do this in router v3? – István Békési Jul 04 '16 at 23:07
Thanks a lot Günter, works perfectly fine! However it's still a bit fuzzy, what is the connection of routing and svg... – István Békési Jul 05 '16 at 09:07
Glas to hear. Thanks for the feedback. – Günter Zöchbauer Jul 05 '16 at 09:08
1

There is a better explanation of why this technique works here https://stacksandfoundations.com/2016/06/22/svgs-funciri-angular2-and-the-base-tag/ – gethyn1 Aug 05 '16 at 15:38

score 1 · Answer 2 · answered Nov 01 '16 at 14:38

In case anyone finds this answer after the 2.0 release, the new way to do this is: add import at the top of the file with other imports

import { APP_BASE_HREF } from "@angular/common";

add APP_BASE_HREF in with providers array in @NgModule

@NgModule({
  declarations: [
    AppComponent,
    // your code here
  ],
  imports: [
   // your code here
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: "/"
    },
    // your code here
  ],
  bootstrap: [ AppComponent ]
})

delete <base href="/"> from index.html

SVG sprites angular 2

2 Answers2