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.
Related
I try to create simple routing to show EmptyRoomComponent on button click from app.coponent.html but EmptyRoomComponent is pasted to app.component.html instead of use clean empty-room.component.html
app.routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import {EmptyRoomComponent} from "./components/empty-room/empty-room.component";
const routes: Routes = \[
{ path: 'empty', component:EmptyRoomComponent},
{ path: '\*\*', redirectTo:''}
\];
#NgModule({
imports: \[RouterModule.forRoot(routes, { enableTracing: true })\],
exports: \[RouterModule\]
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { ReactiveFormsModule} from "#angular/forms";
import {EmptyRoomComponent} from "./components/empty-room/empty-room.component";
#NgModule({
declarations: \[
AppComponent,
LoginComponent,
EmptyRoomComponent
\],
imports: \[
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
\],
providers: \[\],
bootstrap: \[AppComponent\]
})
export class AppModule {
}
app.component.html
<app-login></app-login>
<label class="or">------ LUB ------</label>
<div class="container unlogged">
<button class="unlogged" routerLink="/empty">Utwórz pokój</button>
</div>
<router-outlet></router-outlet>
I tried to modify routes variable - nothing changed
i am facing this problem while creating the new project on MDB angular .
I have created multiple modules like public , tutor and student . public module is not lazy loaded while others are lazy loaded . public module is working perfect .
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-
browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AgmCoreModule } from '#agm/core';
import { AppComponent } from './Main/app.component';
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { PublicModule } from './public/public.module';
import { PageNotFoundComponent } from './Main/page-not-found/page-not-
found.component';
import { ToastModule } from 'ng-uikit-pro-standard';
import { CoreModule } from './core/core.module';
#NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
imports: [
PublicModule,
CoreModule,
AppRoutingModule,
BrowserModule,
ToastModule.forRoot(),
BrowserAnimationsModule,
FormsModule,
SharedModule,
AgmCoreModule.forRoot({
// https://developers.google.com/maps/documentation/javascript/get-api-
key?hl=en#key
apiKey: 'Your_api_key'
})
],
bootstrap: [AppComponent],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { PageNotFoundComponent } from './Main/page-not-found/page-not-
found.component';
const routes: Routes = [
{ path: 'tutor', loadChildren: './tutor/tutor.module#TutorModule' },
// { path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
// { path: '**', component: PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '#angular/core';
import { TutorRoutingModule } from './tutor-routing.module';
import { SharedModule } from '../shared/shared.module';
import { TutorLayoutComponent } from './tutor-layout/tutor-
layout.component';
#NgModule({
declarations: [TutorLayoutComponent],
imports: [
SharedModule,
TutorRoutingModule
]
})
export class TutorModule { }
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { TutorLayoutComponent } from './tutor-layout/tutor-
layout.component';
const routes: Routes = [
{path: '', component: TutorLayoutComponent}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TutorRoutingModule { }
I want to lazy load all modules except my public module.But i don't know why it is showing me the message that Browser Module Is already loaded . i have already tried multiple tries to solve it .
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()
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 { }
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'