如何在Ionic 4中導入第三方庫（npm軟件包）？

Question

由於Ionic 4中發生了一些更改，因此我想了解有關如何實現第三方庫（例如“ rss-parser”）的definit指南。

我確實讀過這篇文章，因為它實際上是該主題的最新文章： https : //ionicframework.com/docs/v3/developer-resources/third-party-libs/

但這沒有幫助。

這是我到目前為止所做的：

npm install --save rss-parser

比我幾乎嘗試的一切：

引用我的index.html中的rss-parser.min.js，
使用各種declare module和declare var
嘗試import {} from 'rss-parser'執行標准import {} from 'rss-parser' ，因為Ionic 4使用es2015/Typescript或更高版本

這是我的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 { 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 {}

這是我的tab1.page.ts

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 );
    }

現在我有幾個問題：

當我有一個指向https://www.npmjs.com/package/rss-parser之類的節點程序包庫的鏈接時，如何知道“導入內容”？

例如，我搜索了需要./lib/parser的rss-parser/index.js ，然后得到了class Parser {} 。 我認為，那就是我們要看的地方要導入什么？

所以我用下面的代碼：

import { Parser }  from 'rss-parser/dist/rss-parser.js';
declare var Parser: any;

console.log( "Parser: ", Parser );

它給了我以下錯誤信息：

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)

有什么幫助嗎？ 關於如何在Ionic 4中導入第三方npm，也許是一步一步的指導，根據互聯網的說法，這將幫助很多人。

編輯：顯然不是在Angular應用程序上將XML RSS feed轉換為Json的可能重復，因為我想知道如何將第三方節點程序包實現為Ionic 4。