angular2-disqus
Advanced tools
DISQUS integration with Angular 2.
npm install --save angular2-disqus
Add the DISQUS embed in the body of your main page (index.html) making sure to change the url to your disqus site url.
Breaking change as of v3 the embed script must now be in the body of the page not the head
<html>
<head>
<title>demo app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link href="../node_modules/@angular2-material/core/style/core.css" rel="stylesheet">
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../public/js/systemjs.config.js"></script>
<script>
System.import('demo').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<demo-app>Loading...</demo-app>
<script src="//angular2disqustest.disqus.com/embed.js"></script>
</body>
</html>
In the SystemJs config file (systemjs.config.js) add a mapping for the package
var map = {
...
'angular2-disqus': 'node_modules/angular2-disqus/lib'
};
and add the package to the list of packages
var packages = {
...
'angular2-disqus': { main: 'disqus.module.js', defaultExtension: 'js' }
};
Just install the package and then import the module as below.
At the relevant level for your app add import the DisqusModule.
For example in app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DemoComponent } from './demo.component';
import { DisqusModule } from 'angular2-disqus';
import { MdCardModule } from '@angular2-material/card';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdInputModule } from '@angular2-material/input';
@NgModule({
imports: [
//A2 stuff
BrowserModule,
FormsModule,
//src module
DisqusModule,
//material modules
MdCardModule,
MdToolbarModule,
MdButtonModule,
MdInputModule
],
declarations: [
AppComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
To add a comments section add it as a nested component on your component and set the pageIdentifier and the pageUrl.
<disqus-thread [page-identifier]="pageIdentifier" [page-url]="pageUrl"></disqus-thread>
The comments section will be reset everytime either page-identifier or page-url are updated and both have a value. Note to avoid issues with comments showing up on the wrong page always set both.
Add support for comment counts?? https://help.disqus.com/customer/portal/articles/565624-tightening-your-disqus-integration
FAQs
Disqus integration with Angular.
The npm package angular2-disqus receives a total of 0 weekly downloads. As such, angular2-disqus popularity was classified as not popular.
We found that angular2-disqus demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.