Как импортировать сторонние библиотеки (пакеты npm) в Ionic 4? - PullRequest
Новая
       7

Как импортировать сторонние библиотеки (пакеты npm) в Ionic 4?

0 голосов
/ 28 февраля 2019

поскольку в Ionic 4 произошли некоторые изменения, я хотел бы узнать определенное руководство по реализации сторонних библиотек, например, "rss-parser".

Я читал эту статью, как оказалось, является последним в этой теме: https://ionicframework.com/docs/v3/developer-resources/third-party-libs/

но это не помогло.

Вот что я сделал до сих пор: 

npm install --save rss-parser

Чем я пробовал почти все:

  • Ссылка на rss-parser.min.js внутри моего index.html,
  • Использование разновидностей 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 );
    }

Теперь у меня есть пара вопросов:

  • Когда у меня есть ссылка на репозиторий пакета узла, такой как https://www.npmjs.com/package/rss-parser, откуда я знаю,"что импортировать"?

Например, я искал rss-parser/index.js, который требовал ./lib/parser, который затем получил 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)

Любая помощь с этим?Возможно, пошаговое руководство по импорту сторонних npm-файлов в Ionic 4, что, согласно Интернету, могло бы помочь многим людям.

Редактировать: Очевидно, что это НЕДОПУСТИМОдубликат Преобразование XML-RSS-канала в Json в приложении Angular , потому что я хочу знать, как внедрить сторонние пакеты узлов в Ionic 4.

1 Ответ

0 голосов
/ 23 мая 2019

У меня также есть проблема с этим пакетом с 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

Для тега script вы можете поместить его в файл index.html после всех других тегов script:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...