CODEWITHSUNDEEP
svgangular
Rakhat
Rakhat

Reputation: 4942

SVG sprites angular 2

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?

Upvotes: 2

Views: 1621

Answers (2)

caraclarke
caraclarke

Reputation: 410

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

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

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

Upvotes: 1

Related Questions