Vscode-ng-language-service: لم يتم اكتشاف مكونات الوحدات النمطية المعاد تصديرها بواسطة خدمة اللغة في قوالب HTML

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

نظرًا لأن angular / material2-2.0.0-beta.3 أعلنت أن MaterialModule الذي قام بتصدير جميع مكونات المواد سيتم إهماله في الإصدار التالي ، فقد قررت اتباع نصائحهم وإنشاء تطبيق خاص بي AppMaterialModule حيث قمت فقط بتضمين وحدات المواد التي أستخدمها واحدة تلو الأخرى.

// app-material.module.ts
import { NgModule } from '@angular/core';
import {
  MdInputModule,
  etc...
} from '@angular/material'

@NgModule({
  imports: [],
  exports: [
    MdInputModule,
    etc...
  ],
  declarations: [],
  providers: [],
})
export class AppMaterialModule { }

هذا هو ملفي أيضًا app.module.ts :

@NgModule({
  imports: [
    CoreModule,
    AppMaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    AppRoutingModule,
    SharedModule.forRoot()
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

لقد اختبرت تطبيقي وهو يعمل بنفس الطريقة التي استخدمها قبل استبدال MaterialModule . ومع ذلك ، عندما فتحت ملف قالب HTML ، لاحظت وجود أخطاء في جميع مكونات المواد المستخدمة.

كلهم لديهم نفس الخطأ:

[Angular]
'md-input-container' is not a known element:
1. If 'md-input-container' is an Angular component, then verify that it is part of this module.
2. If 'md-input-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

ng-lang-service-bug

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

bug

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

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

chuckjaz : لقد https://github.com/mjamin/vscode-ng-language-service-repro

يعرّف tsconfig.json تعيين المسار الذي يتم استخدامه في app.module.ts لاستيراد BarModule . لم تتعرف خدمة اللغة في app.component.html على المكون المُعلن عنه في هذه الوحدة

ال 22 كومينتر

هل يمكنك أن ترسل لي رابطًا إلى مستودع يعيد إنتاج هذه المشكلة أو إرفاق ملف .zip يمكنني فك ضغطه يوضح ذلك؟

التحقق من أنني واجهت هذه المشكلة بالضبط في VSCode باتباع نفس التوصية (إنشاء وحدة مادة خاصة بالتطبيق) مثل @ tsvetan-ganev.

chuckjaz ، إليك مشروع مضغوط قمت بتنزيله من plnkr لأنني لم أتمكن من معرفة كيفية مشاركة الرابط إلى المشروع الفعلي هناك. نأسف للإزعاج ولكنني قضيت 20 دقيقة حرفيًا في محاولة مشاركة رابط لمشروعي.
ng-material.zip

@ tsvetan-ganev لم أتمكن من إعادة إظهار المشكلة التي تواجهها مع ملف .zip الذي قدمته لأنه لا يحتوي على مشروع كامل. هل يمكنك تضمين ملف يحتوي على ملفات package.json و tsconfig.json صالحة؟

لقد وجدت ما قد يكون خطأً ذا صلة ، https://github.com/angular/angular/issues/15969. كان هذا بسبب عدم تثبيت @angular/animations بجانب @angular/material .

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

chuckjaz : لقد https://github.com/mjamin/vscode-ng-language-service-repro

يعرّف tsconfig.json تعيين المسار الذي يتم استخدامه في app.module.ts لاستيراد BarModule . لم تتعرف خدمة اللغة في app.component.html على المكون المُعلن عنه في هذه الوحدة

mjamin هل لديك أي إصلاح حتى الآن؟

أواجه هذه المشكلة أيضًا. يبدو أنه يحدث عند وجود وحدات نمطية مشتركة تقوم باستيرادها إلى كل مكون أيضًا. يبدو أن الخدمة تتجاهل التعريفات التي توفرها الوحدات النمطية المستوردة التي يتم إعادة تصديرها. لقد أنشأت وحدة مشتركة تعيد تصدير العناصر التي تستوردها وتعلن عنها (بما في ذلك CommonModule ، وحدة واحدة معنية) ، وعندما أقوم باستيراد هذه الوحدة إلى وحدات أخرى ، تفهم Angular (4) الواردات ، لكن Angular Language Service لا يمكنها العثور عليها CommonModule أو المكون المخصص الخاص بي ، على الرغم من أنه تم تصديرهما في الوحدة النمطية المشتركة الخاصة بي.

chuckjazmjamin لقد تقدمت استنساخ آخر من القضية وجدت أن أكثر عن كثب (على ما أظن) تطابق وصف https://github.com/Nerketur/shared-ng-module-test

لا يبدو أن له أي علاقة بخيارات المترجم ، لأن هذا المشروع بأكمله يستخدم كل شيء افتراضيًا.

عندما قلت إن ALS لا يمكنه العثور على CommonModule / المكون المخصص الخاص بك ، هل تقصد أن الإكمال التلقائي لـ ALS لا يعمل عندما تحاول استخدام مكون CommonModule / المخصص؟

الإكمال التلقائي لا يعمل ، وتظهر خطوط خطأ حمراء مع الخطأ:
"[الزاوي]
"اختبار التطبيق" ليس عنصرًا معروفًا:

  1. إذا كان "اختبار التطبيق" مكونًا Angular ، فتأكد من أنه جزء من هذه الوحدة.
  2. إذا كان "اختبار التطبيق" أحد مكونات الويب ، فقم بإضافة "CUSTOM_ELEMENTS_SCHEMA" إلى "@ NgModule.schemas" لهذا المكون لمنع هذه الرسالة. "

(باستخدام الريبو الذي قدمته للتو)

أنا بصدد تحويل هذا المشروع لاستخدام بنية البرنامج المساعد المطبعية الجديدة وكنت بطيئًا في البحث عن هذه الأخطاء. اسف بشأن ذلك.

سوف أتجاوز الأعمال المتأخرة بمجرد فرز بنية البرنامج المساعد.

تضمين التغريدة ممتن لأنك بذلت الكثير من الجهد في ذلك. على وشك تجهز ؛)

هل هناك حل لهذا؟

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

أعتقد أن هذا يعمل على حل المشكلة: https://github.com/angular/vscode-ng-language-service/issues/108

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

@ tx8821 التي عملت شكرا لكم. جيد بما يكفي الآن! أنا سعيد لأنني أستطيع استخدامه مرة أخرى ، وهو أفضل ميزة من الإصدار 4 إلى حد بعيد!

@ tx8821 شكرا لك على الحل! لكن هذا ليس حلاً ، هذا مجرد عكاز آخر في الكود. سوف ننتظر الإصلاح الحقيقي

مع وجود نفس المشكلة ، أود أن أرى إصلاحًا مقابل استخدام المسارات النسبية (لاف!). شكرا لعملكم الشاق حتى الآن! :)

أحضرني تطبيق Ionic 4 متعدد التطبيقات (monorepo) إلى هنا.
للأسف ، تتطلب Ionic حزمة. json لكل تطبيق. بمعنى آخر: لدي 3 مشاريع في مشروع واحد. 2 تطبيقات والجذر. كل حزمة json متساوية إلى حد ما. على أي حال ... هذا هو هيكل مساحة العمل الخاصة بي (مقتطف):

root
|- apps
|  |- app1
|  |  |- package.json
|  |  |- tsconfig.json
|  |- app2
|     |- package.json
|     |- tsconfig.json
|- lib
|  |- (export stuff like components)
|- package.json
|- tsconfig.json
|- angular.json (with all apps defined)

tsconfig.json لأحد التطبيقات:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@lib/*": ["../../lib/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

يمكنني استيراد HelloWorldComponent من lib.
لكن في لغة تأشير النص الفائق أتلقى الخطأ:

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

يجب أن تعمل Angular-Language-Service لأنه تم الإعلان عن HelloWorldComponent في app.module.ts. عجيب. ربما يكون ذلك بسبب أن المجلد خارج تطبيق src؟ مسار الاسم المستعار @lib هو مجرد اختصار. لقد جربته أيضًا بدون الاستيراد المباشر للمكون. لا يزال خطأ.

ربما يجب أن تكون هذه مشكلة جديدة؟

اعتدنا على تنفيذ منطق مخصص لاكتشاف tsconfig.json وتحليله ، وتعيينات المسار المفقودة في العملية.
لم يعد هذا هو الحال مع التمديد الجديد الذي صدر اليوم.
نظرًا لأن الإصدار الأصلي يزيد عن عامين ، أود إغلاقه.
يرجى تقديم مشكلة جديدة إذا استمر السلوك المماثل في الامتداد الجديد.
شكرا جزيلا!

تم قفل هذه المشكلة تلقائيًا بسبب عدم النشاط.
يرجى تقديم مشكلة جديدة إذا كنت تواجه مشكلة مشابهة أو ذات صلة.

اقرأ المزيد حول سياسة قفل المحادثة التلقائي .

_تم تنفيذ هذا الإجراء تلقائيًا بواسطة روبوت.

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