It's not display svg with angular,typescript

[liam-nirvana]

I used it in my app.module.ts like this: import { registerElement } from "nativescript-angular/element-registry"; registerElement("SvgImage", () => require("nativescript-svg").SVGImage); and here is html: <SvgImage src="~/static/avatar_default_chat.svg"></SvgImage> Is any place I did wrong? by the way , my tns --version is 5.0 Would u like tell me how to fix it, thanks very much.

[geraldapeoples]

I have the same issue on Android, tns --version 5.0.3.

[ihor-lev]

@liam-nirvana: This works for me. No need to have a registerElement function.

app.module.ts

import {NativeScriptSvgModule} from '@teammaestro/nativescript-svg/angular';

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptSvgModule
    ]
})
export class AppModule {
}

app.component.html

<SVGImage [src]="~/images/icon.svg"></SVGImage>

And please make sure that your SVG files are copied to platforms folder by webpack. I mentioned this here in a different issue.

And, yes, I'm using a fork from @teammaestro aka @bradmartin because it seems to be more stable for me.

[Tyler-V]

@ikysylevych did you encounter a parse exception? I used both the original package and tried the fork, got the same thing using the sample svgs (nativescript.svg, spider.svg, etc.)

JS: ERROR Error: Uncaught (in promise): Error: com.caverock.androidsvg.SVGParseException: SVG parse error: At line 44, column 86: not well-formed (invalid token)

[ihor-lev]

@Tyler-V I'm using plenty of quite simple svg files (icons mostly) and I didn't have any parse errors. However, I didn't try the sample svgs.

And I remember that earlier I found some open issues in svg libraries that reported some parsing problems with more complex svg files.

[mrcretu]

@liam-nirvana: This works for me. No need to have a registerElement function.

app.module.ts

import {NativeScriptSvgModule} from '@teammaestro/nativescript-svg/angular';

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptSvgModule
    ]
})
export class AppModule {
}

app.component.html

<SVGImage [src]="~/images/icon.svg"></SVGImage>

And please make sure that your SVG files are copied to platforms folder by webpack. I mentioned this here in a different issue.

And, yes, I'm using a fork from @teammaestro aka @bradmartin because it seems to be more stable for me.

This is the only working solution I've found so far(both android and ios). It's important to follow steps mentioned above.