User483994611 posted
While typing ng serve --open there was a warning in terminal like:-
WARNING in ./node_modules/@angular/http/src/backends/xhr_backend.js 167:24-52
"export '__platform_browser_private__' was not found in '@angular/platform-browser'
i ｢wdm｣: Compiled with warnings.
Error from browser console
ERROR TypeError: Cannot read property 'getDOM' of undefined
at CookieXSRFStrategy.push../node_modules/@angular/http/src/backends/xhr_backend.js.CookieXSRFStrategy.configureRequest (xhr_backend.js:167)
at XHRBackend.push../node_modules/@angular/http/src/backends/xhr_backend.js.XHRBackend.createConnection (xhr_backend.js:207)
at httpRequest (http.js:20)
at Http.push../node_modules/@angular/http/src/http.js.Http.request (http.js:120)
at Http.push../node_modules/@angular/http/src/http.js.Http.get (http.js:131)
at ContactService.push../src/app/_services/contact.service.ts.ContactService.getContacts (contact.service.ts:21)
at ContactComponent.push../src/app/contact/contact.component.ts.ContactComponent.loadData (contact.component.ts:41)
at ContactComponent.push../src/app/contact/contact.component.ts.ContactComponent.ngOnInit (contact.component.ts:37)
at checkAndUpdateDirectiveInline (core.js:22099)
at checkAndUpdateNodeInline (core.js:23363)
View_ContactComponent_Host_0 @ ContactComponent_Host.ngfactory.js? [sm]:1
ContactComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_
View_ContactComponent_Host_0 @ ContactComponent_Host.ngfactory.js? [sm]:1
Plz suggest where I am doing wrong
My app.module.ts looks like:-
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Headers, RequestOptions, BaseRequestOptions } from '@angular/http';
import {BrowserModule, ɵgetDOM} from '@angular/platform-browser'
import { APP_BASE_HREF, CommonModule, Location, LocationStrategy, HashLocationStrategy }
from '@angular/common';
// third party module to display toast
//import { ToastrModule } from 'toastr-ng2';
//import { ToastModule } from 'ng2-toastr/ng2-toastr';
//import { ToastrModule } from 'ngx-toastr';
//PRIMENG - Third party module
import { InputTextModule, DataTableModule, ButtonModule, DialogModule } from 'primeng/primeng';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { ContactComponent } from './contact/contact.component';
import { ContactService } from './_services/index';
class AppBaseRequestOptions extends BaseRequestOptions {
headers: Headers = new Headers();
constructor() {
super();
this.headers.append('Content-Type', 'application/json');
this.body = '';
}
}
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
ContactComponent
],
providers: [ContactService,
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: RequestOptions, useClass: AppBaseRequestOptions },],
imports: [
CommonModule,
HttpModule,
FormsModule,
BrowserAnimationsModule,
BrowserModule,
// ToastModule.forRoot(),
// ToastrModule.forRoot(),
InputTextModule, DataTableModule, ButtonModule, DialogModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'contact', pathMatch: 'full' },
{ path: 'contact', component: ContactComponent },
{ path: '**', redirectTo: 'contact' }
])
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
My contact.component.ts looks like:-
import { Component, OnInit } from '@angular/core';
import { Contact } from '../_models/index';
import { ContactService } from '../_services/index';
//import { ToastrService } from 'toastr-ng2';
import { ToastrService } from 'ngx-toastr';
//import { ToastrService } from 'ng2-toastr/ng2-toastr';
import { InputTextModule, DataTableModule, ButtonModule, DialogModule } from 'primeng/primeng';
class ContactInfo implements Contact {
constructor(public contactId?, public firstName?, public lastName?, public email?, public phone?) { }
}
@Component({
selector: 'contact',
templateUrl: './contact.component.html'
})
export class ContactComponent implements OnInit {
private rowData: any[];
displayDialog: boolean;
displayDeleteDialog: boolean;
newContact: boolean;
contact: Contact = new ContactInfo();
contacts: Contact[];
public editContactId: any;
public fullname: string;
// constructor(private contactService: ContactService, private toastrService: ToastrService) {
// }
constructor(private contactService: ContactService) {
}
ngOnInit() {
this.editContactId = 0;
this.loadData();
}
loadData() {
this.contactService.getContacts()
.subscribe(res => {
this.rowData = res.result;
});
}
showDialogToAdd() {
this.newContact = true;
this.editContactId = 0;
this.contact = new ContactInfo();
this.displayDialog = true;
}
showDialogToEdit(contact: Contact) {
this.newContact = false;
this.contact = new ContactInfo();
this.contact.contactId = contact.contactId;
this.contact.firstName = contact.firstName;
this.contact.lastName = contact.lastName;
this.contact.email = contact.email;
this.contact.phone = contact.phone;
this.displayDialog = true;
}
onRowSelect(event) {
}
save() {
this.contactService.saveContact(this.contact)
.subscribe(response => {
// this.contact.contactId > 0 ? this.toastrService.success('Data updated Successfully') :
// this.toastrService.success('Data inserted Successfully');
this.contact.contactId > 0 ? alert('Data updated Successfully') :
alert('Data inserted Successfully');
this.loadData();
});
this.displayDialog = false;
}
cancel() {
this.contact = new ContactInfo();
this.displayDialog = false;
}
showDialogToDelete(contact: Contact) {
this.fullname = contact.firstName + ' ' + contact.lastName;
this.editContactId = contact.contactId;
this.displayDeleteDialog = true;
}
okDelete(isDeleteConfirm: boolean) {
if (isDeleteConfirm) {
this.contactService.deleteContact(this.editContactId)
.subscribe(response => {
this.editContactId = 0;
this.loadData();
});
//this.toastrService.error('Data Deleted Successfully');
alert('Data Deleted Successfully');
}
this.displayDeleteDialog = false;
}
}
