How to embed twitter timeline to Angular4 app - javascript

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>

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 { }

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'

Related

NG002 Error: Could not be resolved to an NgModule class

I have added a new component to my angular project and made sure it is imported in my app module however I get a NG002 error saying:
error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
Is it missing an #NgModule annotation?
export class NavigationBarDriverComponent {
My app module looks like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import {GoogleMapsAPIWrapper} from '#agm/core';
import { AppComponent } from './app.component';
import { ButtonComponent } from './button/button.component';
import { AgmCoreModule } from '#agm/core';
import { AgmDirectionModule } from 'agm-direction';
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
import { NavigationBarDriverComponent} from './navigation-bar-driver/navigation-bar-driver.component';
import { LayoutModule } from '#angular/cdk/layout';
import { MatToolbarModule } from '#angular/material/toolbar';
import { MatButtonModule } from '#angular/material/button';
import { MatSidenavModule } from '#angular/material/sidenav';
import { MatIconModule } from '#angular/material/icon';
import { MatListModule } from '#angular/material/list';
import { NoopAnimationsModule } from '#angular/platform-browser/animations';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatDialogModule } from '#angular/material/dialog';
import { RouteDialogComponent } from './route-dialog/route-dialog.component';
import { AppRoutingModule, routingComponents } from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
ButtonComponent,
NavigationBarComponent,
NavigationBarDriverComponent,
RouteDialogComponent,
routingComponents
],
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyDnibzvTPaquvcrp9ZYZZ5EFgzncyK1jys'
}),
AgmDirectionModule,
GooglePlaceModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule,
NoopAnimationsModule,
HttpClientModule,
OwlDateTimeModule,
OwlNativeDateTimeModule,
BrowserAnimationsModule,
MatDialogModule,
MatButtonModule,
AppRoutingModule,
NavigationBarDriverComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and my NavigationBarDriverComponent looks like this:
import { Component, NgModule } from '#angular/core';
import { BreakpointObserver, Breakpoints } from '#angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
#Component({
selector: 'app-navigation-bar-driver',
templateUrl: './navigation-bar-driver.component.html',
styleUrls: ['./navigation-bar-driver.component.css']
})
export class NavigationBarDriverComponent {
drawer;
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
I tried to restart the angular server with both "ng serve" and also "ng serve --prod" as I saw it suggested in another thread.
Remove NavigationBarDriverComponent from your app module import.

Angular - RoutingLink Not Showing Page Content With No Error Found

i have an issue using angular routinglink, since the following page didnt showing after i click the link. The URL give me the right path, but its not showing anything, with no error found.
i have already read the documentation from a link and some example from stackoverflow
here's the sample of my code
app.module.ts
import { BrowserModule, enableDebugTools } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';
import { LoginComponent } from './shared/login/login.component';
// Deklarasi Routing
const routingAplikasi : Routes = [
{path : 'login', component : LoginComponent}
];
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
RouterModule.forRoot(routingAplikasi),
SharedModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
shared.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { LoginComponent } from './login/login.component';
import { RegistrasiComponent } from './registrasi/registrasi.component';
import { FooterComponent } from './footer/footer.component';
#NgModule({
declarations: [NavbarComponent, LoginComponent, RegistrasiComponent, FooterComponent],
exports: [
NavbarComponent, FooterComponent, LoginComponent
],
imports: [
CommonModule,
RouterModule
]
})
export class SharedModule { }
navbar.component.html
<form class="form-inline">
<a routerLink="/login" routerLinkActive="active" class="btn btn-primary">Masuk</a>
<a routerLink="/daftar" class="btn btn-primary">Daftar</a>
</form>
app.component.html
<navbar></navbar>
<!-- Begin page content -->
<div class="container">
<router-outlet></router-outlet>
</div>
<footer-bar></footer-bar>
i expect the output of "Login Works" that is the value of LoginComponent.

Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError

I am Beginner and following tutorials, in which i am working in angular with firebase. I use HTML table which was working fine but after using angular-4-data-table i got following error
Unexpected value 'undefined' imported by the module 'AppModule' in console and with this error
This is my app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
declarations: [
AppComponent,
BsNavbarComponent,
HomeComponent,
ProductsComponent,
ShoppingCartComponent,
CheckCheckoutComponent,
OrderSucessComponent,
MyOrderComponent,
AdminProductsComponent,
AdminOrdersComponent,
LoginComponent,
ProductFormComponent
],
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot()
],
providers: [
AuthService,
AuthGaurd,
AdminAuthGuard,
UserService,
CategoryService,
ProductsComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is Import in component
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ProductService } from 'src/app/product.service';
import { Subscription } from 'rxjs';
import { Product } from 'src/app/models/product';
import { DataTableResource } from 'angular-4-data-table';
I also watched previously asked questions on this forum but did not work for me.
Your AppModule the decorator NgModule.
A typical ngModule looks like this:
#NgModule({
declarations: [...],
imports: [...]
})
export class AppModule{}
Pay attention that the imports that look like
import { BrowserModule } from '#angular/platform-browser'; are meant to "include" the modules from different files but without a declaration like the one above you cannot use them in the current NgModule.
In the end, your AppModule should look like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule
....
],
declarations: [....]
})
export class AppModule{}
I was facing same problem with Angular-4-Data-table
Actually i was using a higher version of angular which was not working with angular-4-data-table so i try this and upgrade
npm install angular5-data-table --save
In App Module i use
import {DataTableModule} from 'angular5-data-table';
And same in component
import { DataTableResource } from 'angular5-data-table';
it worked for me hopefully it will work for you.
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot(),
]
problem is in last comma remove comma after NgbModule.forRoot()

How to direct to another component page angular 5

I have trouble to direct an angular page to another component which i created. It should be directed to 'belize-local-time-component' when I click "take me back". But for right now, when I click "take me back", it directed to 'belize-local-time-component'page, but it did not stay, instead of coming back to the current page. Please help!! Thank you.
welcome-component.component.html
<p>
This is what I'm all about. <strong>Take me back</strong>.
</p>
welcome-component.component.ts
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { Router } from '#angular/router';
#Component({
selector: 'app-welcome-component',
templateUrl: './welcome-component.component.html',
styleUrls: ['./welcome-component.component.css']
})
export class WelcomeComponentComponent implements OnInit {
constructor(private route: ActivatedRoute,private router: Router) {
this.route.params.subscribe(res => console.log(res.id));
}
ngOnInit() {
}
sendMeHome() {
this.router.navigate(['./belize-local-time-component']);
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { WelcomeComponentComponent } from './welcome-component/welcome-component.component';
import { BelizeLocalTimeComponentComponent } from './belize-local-time-component/belize-local-time-component.component';
import { AppRoutingModule } from './/app-routing.module';
import { FormsModule } from '#angular/forms';
import { Routes, RouterModule } from '#angular/router';
#NgModule({
declarations: [
AppComponent,
WelcomeComponentComponent,
BelizeLocalTimeComponentComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { WelcomeComponentComponent} from './welcome-component/welcome-component.component';
import { BelizeLocalTimeComponentComponent } from './belize-local-time-component/belize-local-time-component.component';
import { Route } from '#angular/compiler/src/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{
path: '',
component: WelcomeComponentComponent
},
{
path: 'belize-local-time-component',
component: BelizeLocalTimeComponentComponent
}
];
#NgModule({
imports:[RouterModule.forRoot(routes)],
exports:[RouterModule]
})
export class AppRoutingModule { }
The problem is with your anchor tag in Welcome component. You should remove href="" or use a button instead. Please check this sample that I have created for you:
https://stackblitz.com/edit/angular-yarabq
Swap the order of the paths in your routes.

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("="col-md-4 control-label" for="idNome">Nome: </label>

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("="col-md-4 control-label" for="idNome">Nome:
app.module.ts:
import { FormsModule } from '#angular/forms';
#NgModule({
declarations: [ AppComponent],
imports: [
...
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
a app-routing.module.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [];
#NgModule({
imports: [RouterModule.forRoot(routes), ],
exports: [RouterModule]
})
export class AppRoutingModule { }
a atendimento.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AtendimentoRoutingModule } from './atendimento-routing.module';
import { AtendimentoComponent } from './atendimento/atendimento.component';
#NgModule({
imports: [
CommonModule,
AtendimentoRoutingModule
],
declarations: [AtendimentoComponent]
})
export class AtendimentoModule { }
and atendimento.component.ts:
import { Component, OnInit } from '#angular/core';
import { AtendimentoService } from '../atendimento.service';
import { Cliente } from '../../cliente/Cliente'
#Component({
selector: 'app-atendimento',
templateUrl: './atendimento.component.html',
styleUrls: ['./atendimento.component.css'],
providers: [AtendimentoService, Cliente]
})
export class AtendimentoComponent implements OnInit {
you need to add FormsModule to the a atendimento.module.ts as well, since your component is a part of AtendimentoModule
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AtendimentoRoutingModule } from './atendimento-routing.module';
import { AtendimentoComponent } from './atendimento/atendimento.component';
import { FormsModule } from '#angular/forms';
#NgModule({
imports: [
CommonModule,
AtendimentoRoutingModule,
FormsModule
],
declarations: [AtendimentoComponent]
})
export class AtendimentoModule { }

Categories