Twitter Bootstrap Question posted in

How to embed twitter timeline to Angular4 app – Twitter bootstrap

New to Angular, please bear with me. I need to load in tweets from a specific timeline. What is the best way to accomplish this? I’ve tried using this package (https://www.npmjs.com/package/ng4-twitter-timeline), and have followed the instructions in that documentation, but I still get the error that “ng4-twitter-timeline is not a known element.”

I’ve also tried adding in

<script src="https://platform.twitter.com/widgets.js" async></script>

to index.html…

Are there additional scripts that need to be loaded in for this to work?

app.module.ts

...
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { SwiperModule } from 'angular2-useful-swiper';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ShareModule } from 'ng2share/share.module';
import { MasonryModule } from 'angular2-masonry';
import { routes } from './app-routing.module';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';

@NgModule({
  declarations: [
  ...
  ],
  imports: [
     BrowserModule,
     AppRoutingModule,
     HttpModule,
     AngularFontAwesomeModule,
     SwiperModule,
     RouterModule.forRoot(routes),
     ShareModule,
     MasonryModule,
     Ng4TwitterTimelineModule
  ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

tweets.component.ts

   import { Component, OnInit } from '@angular/core';
   import { Ng4TwitterTimelineService } from 'ng4-twitter-timeline/lib/index';

  @Component({
    selector: 'app-tweets',
    templateUrl: './tweets.component.html',
    styleUrls: ['./tweets.component.scss']
  })
  export class TweetsComponent implements OnInit {

 constructor(private ng4TwitterTimelineService: Ng4TwitterTimelineService) {}

   ngOnInit() {}
}

tweets.component.html

   <ng4-twitter-timeline [dataSrc]="{sourceType: 'profile',screenName: 'lokers_one'}" [opts]="{tweetLimit: 2}"></ng4-twitter-timeline>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Figured it out, everyone. The account used in the demo has protected tweets... which is why nothing was embedding... I changed the account and it does work. But still don't understand why I'm still getting this error: 'ng4-twitter-timeline' is not a known element'


  2. 0

    You should add .forRoot when you imports Ng4TwitterTimelineModule in @ngModule. So your app.module.ts should look like that:

    ...
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { SwiperModule } from 'angular2-useful-swiper';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ShareModule } from 'ng2share/share.module';
import { MasonryModule } from 'angular2-masonry';
import { routes } from './app-routing.module';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';

@NgModule({
  declarations: [
  ...
  ],
  imports: [
     BrowserModule,
     AppRoutingModule,
     HttpModule,
     AngularFontAwesomeModule,
     SwiperModule,
     RouterModule.forRoot(routes),
     ShareModule,
     MasonryModule,
     Ng4TwitterTimelineModule.forRoot()
  ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search