1

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:23:84 caused by: unsafe value used in a resource URL context

My homeData model

{ id: 1, title: '2017 Super Bowl', graphic: 'https://wikitags.com/images/SuperBowlBanner.png',
  categorycards: [
    {
        type: "video",
        url: 'https://www.youtube.com/embed/9Egf5U8xLo8?rel=0&controls=0&showinfo=0',
        title: "2017 Super Bowl Commercials",
        listings: ["Netflix", "Nintendo", "Intel", "Ford", "Wendy's"]
    },

The markup: home.component.html

<div class="container col-lg-3 col-md-6 col-sm-12" *ngFor="let card of category.categorycards">
<div class="thumbnail">
    <a href="/wiki/entity" *ngIf="card.type == 'image'">
        <div class="image-wrap">
            <img [src]="card.graphic" class="img-responsive" alt="[card.title]" title="[card.title]">
        </div>
    </a>

    <a href="/wiki/category" *ngIf="card.type == 'video'">
        <div class="image-wrap">
            <iframe title="YouTube video player"
                    class="youtube-player"
                    type="text/html"
                    [src]="card.url" height="100%" width="100%" frameborder="0"></iframe>
        </div>
    </a>

I found this answer here.

However when I tried to create the saferesourceurl.pipe.ts file got this error:

Property 'bypassSecurityTrustResourceUrl' does not exist on type 'Sanitizer'.

enter image description here

Community
  • 1
  • 1
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529

1 Answers1

2

Change Sanitizer to DomSanitizer.
You get injected the same instance, but the IDE doesn't show any warnings.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks! Now I'm getting this error :( I'll make a new question and link you first: `Unhandled Promise rejection: Template parse errors: The pipe 'safeResourceUrl' could not be found ("s="image-wrap"> ` – Leon Gaban Mar 08 '17 at 17:10
  • 1
    You need to add the pipe to `declarations: [SafeResourceUrl]` of your module – Günter Zöchbauer Mar 08 '17 at 17:15
  • Yeah I did that, question posted: http://stackoverflow.com/questions/42677714/the-pipe-saferesourceurl-could-not-be-found – Leon Gaban Mar 08 '17 at 17:16
  • 1
    I got other error, when video is from YT. I made safeURL Pipe, added to declaration in module, and I am using ngFor earlier so it goes like [src]="video | safe". PS. I also use DOMSanitizer. ERROR: The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle. – Uland Nimblehoof Sep 13 '22 at 16:40