Dependency injection of Domsanitizer in library component

Question

I have a simple library with a component and I need to use DomSanitizer for html strings. I am consuming this library inside my Application project.

I already know that I should import Domsanitizer and inject it in the constructor as many have already explained: Correct way Provide DomSanitizer to Component with Angular 2 RC6

EDIT:

As you can also check here:

LibraryComponent.ts

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


export class SqvLibComponent implements OnInit {

  constructor( private sanitizer: DomSanitizer ) {
  }

  sequenceRegion: SafeHtml;

  this.sequenceRegion = this.sanitizer.bypassSecurityTrustHtml(myStringtoSanitize);
}

But I get an error stating:

"No provider for Domsanitizer!"

Does someone understand why? Thank you!

Answer 1

As mentioned in this answer in the linked question, you need to ensure that the BrowserModule is imported, otherwise the DomSanitizer wont be provided.

One important thing is that the BrowserModule should be imported by an application root module, not a library module.

In most cases, the BrowserModule wil be correctly be imported, as this is done by default in apps created by the cli. But for the cases that its not, you could add the following checks to your code:

import {Optional}from '@angular/core';

export class SqvLibComponent implements OnInit {
  sequenceRegion: SafeHtml;
  constructor(@Optional() private sanitizer: DomSanitizer ) {
    if(!!this.sanitizer){
      this.sequenceRegion = this.sanitizer.bypassSecurityTrustHtml(myStringtoSanitize); 
    }else{
      // Depending on your component´s ability to correctly work
      // without this dependency you can either warn or raise an error
      console.warn("Ensure that the `BrowserModule` is imported in the application´s root module");
    }
  }
}