Vscode-ng-language-service: Layanan bahasa Angular tidak melihat komponen dari perpustakaan yang dibangun dengan Ivy.

Dibuat pada 5 Des 2019  ·  23Komentar  ·  Sumber: angular/vscode-ng-language-service

🐞 laporan bug

Paket yang Terkena Dampak

Masalah ini disebabkan oleh paket @ angular / bahasa-layanan

Deskripsi

Layanan bahasa Angular tidak melihat komponen dari perpustakaan yang dibangun dengan Ivy.
Aplikasi dibangun dengan benar.

Kesalahan


'lib-component' is not a known element:
1. If 'lib-component' is an Angular component, then verify that it is part of this module.
2. If 'lib-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng(0)

Lingkungan Hidup


Editor: VisualStudio Code
Editor extension: angular.ng-template v0.900.0

Angular CLI: 9.0.0-rc.5
Node: 10.17.0
OS: darwin x64

Angular: 9.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.0-rc.5
@angular-devkit/build-angular      0.900.0-rc.5
@angular-devkit/build-ng-packagr   0.900.0-rc.5
@angular-devkit/build-optimizer    0.900.0-rc.5
@angular-devkit/build-webpack      0.900.0-rc.5
@angular-devkit/core               9.0.0-rc.5
@angular-devkit/schematics         9.0.0-rc.5
@angular/cdk                       9.0.0-rc.4
@ngtools/webpack                   9.0.0-rc.5
@schematics/angular                9.0.0-rc.5
@schematics/update                 0.900.0-rc.5
ng-packagr                         9.0.0-rc.3
rxjs                               6.5.3
typescript                         3.6.4
webpack                            4.41.2
bug ivy

Komentar yang paling membantu

Apakah ada kemajuan dalam hal ini.

Semua 23 komentar

Memperbarui. Kompiler Ivy tidak membuat file lib-name.metadata.json di project_root/dist/lib-name .
Mungkinkah ini masalahnya?

+1 Saya memiliki masalah yang sama

Pasca versi 9, kita akan mengganti layanan bahasa internal untuk menggunakan compiler Ivy. Sampai saat itu, layanan bahasa perlu bergantung pada metadata.json untuk mengambil informasi tambahan tentang sebuah direktif.

Ya, inilah masalahnya. Untuk mengatasinya saat ini, Anda perlu membangun versi prod dari perpustakaan Anda yang memiliki "enableIvy": false di tsconfig. Ini kemudian menghasilkan file metadata yang dibutuhkan di folder dist.

yaitu ng build lib-component --prod

Tetapi Anda juga perlu memastikan untuk Restart Angular Language service setelah setiap build di vs-code.

Semua informasi ini tidak mudah ditemukan antara plugin vs-code dan angular itu sendiri. Hanya pemberitahuan untuk orang lain yang mengalami masalah yang sama ini.

Asumsi saya itu

@jiverson mengenai solusi Anda ng build lib-component --prod bagi saya menghasilkan kesalahan An unhandled exception occurred: Configuration 'production' is not set in the workspace. dan saya telah melihat bukti di tempat lain bahwa --prod flag untuk perpustakaan tidak lagi relevan. Saya menggunakan @ angular / cli v8.3.25 ... jadi meskipun masalah ini telah dirujuk sebagai kemungkinan duplikat untuk # 665, saya tidak begitu yakin. Ada pemikiran? / cc @ayazhafiz

Ada pembaruan tentang ini? Kami memiliki perpustakaan kami sendiri yang dikembangkan dan diterbitkan dalam ivy bahkan di prod.

Pekerjaan sedang dilakukan untuk memindahkan layanan bahasa ke backend Ivy!

Saya dapat mengonfirmasi bahwa jika Anda melakukannya:

  • membangun perpustakaan dengan ng build my-library --prod dan
  • ctrl + shift + p lalu pilih "Restart Angular Language server"

kesalahan jenis "'xyz' bukan elemen yang dikenal" akan hilang dari proyek induk perpustakaan.

Seperti yang saya pahami, ini karena --prod akan (antara lain) menghasilkan my-library.metadata.json file dalam folder dist yang kemudian akan digunakan oleh server bahasa untuk mengenali pemilih komponen yang ditentukan di perpustakaan saya.

Sekarang, orang akan berharap bahwa jika saya npm publish perpustakaan dibangun dengan ng build my-library --prod dan kemudian npm install perpustakaan itu ke beberapa aplikasi Angular lainnya, server bahasa akan melihat file metadata yang diinstal paket npm (dalam folder node_modules ) dan tidak akan melaporkan "'xyz' bukan elemen yang dikenal".

Namun, ini tidak bekerja seperti yang diharapkan dan aku bisa melihat kesalahan yang sama dalam sebuah proyek yang memiliki npm install ed my-library, meskipun ada file hadir metadata json di folder saya-perpustakaan di node_modules.

Apakah ini bug yang sama seperti dalam masalah ini atau bug yang berbeda?

Atau adakah kombinasi ajaib lain (atau tambahan) dari tombol untuk ditekan atau perintah untuk diberikan ke server bahasa sehingga server memproses npm install ed Perpustakaan sudut dengan benar?

Tampaknya cara baru Ivy bekerja adalah dengan mengandalkan metadata dari file .d.ts dan tidak lagi dari file metadat.json. Satu-satunya alasan mengapa --prod build berfungsi adalah karena tsconfig Anda menyetel enableIvy ke false (seperti yang direkomendasikan oleh angular untuk pustaka yang diterbitkan npm). Ini adalah masalah layanan bahasa dan bukan masalah cli sudut, karena build akan berfungsi dengan baik dengan atau tanpa Ivy untuk aplikasi yang menggunakan library yang diterbitkan.

Masalahnya ada dua:

  1. Ivy menghapus file metadata.json, yang dibutuhkan oleh ALS dan alat lainnya juga
  2. ALS saat ini tidak cukup pintar untuk mendapatkan info dari metadata Ivy alih-alih .metadata.json

Mengapa ini menjadi masalah yang sangat mengganggu?

  • Ivy adalah cara yang harus dilakukan, dan pengembang perpustakaan juga akan melakukannya,
  • saat membuat perpustakaan di proyek aplikasi berbasis Ivy Anda, Anda masih ingin menggunakan Ivy ujung ke ujung di aplikasi Anda sambil tetap menjadi warga negara yang baik dan menerbitkan perpustakaan Anda yang dapat digunakan kembali ke npm agar orang lain dapat menggunakannya.
  • sebagian besar pengembang menggunakan tautan npm atau mengarahkan tsconfig ke direktori dist library untuk diimpor selama pengembangan aplikasi, bagaimanapun juga itu cara yang jelas,
  • sangat menjengkelkan memiliki vscode menandai hal-hal di perpustakaan Anda sebagai tidak diketahui,

Inilah yang akhirnya saya lakukan untuk mengatasi masalah ini, yang mungkin dapat diterima oleh beberapa orang dalam situasi yang sama. Ini tidak akan membantu orang yang ingin menggunakan perpustakaan terbitan mereka di bawah kondisi yang sama sebagai pengguna perpustakaan tersebut (yaitu dari paket npm yang diterbitkan):

Dengan asumsi Anda menggunakan monorepo atau struktur serupa di mana kode sumber pustaka yang dapat diterbitkan dapat diakses secara konsisten untuk aplikasi yang menggunakannya.

Mari kita asumsikan paket itu disebut 'happy-library' ...

  1. Bangun (dengan --prod) dan publikasikan paket perpustakaan ke npm seperti biasa. Anda harus menggunakan --prod dan menonaktifkan Ivy dalam konfigurasi build,
  2. Perbarui tsconfig.json di root ruang kerja (atau vscode tidak akan menemukannya ...) untuk menambahkan pemetaan jalur ke paket itu, dengan menunjuk ke direktori sumber paket.
  3. Impor paket dalam kode aplikasi seolah-olah dari node_modules, yaitu import {whatever} from 'happy-library';
    "paths": {
      "happy-library": ["libs/happy-library/src/index.ts"]
    }

Memang tidak sempurna, tapi setidaknya saya bisa menggunakan library saya sendiri di aplikasi Ivy end-to-end, juga buatan saya, tanpa error di vscode, sambil tetap berbagi kasih dan mempublikasikannya ke NPM untuk pengguna lain, dan saya tidak harus terus-menerus mengaitkan / npm link dan men-debug mengapa ALS tidak berfungsi.

Tertarik dengan umpan balik jika saya mungkin melewatkan sesuatu ...

PS: repo yang berfungsi penuh dengan metode ini di https://github.com/abdes/happy-coding

Apakah ada kemajuan dalam hal ini.

Tampaknya ini akan tersedia untuk pengujian beta di Angular 11 yang dijadwalkan pada November.

Lihat https://github.com/angular/vscode-ng-language-service/issues/335#issuecomment -693545000

Saya menjalankan Angular 11 dalam proyek saya (perpustakaan juga dibangun dengan Angular 11, dengan bendera --prod), dan saya memiliki masalah yang dijelaskan oleh @nprasovict . Saya menerbitkan perpustakaan saya pada paket Gitlab, dan ketika saya menginstalnya di proyek kami dengan npm install , Layanan Bahasa Angular tidak mengenali komponen saya yang diekspor yang berasal dari perpustakaan saya. Sepertinya ini sudah menjadi masalah untuk waktu yang sangat lama, kapan kami berharap masalah ini bisa diselesaikan?

Saya pikir saya hanya akan menghapus ekstensi VSCode untuk saat ini, tetapi saya akan kehilangan pengembangan yang kuat hanya karena ini ...

@JonWallsten Terima kasih, jadi akan segera dirilis jika saya mengerti dengan baik

Ini telah diperbaiki oleh layanan bahasa Ivy-native baru, dirilis di v11.1.0 .

Kerja luar biasa, @kyliau!
Saya melihat banyak kesalahan baru dalam templat ketika datang ke pemeriksaan nol yang ketat dan yang kami lewatkan, sangat bagus!

@kyliau Hmmmm ... itu aneh. Saya mengalami masalah yang sama dengan arahan yang dideklarasikan di perpustakaan dan saya menyelesaikannya dengan mengikuti saran untuk membangun perpustakaan dengan tombol --prod. Masalahnya adalah saya sudah menggunakan ALS 11.1.1 , jadi secara teori ini tidak perlu menjadi masalah lagi, bukan?
Proyek ini adalah multi-proyek CLI biasa, dengan beberapa libs dan sebuah aplikasi.
Tidak yakin tentang npm menghubungkan ... Saya tidak melakukan sesuatu yang khusus. Path perpustakaan terdaftar di root tsconfig.json.

Saya memiliki masalah yang sama. Saya membangun lib saya dengan flag --prod , sehingga ivy dinonaktifkan.
Menautkan folder library dist, menautkan paket ke aplikasi saya dan mengimpor libmodule. Tetapi masih mendapatkan kesalahan ini, bahwa itu bukan elemen sudut yang diketahui.
Komponen di lib ada di array declarations dan di array exports .

Komponen ditampilkan, tetapi masih mendapatkan kesalahan ini di vscode. versi yang diuji:

11.1.3
11.2.1
0.1100.4

Saya setuju, ini mungkin tidak boleh ditutup @kyliau ... Saya memiliki contoh yang dapat direproduksi minimal yang saya buat untuk masalah lain yang mungkin berfungsi untuk menunjukkan yang ini juga. Lihat ini: https://github.com/vicatcu/monorepo-example-error (awalnya diposting sehubungan dengan posting SO ini )

Saya akan melangkah lebih jauh, jika saya menambahkan opsi "enableIvy": false bawah angularCompilerOptions di tsconfig.lib.json apropos komentar ini , seperti yang telah saya lakukan pada cabang repo contoh saya ini , kesalahan saya hilang di vscode (diberikan proyek contoh saya masih rusak dalam beberapa hal yang saya tidak mengerti)

Hanya untuk memperjelas, menggunakan v11.1.x tidaklah cukup, Anda harus mengaktifkan mode Ivy dengan mengikuti petunjuk di sini .
Anda tidak perlu mengubah tsconfig.*.json .
Fakta bahwa ... is not a known angular element muncul berarti Anda tidak dalam mode Ivy.
Untuk menentukan mode mana yang Anda gunakan, buka panel Output dan cari layanan bahasa Angular. Ini harus menyebutkan Ivy. (lihat gambar di bawah).
Proyek Anda tidak harus menggunakan Ivy untuk menggunakan layanan bahasa Ivy, tetapi Anda harus menggunakan Angular> = v9.

Screen Shot 2021-02-01 at 3 15 40 PM

Jika setelah memverifikasi semua hal di atas dan ekstensi masih tidak berfungsi seperti yang diharapkan, buka masalah baru untuk membantu kami melakukan triase dan mengurangi kebisingan. Terima kasih banyak!

@kyliau terima kasih saya, untuk satu, pasti melewatkan itu.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat