DomSanitizationService is not a function

Question

As people always say there is no question called a dumb question.

I am learning Angular 2.0 following the official tutorial now. It is using rc2.0 as I can see from the packageconfig file. I was trying to suppress the frame work complaining the "Unsafe" url in the iFrame tag.

I have checked the instructions from this Stack Overflow Question and followed everything that's been shown in the LIVE Plunker.

My VS Code doesn't complain anything in the compile time but from the Chrome inspector I can see the error.

Following are the TS file of my project.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute }       from '@angular/router';
import { ParcelsService } from './parcels.service';
import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';
import { Parcel } from './mock-parcels';
@Component({
  template: `
  <h2>Parcels</h2>
  <div *ngIf="parcel">
    <h3>"{{parcel.checkUrl}}"</h3>
    <iframe width=800 height=500 src="{{safeUrl}}}"></iframe>

    <p>
      <button (click)="gotoHeroes()">Back</button>
    </p>
  </div>
  `,
  providers:[ParcelsService, DomSanitizationService]
})
export class HeroDetailComponent implements OnInit, OnDestroy  {
  parcel: Parcel;
  safeUrl : SafeResourceUrl;
  private sub: any;
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: ParcelsService,
    private sanitizer: DomSanitizationService) {}
  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       let id = +params['id']; // (+) converts string 'id' to a number
       this.parcel = this.service.getParcel(id);
     });
     this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.parcel.checkUrl);

  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
  gotoHeroes() { this.router.navigate(['/heroes']); }
}

Has anyone ever come across similar issue? Please help to find what I have done wrong.

Thanks

Answer 1

You have to import and provide the BROWSER_SANITIZATION_PROVIDERS:

import { BROWSER_SANITIZATION_PROVIDERS, 
         SafeResourceUrl, 
         DomSanitizationService } from '@angular/platform-browser';

and in your providers array:

providers: [ParcelsService, BROWSER_SANITIZATION_PROVIDERS]

---

UPDATE: for the final release things changed a little

import { __platform_browser_private__, 
         SafeResourceUrl, 
         DomSanitizer } from '@angular/platform-browser';

and add it to the providers like so:

providers: [ParcelsService, __platform_browser_private__, BROWSER_SANITIZATION_PROVIDERS]

---

UPDATE FOR ANGULAR 4+: since Angular 4, there's some changes:

Now, you don't have to pass DomSanitizer to providers. You can import directly in your component and grab it in the component's constructor. Same goes for SafeResourceUrl.

Also:

• __platform_browser_private__ is no longer in @angular/platform-browser.
• BROWSER_SANITIZATION_PROVIDERS is no longer in @angular/platform-browser. It is now implemented [as a provider] into BrowserModule which can be imported from @angular/platform-browser.
• P.S. BrowserModule is usually added into your app.module module's imports array.

Answer 2

Update for Angular 7: The export has been renamed eBROWSER_SANITIZATION_PROVIDERS in angular/platform-browser/src/private_export.d.ts