Saya punya masalah aneh. Saya sudah ada Angular4 proyek yang dikelola di bawah Angular-CLI dengan RxJS perpustakaan. Setelah memperbarui pustaka RxJS ke versi 5.5.2, proyek mulai bermasalah dengan operator Observable. Kesalahan dalam Google Chrome adalah seperti ini:

ERROR TypeError: this.apiService.request(...).switchMap is not a function

Saya tahu saya dapat memperbaikinya dengan:

import 'rxjs/add/operator/switchMap';

Tapi masalahnya ada pada IDE dalam hal ini Visual Studio Code. Itu tidak menunjukkan impor operator mana yang hilang. Satu-satunya cara yang saya temukan sejauh ini untuk mendeteksi operator yang hilang adalah dengan menjalankan aplikasi dan memeriksa semua fitur aplikasi di browser dengan Developer Console terbuka menunggu kesalahan semacam ini. Jadi saya punya dua pertanyaan.

  • Apakah ada cara yang lebih baik untuk mendeteksi operator yang hilang dalam proyek saya yang diperbarui? Mengapa proses pembuatan tidak menangkap fakta bahwa operator tidak ada?
  • Apakah ada cara agar saya dapat menyiapkan Visual Studio Code untuk menunjukkan kesalahan semacam ini kepada saya sebelum saya mendorong beberapa perubahan dan menemukannya di browser? Penyempurnaan sintaks dalam IDE ini bahkan bekerja dengan operator yang tidak diimpor, yang menurut saya salah.

Saya melampirkan output dari ng -v:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.3
Node: 6.11.2
OS: darwin x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.3
@angular/flex-layout: 2.0.0-beta.8
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.3
@schematics/angular: 0.1.7
typescript: 2.3.4
webpack: 3.8.1

Dan keluaran dari npm list --depth=0

├── @angular/animations@4.4.6
├── @angular/cdk@2.0.0-beta.12
├── @angular/cli@1.5.3
├── @angular/common@4.4.6
├── @angular/compiler@4.4.6
├── @angular/compiler-cli@4.4.6
├── @angular/core@4.4.6
├── @angular/flex-layout@2.0.0-beta.8
├── @angular/forms@4.4.6
├── @angular/http@4.4.6
├── @angular/material@2.0.0-beta.12
├── @angular/platform-browser@4.4.6
├── @angular/platform-browser-dynamic@4.4.6
├── @angular/platform-server@4.4.6
├── @angular/router@4.4.6
├── @types/hammerjs@2.0.34
├── @types/jasmine@2.5.45
├── @types/node@6.0.78
├── ag-grid@13.3.1
├── ag-grid-angular@13.3.0
├── classlist.js@1.1.20150312
├── codelyzer@3.0.1
├── core-js@2.4.1
├── hammerjs@2.0.8
├── i18n-iso-countries@3.2.2
├── jasmine-core@2.6.4
├── jasmine-spec-reporter@4.1.1
├── karma@1.7.0
├── karma-chrome-launcher@2.1.1
├── karma-cli@1.0.1
├── karma-coverage-istanbul-reporter@1.3.0
├── karma-jasmine@1.1.0
├── karma-jasmine-html-reporter@0.2.2
├── protractor@5.1.2
├── rxjs@5.5.2
├── ts-node@3.0.6
├── tslint@5.3.2
├── typescript@2.3.4
├── web-animations-js@2.3.1
└── zone.js@0.8.12
0
Marcin Kapusta 30 November 2017, 10:27
Jika Anda akan menggunakan impor operator penambalan prototipe, Anda mungkin menemukan ini berguna: rxjs-tslint -aturan. Masalah semacam ini adalah mengapa operator baru lettable/pipeable disukai.
 – 
cartant
30 November 2017, 10:42

2 jawaban

Untuk berjaga-jaga jika seseorang memiliki masalah yang sama dengan saya.

Masalahnya terkait dengan mengimpor beberapa file *.ts. Misalnya jika Anda mengimpor beberapa objek seperti itu:

import { Observable } from 'rxjs';

Itu salah karena Visual Studio Code tidak akan memberi tahu Anda tentang operator yang hilang. Hal yang sama dengan ng serve.

Jika Anda mengimpor seperti ini:

import { Observable } from 'rxjs/Observable';

Kemudian Visual Studio Code dan ng serve akan memberi tahu Anda tentang operator yang hilang. Jadi berhati-hatilah jika Anda mengimpor from 'rxjs' secara langsung. Lebih baik memfaktorkan ulang semua kode Anda yang berisi impor from 'rxjs' ke sesuatu seperti from 'rxjs/Observable' dll...

2
Marcin Kapusta 30 November 2017, 13:19

Saya mendapatkan pemeriksaan referensi TypeScript dengan operator yang ditambahkan rxjs.

Coba atur "typescript.referencesCodeLens.enabled": true (File/Preferensi/Setelan).

Beberapa pengaturan lain yang mungkin relevan

"typescript.validate.enable": true (with this off, rxjs reference errors aren't shown)
"javascript.validate.enable": true

Ref Ekstensi menggunakan CodeLens

Anda dapat melihat semua kesalahan di tab Masalah (Ctrl+Shift+M).


Trik lain adalah memiliki semua impor rxjs Anda di file tingkat atas dan mengimpornya ke app.module.

import './rxjs-extensions';

rxjs-extensions.js

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subscription } from 'rxjs/Subscription';

import 'rxjs/add/operator/defaultIfEmpty';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/concat';
...

import 'rxjs/add/observable/interval';
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/from';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
0
Richard Matsen 30 November 2017, 12:26
Terima kasih balasannya. Sebenarnya saya menemukan masalah dan saya menjelaskannya dalam jawaban atas pertanyaan saya sendiri. Itu terkait dengan cara saya mengimpor barang dari perpustakaan rxjs. Petunjuk Anda dengan file rxjs-extensions sangat pintar :)
 – 
Marcin Kapusta
30 November 2017, 13:22