title: How to import third party librarys (npm packages) in Ionic 4?
body: <p>since a couple of things have changed in Ionic 4, I would like to know a definit guid on how to implement third party libs, such as "rss-parser".</p>
  
  <p>I do have read this article, as it turns out to be the latest to this topic: 
  <a href="https://ionicframework.com/docs/v3/developer-resources/third-party-libs/" rel="nofollow noreferrer">https://ionicframework.com/docs/v3/developer-resources/third-party-libs/</a></p>
  
  <p>but it did not help.</p>
  
  <p>Here is what I did so far: </p>
  
  <pre><code>npm install --save rss-parser
  </code></pre>
  
  <p>Than I tried nearly everthing: </p>
  
  <ul>
  <li>Referencing the rss-parser.min.js inside my index.html,</li>
  <li>Using varieties of <code>declare module</code> and <code>declare var</code> </li>
  <li>Trying to do the standard <code>import {} from 'rss-parser'</code>, as Ionic 4 uses <code>es2015/Typescript</code> or later </li>
  </ul>
  
  <p>Here is my <code>app.module.ts</code></p>
  
  <pre><code>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 { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  
  // Services
  import { DataService } from './data-service.service';
  //import { InAppBrowser } from '@ionic-native/in-app-browser';
  
  @NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule/*, InAppBrowser */ ],
    providers: [
      DataService,
      StatusBar,
      SplashScreen,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>And here is my <code>tab1.page.ts</code></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { DataService } from '../data-service.service'
  import { Parser } from 'rss-parser/lib/parser.js';
  
  @Component({
    selector: 'app-tab1',
    templateUrl: 'tab1.page.html',
    styleUrls: ['tab1.page.scss']
  })
  export class Tab1Page {
  
    constructor( private dataService: DataService )
      {
      console.log( "Parser: ", Parser );
      }
  </code></pre>
  
  <p>Now I have a couple of questions: </p>
  
  <ul>
  <li>When I have a link to a node package repo like
  <a href="https://www.npmjs.com/package/rss-parser" rel="nofollow noreferrer">https://www.npmjs.com/package/rss-parser</a>, how do I know, "what to
  import" ?</li>
  </ul>
  
  <p>For example I searched the <code>rss-parser/index.js</code> which required <code>./lib/parser</code>, which then got <code>class Parser {}</code>. I assume, that is, where we have to look, what to import?</p>
  
  <p>So I used the following code:</p>
  
  <pre><code>import { Parser }  from 'rss-parser/dist/rss-parser.js';
  declare var Parser: any;
  
  console.log( "Parser: ", Parser );
  </code></pre>
  
  <p>and it gives me the following error message: </p>
  
  <pre><code>Tab1Page_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: Parser is not defined
      at new Tab1Page (tab1.page.ts:20)
      at createClass (core.js:22142)
      at createDirectiveInstance (core.js:22019)
      at createViewNodes (core.js:23245)
      at createRootView (core.js:23159)
      at callWithDebugContext (core.js:24167)
      at Object.debugCreateRootView [as createRootView] (core.js:23677)
      at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:21498)
      at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:9934)
      at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createComponent (core.js:21609)
  
  
  View_Tab1Page_Host_0 @ Tab1Page_Host.ngfactory.js? [sm]:1
  proxyClass @ compiler.js:18234
  push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24129
  push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15762
  (anonymous) @ core.js:18116
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17248
  push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:18116
  (anonymous) @ core.js:18000
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  onInvoke @ core.js:17289
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:17203
  next @ core.js:18000
  schedulerFn @ core.js:13505
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
  push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13489
  checkStable @ core.js:17258
  onHasTask @ core.js:17302
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463
  push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291
  push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
  drainMicroTaskQueue @ zone.js:601
  Promise.then (async)
  scheduleMicroTask @ zone.js:584
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
  onScheduleTask @ zone.js:301
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
  scheduleResolveOrReject @ zone.js:879
  resolvePromise @ zone.js:825
  (anonymous) @ zone.js:741
  webpackJsonpCallback @ bootstrap:25
  (anonymous) @ tab1-tab1-module.js:1
  Tab1Page_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
  View_Tab1Page_Host_0 @ Tab1Page_Host.ngfactory.js? [sm]:1
  proxyClass @ compiler.js:18234
  push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24129
  push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15767
  (anonymous) @ core.js:18116
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17248
  push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:18116
  (anonymous) @ core.js:18000
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  onInvoke @ core.js:17289
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:17203
  next @ core.js:18000
  schedulerFn @ core.js:13505
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
  push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13489
  checkStable @ core.js:17258
  onHasTask @ core.js:17302
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463
  push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291
  push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
  drainMicroTaskQueue @ zone.js:601
  Promise.then (async)
  scheduleMicroTask @ zone.js:584
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
  onScheduleTask @ zone.js:301
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
  scheduleResolveOrReject @ zone.js:879
  resolvePromise @ zone.js:825
  (anonymous) @ zone.js:741
  webpackJsonpCallback @ bootstrap:25
  (anonymous) @ tab1-tab1-module.js:1
  core.js:15714 ERROR Error: Uncaught (in promise): ReferenceError: Parser is not defined
  
  
  ReferenceError: Parser is not defined
      at new Tab1Page (tab1.page.ts:20)
      at createClass (core.js:22142)
      at createDirectiveInstance (core.js:22019)
      at createViewNodes (core.js:23245)
      at createRootView (core.js:23159)
      at callWithDebugContext (core.js:24167)
      at Object.debugCreateRootView [as createRootView] (core.js:23677)
      at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:21498)
      at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:9934)
      at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createComponent (core.js:21609)
      at resolvePromise (zone.js:831)
      at resolvePromise (zone.js:788)
      at zone.js:892
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
      at Object.onInvokeTask (core.js:17280)
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
      at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
      at drainMicroTaskQueue (zone.js:601)
  </code></pre>
  
  <p>Any help with this? Maybe a step by step guid, on how to import third party npm's in Ionic 4, which - according to the internet - would help a lot of people.</p>
  
  <p><strong>Edit:</strong>
  Obviously NOT a possible duplicate of <a href="https://stackoverflow.com/questions/52840193/convert-xml-rss-feed-to-json-on-angular-app">Convert XML RSS feed to Json on Angular app</a>, because I want to know how to implement third party node packages into Ionic 4.</p>