Vscode-ng-language-service: لا ترى خدمة اللغة الزاوية مكونات من مكتبة مبنية باستخدام Ivy.

تم إنشاؤها على ٥ ديسمبر ٢٠١٩  ·  23تعليقات  ·  مصدر: angular/vscode-ng-language-service

🐞 تقرير الشوائب

الحزمة المتضررة

سبب المشكلة هو package @ angular / language-service

وصف

لا ترى خدمة اللغة الزاوية مكونات من مكتبة مبنية باستخدام Ivy.
تم بناء التطبيق بشكل صحيح.

خطأ


'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
bug ivy

التعليق الأكثر فائدة

هل تم إحراز أي تقدم في هذا الشأن.

ال 23 كومينتر

تحديث. لا يقوم برنامج التحويل البرمجي Ivy بإنشاء ملف lib-name.metadata.json في project_root/dist/lib-name .
هل يمكن أن تكون هذه هي المشكلة؟

+1 لدي نفس المشكلة

بعد الإصدار 9 ، سنقوم بتبديل الأجزاء الداخلية لخدمة اللغة لاستخدام مترجم Ivy. حتى ذلك الحين ، ستحتاج خدمة اللغة إلى الاعتماد على metadata.json لاسترداد معلومات إضافية حول التوجيه.

نعم هذه هي القضية. لحل هذه المشكلة في الوقت الحالي ، ستحتاج إلى إنشاء نسخة prod من مكتبتك التي تحتوي على "enableIvy": false في tsconfig. يقوم هذا بعد ذلك بإنشاء ملف البيانات الوصفية المطلوب في مجلد التوزيع.

أي ng build lib-component --prod

ولكن عليك أيضًا التأكد من الحصول على Restart Angular Language service بعد كل بناء في vs-code.

لا يمكن العثور على كل هذه المعلومات بسهولة بين المكون الإضافي vs-code والزاوية نفسها. مجرد تنبيه لأي شخص آخر يعاني من نفس المشكلة.

افترض أن

jiverson بخصوص الحل البديل الخاص بك ng build lib-component --prod بالنسبة لي ينتج خطأ An unhandled exception occurred: Configuration 'production' is not set in the workspace. وقد رأيت دليلًا في مكان آخر على أن علامة --prod للمكتبات لم تعد ذات صلة. أنا أستخدم @ angular / cli v8.3.25 رغم ذلك ... لذلك بينما تمت الإشارة إلى هذه المشكلة على أنها نسخة مكررة محتملة لـ # 665 ، لست متأكدًا من ذلك. أي أفكار؟ / ccayazhafiz

أي تحديثات على هذا؟ لدينا مكتباتنا الخاصة التي تم تطويرها ونشرها باللبلاب حتى في الإنتاج.

يجري العمل على نقل خدمة اللغة إلى خلفية Ivy!

يمكنني أن أؤكد أنه إذا قمت بما يلي:

  • أنشئ مكتبة ng build my-library --prod و
  • ctrl + shift + p ثم حدد "Restart Angular Language server"

سيختفي الخطأ (الأخطاء) من النوع "xyz" ليس عنصرًا معروفًا "من المشروع الرئيسي للمكتبة.

كما فهمت ذلك لأن --prod سوف (من بين أمور أخرى) توليد my-library.metadata.json الملف في dist المجلد التي سوف ثم يتم استخدامها من قبل خادم لغة إلى أي الاعتراف محددات المكون المحدد في مكتبتي.

الآن ، يتوقع المرء أنه إذا تم إنشاء مكتبة npm publish باستخدام ng build my-library --prod ثم npm install تلك المكتبة في تطبيق Angular آخر ، فإن خادم اللغة سيرى ملف البيانات الوصفية في ذلك المثبت حزمة npm (في المجلد node_modules ) ولن تعلن أن "xyz" ليس عنصرًا معروفًا ".

ومع ذلك، هذا لا يعمل كما هو متوقع وأستطيع أن أرى نفس الخطأ في مشروع يحتوي npm install الطبعة بلدي المكتبة، على الرغم من وجود ملف التعريف سلمان موجودة في مجلد بلدي مكتبة في node_modules.

هل سيكون هذا هو نفس الخطأ الموجود في هذه المشكلة أم خطأ مختلف؟

أم أن هناك مجموعة سحرية أخرى (أو إضافية) من المفاتيح للضغط عليها أو أوامر لإعطاءها لخادم اللغة بحيث يعالج مكتبات Angular npm install ed بشكل صحيح؟

يبدو أن الطريقة الجديدة التي يعمل بها Ivy هي الاعتماد على البيانات الوصفية من ملفات .d.ts ولم تعد من ملفات metadat.json. السبب الوحيد وراء عمل --prod build هو أن tsconfig الخاص بك يضبط enableIvy على false (كما أوصت به angular للمكتبات المنشورة npm). هذه مشكلة في خدمة اللغة وليست مشكلة زاوية cli ، حيث سيعمل الإصدار بشكل جيد مع أو بدون Ivy لتطبيق يستخدم المكتبة المنشورة.

المسألة ذات شقين:

  1. يزيل Ivy ملفات metadata.json المطلوبة بواسطة ALS والأدوات الأخرى أيضًا
  2. ALS ليس ذكيًا حاليًا بما يكفي للحصول على المعلومات من البيانات الوصفية لـ Ivy بدلاً من .metadata.json

لماذا هذه قضية مزعجة للغاية؟

  • Ivy هو السبيل للذهاب ، وسيجعل مطورو المكتبات الطريق الصحيح أيضًا ،
  • عند إنشاء مكتبة في مشروع التطبيق المستند إلى Ivy ، ما زلت تريد استخدام Ivy طرفًا إلى طرف في تطبيقك بينما تظل مواطنًا صالحًا وتنشر مكتبتك القابلة لإعادة الاستخدام إلى npm ليستخدمها الآخرون.
  • يستخدم معظم المطورين رابط npm أو يوجهون tsconfig إلى دليل توزيع المكتبة للاستيراد أثناء تطوير التطبيق ، وهذه هي الطريقة الواضحة على أي حال ،
  • إنه أمر مزعج للغاية أن تقوم vscode بوضع علامة على الأشياء في مكتبتك على أنها غير معروفة ،

إليكم ما انتهي به الأمر للتغلب على هذه المشكلة ، والتي قد تكون مقبولة لدى بعض الأشخاص في نفس الظروف. لن يساعد الأشخاص الذين يرغبون في استخدام مكتباتهم القابلة للنشر في ظل نفس الظروف التي يستخدمها مستخدم هذه المكتبات (أي من حزمة npm المنشورة):

بافتراض أنك تستخدم monorepo أو بنية مشابهة حيث يمكن الوصول إلى التعليمات البرمجية المصدر للمكتبة القابلة للنشر بطريقة متسقة للتطبيق الذي يستخدمها.

لنفترض أن الحزمة تسمى "happy-library" ...

  1. أنشئ (باستخدام --prod) وانشر حزمة المكتبة إلى npm كالمعتاد. يجب استخدام --prod وتعطيل Ivy في تكوين الإنشاء ،
  2. قم بتحديث tsconfig.json في جذر مساحة العمل (أو لن يقوم vscode بإدراك ذلك ...) لإضافة تعيين مسار إلى تلك الحزمة ، مشيرًا إلى الدليل المصدر للحزمة.
  3. قم باستيراد الحزمة في كود التطبيق كما لو كانت من node_modules ، أي import {whatever} from 'happy-library';
    "paths": {
      "happy-library": ["libs/happy-library/src/index.ts"]
    }

إنه ليس مثاليًا ، لكن على الأقل يمكنني استخدام مكتبتي الخاصة في تطبيق Ivy من طرف إلى طرف ، تم إنشاؤه بواسطتي أيضًا ، بدون أخطاء في vscode ، مع الاستمرار في مشاركة الحب ونشره على NPM للمستخدمين الآخرين ، وأنا لست مضطرًا إلى ربط ارتباط / npm باستمرار وتصحيح سبب عدم عمل ALS.

مهتم بالتعليقات إذا فاتني شيء ما ...

ملاحظة: يعمل الريبو بشكل كامل مع هذه الطريقة على https://github.com/abdes/happy-coding

هل تم إحراز أي تقدم في هذا الشأن.

يبدو أن هذا سيكون متاحًا للاختبار التجريبي على Angular 11 المقرر في نوفمبر.

راجع https://github.com/angular/vscode-ng-language-service/issues/335#issuecomment -693545000

أنا أعمل على Angular 11 في مشروعي (مكتبة مبنية أيضًا مع Angular 11 ، مع علامة --prod) ، ولديّ المشكلة من nprasovict . لقد قمت بنشر مكتبتي على حزم Gitlab ، وعندما أقوم بتثبيتها في مشروعنا باستخدام npm install ، لا تتعرف Angular Language Service على المكونات التي تم تصديرها من مكتبتي. يبدو أنها كانت مشكلة منذ فترة طويلة جدًا الآن ، متى نتوقع حلها؟

أعتقد أنني سأنتهي في النهاية بإزالة امتداد VSCode في الوقت الحالي ، لكنني سأفقد تطورًا قويًا لمجرد هذا ...

JonWallsten شكرًا ، لذلك سيتم إصداره قريبًا إذا فهمت جيدًا

تم إصلاح ذلك من خلال خدمة اللغة الأصلية Ivy ، التي تم إصدارها في الإصدار 11.1.0 .

عمل رائع ، kyliau!
أرى الكثير من الأخطاء الجديدة في القالب عندما يتعلق الأمر بفحص صارم فارغ وهذا ما فقدناه ، إنه أمر رائع حقًا!

MustafaHosny اللهم امين ... كنت أواجه نفس المشكلة مع توجيه معلن في مكتبة وقمت بحلها باتباع اقتراح بناء المكتبة باستخدام مفتاح --prod. الشيء هو أنني موجود بالفعل على ALS 11.1.1 ، لذلك من الناحية النظرية لن يكون هذا مشكلة بعد الآن ، أليس كذلك؟
المشروع عبارة عن مشروع CLI منتظم متعدد المشاريع ، مع بعض libs وتطبيق.
لست متأكدًا من ربط npm ... لم أفعل أي شيء خاص. يتم سرد مسار المكتبة في الجذر tsconfig.json.

لدي نفس المشكلة. أقوم بإنشاء lib الخاص بي بعلامة --prod ، بحيث يتم تعطيل لبلاب.
ربط مجلد مكتبة dist ، وربط الحزمة بتطبيقي واستيراد الوحدة libmodule. لكن لا يزال هناك هذا الخطأ ، لأنه ليس عنصرًا زاويًا معروفًا.
المكون الموجود في lib موجود في declarations وفي المصفوفة exports .

يتم عرض المكون ، ولكن لا يزال يتم الحصول على هذا الخطأ في vscode. الإصدارات المختبرة:

11.1.3
11.2.1
0.1100.4

أوافق ، ربما لا ينبغي إغلاق هذاkyliau ... لدي مثال بسيط قابل للتكرار صنعته لمشكلة أخرى قد تفيد في توضيح هذه المشكلة أيضًا. ألق نظرة على هذا: https://github.com/vicatcu/monorepo-example-error (تم نشره في الأصل في اتصال مع منشور SO هذا )

سأذهب خطوة أخرى إلى الأمام ، إذا أضفت الخيار "enableIvy": false ضمن angularCompilerOptions في tsconfig.lib.json apropos هذا التعليق ، كما فعلت في هذا الفرع من نموذج الريبو الخاص بي ، أخطائي تتلاشى في vscode (تم منح مشروعي كمثال لا يزال معطلاً بطريقة ما لا أفهمها)

فقط للتوضيح ، كونك على v11.1.x ليس كافيًا ، عليك تمكين وضع Ivy باتباع التعليمات هنا .
لا يجب عليك تغيير tsconfig.*.json .
حقيقة ظهور ... is not a known angular element تعني أنك لست في وضع Ivy.
لتحديد الوضع الذي تستخدمه ، انتقل إلى لوحة Output وابحث عن خدمة اللغة Angular. يجب أن يذكر Ivy. (انظر لقطة الشاشة أدناه).
ليس من الضروري أن يستخدم مشروعك Ivy لاستخدام خدمة اللغة Ivy ، ولكن يجب عليك استخدام Angular> = v9.

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

إذا بعد التحقق من كل ما سبق ولا يزال الامتداد لا يعمل كما هو متوقع ، فيرجى فتح مشكلة جديدة لمساعدتنا في الفرز وتقليل الضوضاء. شكرا جزيلا!

@ kyliau شكرا أنا ، من أجل واحد ، بالتأكيد فاتني ذلك.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات