1

I am storing HTML page in MongoDb and rendering it as innerHTML at runtime based on blogId. I am storing HTML code in Mongodb using gridfs. My sample file looks like 

<p>Hello world, i am coming from database </p>        
<gh-gist src="https://gist.github.com/user/0f7c1a14489ecf9e98b70ea4e276fb.js"></gh-gist>
<p> Page code continue after</p>

Now the problem is that the page is rendered properly but the code for GIST is not getting rendered and displayed.

But the same code code works fine and display the GIST code as expected along with HTML if not stored in Database.

There is no error displayed as such just that code is not coming up.

I tried the suggestion provided at following - Angular 2: sanitizing HTML stripped some content on css style but it didn't help.

My page HTML code is like - 

<div [innerHTML]="pageContent | noSanitize"></div>

Here is the code for Pipe defined as suggested - 

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

@Pipe({ name: 'noSanitize' })
export class NoSanitizePipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {

   }
   transform(html: string): SafeHtml {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
}

I am using https://www.npmjs.com/package/@sgbj/angular-gist for embedding GIST in HTML.

Solution - I got it resolved by using ng-dynamic.

Latest Issue - But Now I am facing issue while doing production build using webpack. As ng-dynamic uses JITCompiler and webpack uses --aot compiler. So ng-dynamic doesn't work with --aot build.

Error Im getting now - 

An unexpected error occured :Error: Uncaught (in promise): TypeError: t is not a constructor
TypeError: t is not a constructor
    at http://localhost:4200/main.c07d94d02c96a651ccd3.js:1:165321
    at No (http://localhost:4200/main.c07d94d02c96a651ccd3.js:1:165568)

Any help is appreciated.

eduPeeth
  • 1,840
  • 13
  • 21
  • Would it be possible for you to get the gist url separately and the rest of the content separately? – SiddAjmera Nov 15 '18 at 17:24
  • Yes i can keep separate but ultimately at end I need to embed them in Html page at some particular places. Also I have numbers of such gist urls for number of pages. – eduPeeth Nov 15 '18 at 17:36
  • Is this content that you get fixed? By fixed, I mean will each content item contain a `p` followed by the gist followed by `p`? – SiddAjmera Nov 15 '18 at 17:38
  • Not really , there is no such pattern. Its totally random. – eduPeeth Nov 15 '18 at 17:41
  • Angular components are not rendered like that (so within innerHtml. See https://stackoverflow.com/questions/40473910/how-to-dynamically-add-innerhtml-with-angular-2-components – MikeOne Nov 15 '18 at 20:59

1 Answers1

1

I had exactly the same error

An unexpected error occured :Error: Uncaught (in promise): TypeError: t is not a constructor TypeError: t is not a constructor

Switched to using ngx-gist

It worked fine in prod.

https://github.com/jasonhodges/ngx-gist

cfranklin
  • 1,500
  • 1
  • 13
  • 14