Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I cannot get the xml2js code to work so far using angular 6. I have a service.ts returning xml however when calling xml2js.parseString to convert to json I consistently get an undefined error.

"core.js:1673 ERROR TypeError: Cannot read property 'parseString' of undefined

service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
import { HttpHeaders } from '@angular/common/http';
export interface Zid {
  zpid: number;
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
  responseType: 'text' as 'text'
@Injectable({
  providedIn: 'root'
export class CdataServiceService {
  constructor(private _http: HttpClient) { }
  zipID = 'http://APiXml';
  getZipID() {
    return this._http.get(this.zipID, httpOptions)
    .pipe
        (res => 
            return res
component.ts
import { Component, OnInit } from '@angular/core';
import { CdataServiceService, Zid } from '../cdata-service.service';
import { xml2js } from 'xml2js';
import { Observable, of } from 'rxjs';
@Component({
  selector: 'app-cgetter',
  templateUrl: './cgetter.component.html',
  styleUrls: ['./cgetter.component.css']
export class CgetterComponent implements OnInit {
  data = [];
  constructor(private cds: CdataServiceService) { }
  onKeyCompGet(event:any){
    console.log(event.target.value);
  _zid :Zid
  getTheComps(){
    this.cds.getZipID()//cdataServiceService.getZipId()
    .subscribe(
      res => {
        this.convertToJson(res);
  public convertToJson(data: string): Object {
    let res;
    console.log(data);
    xml2js.parseString(data, { explicitArray: false }, (error, result) => {
      if (error) {
        throw new Error(error);
      } else {
        res = result;
        console.log(result);
    return res;
  ngOnInit() {
I have ran the returned xml to an online converter and didn't run into any problems. I have no clue on why the function returns undefined.
Also is there a way to verify all the files in xml2js is being loaded properly?
                xml2js is not loaded, as the error states it is undefined. How is that referenced? Is it imported through package.json?
– Igor
                Oct 29, 2018 at 19:11
                "xml2js": "^0.4.17" - package-lock.json   this got placed there auto after running 'npm install xml2js'
– justTech
                Oct 29, 2018 at 19:22
If you examine the xml2js file which is referenced as the main file in the project's package.json. It exports an object with various properties such as Builder, Parser, and parseString, none of them have the name/identifier xml2js. So the named import you are using of import { xml2js } from 'xml2js'; is attempting to important a non-existent object property (log xml2js in the example I shared to see exported properties), hence the undefined.
Another import approach you can take, is using a named import to directly import the parseString function you are using. This would look like:
import { parseString } from 'xml2js';
And then you would simply use it as follows:
parseString(data, { explicitArray: false }, (error, result) => {
  if (error) {
    throw new Error(error);
  } else {
    res = result;
    console.log(result);
Here is an example of the import/usage in action.
Hopefully that helps!
                Thanks! That resolved the issue and now it's working perfectly. I now understand this alot better with how you broke it down.
– justTech
                Oct 29, 2018 at 20:05
                I like to highlight that parseString callback take TWO parameters, and instead of having usual result first, and error second, we have the opposite here. I kept getting null value as result, my callback looked like that e => { console.log(e); // null }.
– Ambroise Rabier
                Jan 29, 2019 at 14:33
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.