I have a simple code of HttpInterceptor, i'm trying to add some data in the request headr, but this is not working.
MyInterceptorService Class Code :
import { Injectable } from '#angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable()
export class MyInterceptorService implements HttpInterceptor {
constructor() { }
intercept(req:HttpRequest<any>, next:HttpHandler):Observable<HttpEvent<any>>
{
console.log("hello");
return next.handle(
req.clone({
headers: req.headers.set('Authorization', 'Bearer ')
})
);
}
}
Module Class Code
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule} from '#angular/forms';
import { SecretComponent } from './secret/secret.component';
import { ErreurComponent } from './erreur/erreur.component';
import { HTTP_INTERCEPTORS } from '#angular/common/http';
import { MyInterceptorService } from './my-interceptor.service';
#NgModule({
declarations: [
AppComponent,
SecretComponent,
ErreurComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyInterceptorService,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
The Console message is never displayed and the Http Header is not updated
Are you sure you make an HTTP-request somewhere in your code? For example:
import { Component, OnInit } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get('http://www.google.com')
.subscribe();
}
}
I made a Stackblitz example with copy-paste of your MyInterceptorService and it displays the console 'hello' message: https://stackblitz.com/edit/angular-rhpnjg
Related
I've created a new app using Ionic5 with a menu. I'm trying to use a Footer on multiple pages (now only on Home page). First I've created a SharedModule and imported in the imports' array of the app.module.ts. I've added the footer component in the declarations' and exports' array of the shared.module.ts. Also I added SharedModule in the imports' array of each page.module.ts, and finally adding <app-footer> in each page.html.
It works as expected, showing the footer in all pages. But now I need to control (on/off) this footer from my app.component, in response to a specific event, for example, when internet is not available (this part is not a problem).
footer.component.ts
import { Component, OnInit } from '#angular/core';
import { FooterService } from 'src/app/footer.service';
#Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
public FooterEnabled: boolean= false;
constructor() { }
ngOnInit() {
}
}
The FooterEnabled variable control if the footer is showed or not and must be modifiable from the app.component
footer.component.html
<div class="footer-conn" *ngIf="FooterEnabled">
Alert!
</div>
sharedfooter.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FooterComponent } from '../components/footer/footer.component';
#NgModule({
declarations: [FooterComponent],
imports: [
CommonModule
],
exports: [
FooterComponent, CommonModule
]
})
export class SharedFooterModule { }
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Network } from '#ionic-native/network/ngx';
import { SharedFooterModule } from './shared/sharedfooter.module';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
SharedFooterModule
],
providers: [
StatusBar,
SplashScreen,
Network,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Platform } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { Network } from '#ionic-native/network/ngx';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
public selectedIndex = 0;
public appPages = [
{
title: 'Página 1',
url: 'home',
icon: 'mail'
},
{
title: 'Página 2',
url: 'pagina2',
icon: 'paper-plane'
},
{
title: 'Página 3',
url: 'pagina3',
icon: 'heart'
}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private network: Network
) {
this.initializeApp();
}// Fin constructor
no_internet() {
alert("No internet!")
// In this point make FooterEnabled = true (from the footer component)
}
si_internet() {
alert("Whith internet!")
//In this point make FooterEnabled = false (from the footer component)
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
ngOnInit() {
let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
setTimeout(() => {
if (this.network.type !== 'none') {
this.si_internet();
}
else {
this.no_internet();
}
}, 1000);
});
// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
setTimeout(() => {
if (this.network.type !== 'none') {
this.si_internet();
}
else {
this.no_internet();
}
}, 3000);
});
const path = window.location.pathname.split('/')[1];
if (path !== undefined) {
this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
}
}
}
home.module.ts (as an example)
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
import { SharedFooterModule } from '../shared/sharedfooter.module';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
SharedFooterModule
],
declarations: [HomePage]
})
export class HomePageModule {}
I've tried with a service imported in the footer.component and app.component.ts that implements observables, but it didn't work. I will appreciate your contributions!!
maybe you can do it like bellow, add input to your footer component :
footer.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
#Input() FooterEnabled : string;
//public FooterEnabled: boolean= false;
constructor() { }
ngOnInit() {
}
}
footer.component.ts
<div class="footer-conn" *ngIf="FooterEnabled == 'on'">
Alert!
</div>
on your app.component.ts add new varibale status:
no_internet() {
alert("No internet!")
this.status = 'on'
}
si_internet() {
alert("Whith internet!")
this.status = 'off'
}
put it on app.component.html as :
<app-footer FooterEnabled="status" ></app-footer>
I am new to angular and have started in angular 5.I want to get some data from api using post method,below is my code
myhttp.interceptor.ts
import { Injectable, Injector } from '#angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from
'#angular/common/http';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/catch';
#Injectable()
export class MyhttpInterceptor implements HttpInterceptor {
constructor() { }
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>>{
const authReq = req.clone({ headers: req.headers.set("X-API-KEY",
"admin#123")});
return next.handle(authReq);
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule,routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-
found.component';
import { DepartmentDetailComponent } from './department-detail/department-
detail.component';
import { DepartmentOverviewComponent } from './department-
overview/department-overview.component';
import { DepartmentContactComponent } from './department-contact/department-
contact.component';
import { DepartmentdataService } from './departmentdata.service';
import {HttpClientModule,HTTP_INTERCEPTORS} from '#angular/common/http';
import {MyhttpInterceptor} from './myhttp.interceptor';
#NgModule({
declarations: [
AppComponent,
routingComponents,
PageNotFoundComponent,
DepartmentDetailComponent,
DepartmentOverviewComponent,
DepartmentContactComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [DepartmentdataService,
{
provide: HTTP_INTERCEPTORS,
useClass: MyhttpInterceptor,
multi: true
} ],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts from here i request to api
import { Component,OnInit } from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'routing and navigation demo';
constructor(private http: HttpClient){
}
ngOnInit(){
const req=
this.http.post('http://example.com/pcs/api/vheicles',{})
.subscribe(res => {console.log(res);},err => {console.log('Error
Occured');})
}
}
When i try to use above code it shows an error in console is-
Access to XMLHttpRequest at 'http://example.com/pcs/api/vheicles' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Here when i write above vehicles api i pass X-API-KEY in header and here in interceptor i pass header as this,is it correct or any other pass to header in interceptor please help me.
The angular-cli version is 6.0.8 and the rxjs version is 6.3.3.
I'm following a tutorial and getting the error: Can't resolve 'rxjs/Rx'. How do I go about resolving the error? Is there a way that I can use a previous version of the rxJS?
Here is the code:
service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable()
export class Service {
constructor(private _http: HttpClient) {
}
getPosts(): Observable<any> {
return
this._http.get("http://jsonplaceholder.typicode.com/posts");
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { Service } from './service';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [HttpClientModule, Service],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Service } from './service';
import 'rxjs/Rx';
#Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let post of _posts">
<b>{{post.title}}</b> {{post.body}}
</li>
</ul>
<div *ngIf="_error">
Error: {{_error.status}}:{{_error.statusText}}
</div>
`,
styles: ['div {font-size:20px;padding:5px;background-
color:red;color:white}']
})
export class AppComponent implements OnInit {
_posts = [];
_error;
constructor(private _service: Service) {}
ngOnInit() {
this._service.getPosts()
.subscribe(
response => {
this._posts = response;
},
error => {
this._error = error;
}
);
}
}
As you are using Rxjs V6 and Above. Rxjs made the path based import optional.
import 'rxjs/Rx';
Why you need this import?. Not seeing RX is used in your component. Please remove and try if not required.
Make sure that rxjs-compat library also included in pakage.json file
So I have two components, ChartsComponent (renders charts) &
DataComponent (displays charts among other data, tables, etc).
The file system would be like:
app/charts/
app/entities/data/
ChartsComponent renders successfully when rendered into its own page with its own route. DataComponent works but can't render ChartsComponent through selector. Console displays no error at all. I tried to call ChartsComponent's selector in DataComponent like this:
data.component.html:
<chart-data></chart-data>
charts.component.html:
<div [chart]="chart1"></div>
charts.component.ts:
import { Component, OnInit} from '#angular/core';
import { Chart } from 'angular-highcharts';
//I'm loading data into the chart statically for trial
import { jsonData} from '../json-data/chart-data';
#Component({
selector: 'chart-data',
templateUrl: './charts.component.html'
})
export class ChartsComponent implements OnInit{
//Chart
chart1: Chart;
countries: any;
num: any;
chartData: any;
constructor() {
this.barChart();
}
ngOnInit(){}
barChart(){
this.chartData = jsonData;
this.chart1 = new Chart(this.chartData);
}
}
data.component.ts:
import { Component, OnInit, OnDestroy } from '#angular/core';
import { HttpResponse, HttpErrorResponse } from '#angular/common/http';
import { ActivatedRoute, Router } from '#angular/router';
import { DataService } from './provision.service';
import { ChartsComponent } from '../../charts/charts.component';
#Component({
selector: 'data-page',
templateUrl: './data.component.html'
})
export class DataComponent implements OnInit, OnDestroy {
}
charts.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { ChartsComponent } from './';
#NgModule({
declarations: [
ChartsComponent
],
exports: [
ChartsComponent
]
})
export class ChartsModule {}
data.module.ts:
import { RouterModule } from '#angular/router';
import { ChartsModule } from '../../charts';
import { ChartsComponent } from '../../charts/charts.component';
import {
DataService,
DataComponent,
DataRoute
} from './';
#NgModule({
imports: [],
declarations: [DataComponent],
entryComponents: [
DataComponent,
ChartsComponent
],
providers: [
DataService
]
})
export class DataModule {}
charts/index.ts:
export * from './charts.component';
export * from './charts.module';
export * from './charts.route';
app.module.ts:
import './vendor.ts';
import { NgModule, Injector } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HTTP_INTERCEPTORS } from '#angular/common/http';
import { Ng2Webstorage, LocalStorageService, SessionStorageService } from 'ngx-webstorage';
import { EventManager } from 'ng-blahblah';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { ChartModule } from 'angular-highcharts';
import { ChartsComponent } from './charts';
import { AuthInterceptor } from './blocks/interceptor/auth.interceptor';
import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor';
import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor';
import { SharedModule, UserRouteAccessService } from './shared';
import { AppRoutingModule} from './app-routing.module';
import { HomeModule } from './home/home.module';
import { AdminModule } from './admin/admin.module';
import { AccountModule } from './account/account.module';
import { EntityModule } from './entities/entity.module';
import { PaginationConfig } from './blocks/config/uib-pagination.config';
import {
MainComponent,
NavbarComponent,
FooterComponent,
ProfileService,
PageRibbonComponent,
ActiveMenuDirective,
ErrorComponent
} from './layouts';
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
SharedModule,
HomeModule
EntityModule,
ChartModule
],
declarations: [
MainComponent,
NavbarComponent,
ErrorComponent,
PageRibbonComponent,
ActiveMenuDirective,
FooterComponent,
ChartsComponent
],
providers: [
ProfileService,
PaginationConfig,
UserRouteAccessService,
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
deps: [
LocalStorageService,
SessionStorageService
]
},
{
provide: HTTP_INTERCEPTORS,
useClass: AuthExpiredInterceptor,
multi: true,
deps: [
Injector
]
},
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorHandlerInterceptor,
multi: true,
deps: [
EventManager
]
},
{
provide: HTTP_INTERCEPTORS,
useClass: NotificationInterceptor,
multi: true,
deps: [
Injector
]
},
/*{
provide: NgbDateParserFormatter,
useFactory: () => { return new NgbDateMomentParserFormatter("DD-MM-YYYY") }
}*/
],
bootstrap: [ MainComponent ]
})
export class AppModule {}
I think that's all what's relevant, if someone could explain what's wrong, missing and why, it would be of great help. In the meanwhile I'll try to document myself better on the module/import system.
Ok so basically, the module.ts file in which you are going to import the ChartsComponent and the ChartModule (we are talking highcharts here) needs to also export ChartsComponent.
Import both, then under NgModule import ChartModule, and under declarations and exports tag ChartsComponent. On the destination data.module import ChartsComponent and tag it under NgModule - entryComponents. On the destination DataComponent import ChartsComponent.
I am new to Angular 2. As for now I am trying to fetch user data from Github API. I have one component (user.component) and here is its code:
import {Component} from '#angular/core';
import {userService} from './user.service';
import'rxjs/add/operator/map';
#Component({
selector: 'users',
template: `
<h2>Users</h2>
`,
providers: [userService]
})
export class UserComponent{
constructor(private _userService: userService)
{
this._userService.getUser().subscribe( user => {console.log(user)})
}
}
The code of user.Service.ts:
import {Injectable} from '#angular/core'
import {Http, Headers} from '#angular/http'
import'rxjs/add/operator/map';
#Injectable()
export class userService{
private username : string;
constructor (private _http:Http){
console.log("Github Service is ready...")
this.username = "example"
}
getUser(){
return this._http.get("http://api.github.com/users/"+example)
.map(res => res.json)
}
}
And this is app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UserComponent } from './user.component'
import {HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent,UserComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And finally here is app.component.ts:
import { Component } from '#angular/core';
import { UserService } from './user.service'
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1><users></users>`,
providers: [CourseService]
})
export class AppComponent { name = 'John'; }
You should add providers: [CourseService] to the module, not the app component.
#NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent,UserComponent ],
bootstrap: [ AppComponent ],
providers: [ CourseService ]
})
and remove it from the #Component decorator.
Edit: I'm glad you got this working, but the commenter is right - this was not a correct solution, I was mistaken.
example is not a local variable inside getUser()
I think you meant to write is:
getUser(){
return this._http.get("http://api.github.com/users/" + this.username)
.map(res => res.json)
}