Masalah ini disebabkan oleh paket @ angular / bahasa-layanan
Layanan bahasa Angular tidak melihat komponen dari perpustakaan yang dibangun dengan Ivy.
Aplikasi dibangun dengan benar.
'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)
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
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:
ng build my-library --prod
dankesalahan 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:
Mengapa ini menjadi masalah yang sangat mengganggu?
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' ...
tsconfig.json
di root ruang kerja (atau vscode tidak akan menemukannya ...) untuk menambahkan pemetaan jalur ke paket itu, dengan menunjuk ke direktori sumber paket.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 ...
@schankam : https://github.com/angular/vscode-ng-language-service/issues/457#issuecomment -725569238
@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.
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.
Komentar yang paling membantu
Apakah ada kemajuan dalam hal ini.