سبب المشكلة هو 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
تحديث. لا يقوم برنامج التحويل البرمجي 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
وسيختفي الخطأ (الأخطاء) من النوع "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 لتطبيق يستخدم المكتبة المنشورة.
المسألة ذات شقين:
لماذا هذه قضية مزعجة للغاية؟
إليكم ما انتهي به الأمر للتغلب على هذه المشكلة ، والتي قد تكون مقبولة لدى بعض الأشخاص في نفس الظروف. لن يساعد الأشخاص الذين يرغبون في استخدام مكتباتهم القابلة للنشر في ظل نفس الظروف التي يستخدمها مستخدم هذه المكتبات (أي من حزمة npm المنشورة):
بافتراض أنك تستخدم monorepo أو بنية مشابهة حيث يمكن الوصول إلى التعليمات البرمجية المصدر للمكتبة القابلة للنشر بطريقة متسقة للتطبيق الذي يستخدمها.
لنفترض أن الحزمة تسمى "happy-library" ...
tsconfig.json
في جذر مساحة العمل (أو لن يقوم vscode بإدراك ذلك ...) لإضافة تعيين مسار إلى تلك الحزمة ، مشيرًا إلى الدليل المصدر للحزمة.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 في الوقت الحالي ، لكنني سأفقد تطورًا قويًا لمجرد هذا ...
@ schankam : https://github.com/angular/vscode-ng-language-service/issues/457#issuecomment -725569238
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.
إذا بعد التحقق من كل ما سبق ولا يزال الامتداد لا يعمل كما هو متوقع ، فيرجى فتح مشكلة جديدة لمساعدتنا في الفرز وتقليل الضوضاء. شكرا جزيلا!
@ kyliau شكرا أنا ، من أجل واحد ، بالتأكيد فاتني ذلك.
التعليق الأكثر فائدة
هل تم إحراز أي تقدم في هذا الشأن.