TypingPanda TypingPanda - 10 months ago 140
AngularJS Question

DomSanitizationService is not a function

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.

enter image description here

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';
template: `
<div *ngIf="parcel">
<iframe width=800 height=500 src="{{safeUrl}}}"></iframe>

<button (click)="gotoHeroes()">Back</button>
providers:[ParcelsService, DomSanitizationService]
export class HeroDetailComponent implements OnInit, OnDestroy {
parcel: Parcel;
safeUrl : SafeResourceUrl;
private sub: any;
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() {
gotoHeroes() { this.router.navigate(['/heroes']); }

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



You have to import and provide the BROWSER_SANITIZATION_PROVIDERS:

         DomSanitizationService } from '@angular/platform-browser';

and in your providers array: