How to properly set innerHtml in Ionic/Angular on production?

Question

I have implemented the privacy policies for my app in the following way:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Privacy Policy</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-grid class="ion-margin">
    <ion-row>
      <ion-col size="12" sizeMd="8" offsetMd="2" [innerHTML]="'templates.core.privacy-policy.text' | translate">
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
<app-custom-footer></app-custom-footer>

I am using innerHtml in a <ion-col> element which is loading my privacy policy text dynamically based on the user's current language.

Everything is working fine on dev but when deploying and uploading it into firebase hosting I am getting the following error:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Any idea what can be going wrong?

PD: this is how it looks on dev mode.

Screenshot of dev mode

score 0 · Answer 1 · answered Apr 10 '21 at 12:23

0

Use it like:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Privacy Policy</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-grid class="ion-margin">
    <ion-row>
      <ion-col size="12" sizeMd="8" offsetMd="2">
          {{'templates.core.privacy-policy.text' | translate}}
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
<app-custom-footer></app-custom-footer>

answered Apr 10 '21 at 12:23

Zach

36
8

Please explain what you did, so the questioner (and future viewers) can actually learn from your answer. – Roy Apr 10 '21 at 12:28
This will fail since the generated string after translation contains html elements like
,
.... need to use innerHtml or somehow tell angular that the string is actually html...note that innerHtml is working on dev but not in production...thats the actual problem
– Armando Apr 10 '21 at 13:23
1

Did you try [this](https://stackoverflow.com/questions/56662215/mime-type-issue-in-angular) – Zach Apr 10 '21 at 13:32
Hi @Zach yes I did tried before but I did not work... but after searcing a little bit more and looking again at this post I found a comment that was suggesting the way I make it work... Il answer my question jsut in case anyone face this in the future – Armando Apr 11 '21 at 07:32

score 0 · Answer 2 · edited Apr 11 '21 at 19:56

0

After searching a little bit more I implemented the solution of one of the answers in this post suggested by @Zach. I only added in tsconfig.json in compilerOptions:

"types": ["module"]

edited Apr 11 '21 at 19:56

Dharman

30,962
25
85
135

answered Apr 11 '21 at 18:03

Armando

309
1
4
10

How to properly set innerHtml in Ionic/Angular on production?

2 Answers2

,