如何在 Ionic 4 中导入第三方库（npm 包）？

Question

由于 Ionic 4 中发生了一些变化，我想知道有关如何实现第三方库的定义指南，例如“rss-parser”。

我确实读过这篇文章，因为它是该主题的最新文章： 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'，因为 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 );
    }

现在我有几个问题：

• 当我有一个节点包 repo 的链接时 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，根据互联网，这会帮助很多人。

编辑： 显然不是Convert XML RSS feed to Json on Angular app 的可能副本，因为我想知道如何在 Ionic 4 中实现第三方节点包。

Answer 1

我对这个包也有 ionic4 的问题，

（正如我在这里解释的https://github.com/bobby-brennan/rss-parser/issues/109）

我还没有找到解决方法，似乎 rss-parser 包与新的 ECMAScript 模块不兼容。

benji7425 在这里说

https://github.com/bobby-brennan/rss-parser/issues/98

这里有 tofra github 测试项目

https://github.com/tofra/angular-rss-parser/issues/1

对于脚本标签，您可以将它放在 index.html 文件中所有其他脚本标签之后:)