I'm currently working on an Angular2 website. Everything is running smoothly in Internet Explorer, but I am encountering an ERR_CONNECTION_REFUSED error when trying to access it from Chrome and Firefox.
Here is the code snippet:
This is the content of my home.component.html:
<div class="log_wrap">
<div class="log_img"></div>
<ul class="log_list">
<li>USER ID<br>
<input class="log_input" placeholder="Login ID" id="LoginID" type="text">
</li>
<li>PASSWORD<br>
<input class="log_input" placeholder="*******" id="password" type="password">
</li>
<li>
<input type="button" class="reset_but" value="Reset"/>
<input type="button" class="log_but" value="Login" (click)="login_btnClick()"/>
</li>
</ul>
</div>
Now moving on to my home.component.ts:
export class HomeComponent {
homes: IHome[];
home: IHome;
msg: string;
indLoading: boolean = false;
constructor(private fb: FormBuilder, private _homeService: HomeService, private router: Router) { }
login_btnClick() {
var Domain = "sgl";
var Username = ((document.getElementById("LoginID") as HTMLInputElement).value);
var Password = ((document.getElementById("password") as HTMLInputElement).value);
this._homeService.get(Global.BASE_USER_ENDPOINT + '/ValidateEmployee?Domain=' + Domain + '&Username=' + Username + '&Password=' + Password)
.do(data => sessionStorage.setItem('session', Username))
.subscribe(homes => {
this.homes = homes;
this.indLoading = false;
var NT = sessionStorage.getItem('session');
//this.router.navigateByUrl('/user');
this.EmpDetails();
},
error => this.msg = <any>error);
}
}
This is what's included in my home.ts:
export interface IHome {
EmpName: string,
EmpNumber: string,
EmailId: string,
Id: number,
FirstName: string,
LastName: string,
Gender: string
}
And here is the contents of home.service.ts:
export class HomeService {
constructor(private _http: Http) { }
get(url: string): Observable<any> {
return this._http.get(url)
.map((response: Response) => <any>response.json())
.catch(this.handleError);
}
The code functions flawlessly in IE, however it fails to work in Google Chrome and Firefox with an ERR_CONNECTION_REFUSED error message.
Lastly, I have provided a glimpse of my angular-cli.json file: angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "i-roz-ui"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"class": {
"spec": false
},
"component": {
"spec": false
},
"directive": {
"spec": false
},
"guard": {
"spec": false
},
"module": {
"spec": false
},
"pipe": {
"spec": false
},
"service": {
"spec": false
}
}
}