How to render gist code(GItHub) in angular 6 when HTML is coming from Database
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.
javascript
angular github asked Nov 15 '18 at 17:03
eduPeetheduPeeth
1,081314
add a comment |
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.
javascript
angular github asked Nov 15 '18 at 17:03
eduPeetheduPeeth
1,081314
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 apfollowed by the gist followed byp?
– 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 stackoverflow.com/questions/40473910/…
– MikeOne
Nov 15 '18 at 20:59
add a comment |
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.
javascript
angular github asked Nov 15 '18 at 17:03
eduPeetheduPeeth
1,081314
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.
javascript
angular github javascript
angular github asked Nov 15 '18 at 17:03
eduPeetheduPeeth
1,081314
asked Nov 15 '18 at 17:03
eduPeetheduPeeth
1,081314
edited Nov 26 '18 at 9:22
eduPeeth
asked Nov 15 '18 at 17:03
eduPeetheduPeeth
1,081314
asked Nov 15 '18 at 17:03
eduPeetheduPeeth
1,081314
asked Nov 15 '18 at 17:03
eduPeetheduPeeth
1,081314
1,081314
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 apfollowed by the gist followed byp?
– 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 stackoverflow.com/questions/40473910/…
– MikeOne
Nov 15 '18 at 20:59
add a comment |
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 apfollowed by the gist followed byp?
– 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 stackoverflow.com/questions/40473910/…
– MikeOne
Nov 15 '18 at 20:59
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
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
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
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
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 stackoverflow.com/questions/40473910/…
– MikeOne
Nov 15 '18 at 20:59
Angular components are not rendered like that (so within innerHtml. See stackoverflow.com/questions/40473910/…
– MikeOne
Nov 15 '18 at 20:59
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53324531%2fhow-to-render-gist-codegithub-in-angular-6-when-html-is-coming-from-database%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53324531%2fhow-to-render-gist-codegithub-in-angular-6-when-html-is-coming-from-database%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
pfollowed by the gist followed byp?– 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 stackoverflow.com/questions/40473910/…
– MikeOne
Nov 15 '18 at 20:59