angular - «نمیتوان به 'ngbNavItem' متصل شد چون این یک ویژگی شناختهشده برای 'li' نیست» VS Code؟

سناریو:

ما یک برنامهی تولید شده با Angular داریم که از کتابخانههای زیادی استفاده میکند، از جمله: ng-select، angular-fontawesome، ng2-charts، ngx-quill، ng-bootstrap و غیره... هیچ چیز غیر معمولی نیست.

به دلایلی، ng-bootstrap به طور خاص (و چند کتابخانه کوچکتر دیگر) در VS Code مشکل ایجاد میکنند: هر تک کامپوننت/دستورالعمل از کتابخانه خطا نشان میدهد که پیدا نمیشود:

مثالی از استفاده از ngbNav:

<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
</ul>

مسئله:

VS Code با خطاهایی قرمز نشان میدهد که اساساً معتبر نیست:

Can't bind to 'activeId' since it isn't a known property of 'ul'

و: :

There is no directive with "exportAs" set to "ngbNav"

و بله، NgbModule در app.module.ts وارد شده است

  imports: [
    CommonModule,
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    RouterModule,
    BrowserAnimationsModule,
    NgbModule,
    ...
  ]

یک نکته که شاید (تا حدودی) غیرمعمول باشد این است که ما استفاده زیادی از ماژولهای بارگذاری تنبل در برنامه خود داریم.

با این حال، در آن ماژولهای «فرعی» که از این مؤلفهها استفاده میکنند، ما همچنین NgbModule را وارد کردهایم، در فایلهای <module-name>.module.ts.

عجیب بودن:

خود برنامه به خوبی کار میکند: توسعه محلی هیچ خطای کامپایل ندارد، همه اجزای ng-bootstrap بدون مشکل کار میکنند، Lint و تستهای واحد به خوبی اجرا میشوند، برنامه با موفقیت ساخته میشود و هیچ مشکلی در تولید وجود ندارد.

این باعث میشود فکر کنم که ممکن است یک مشکل از eslint یا angular language service در VS Code باشد، اما من تلاش کردهام هر افزونه مرتبط ممکن را دوباره نصب کنم ولی نتیجهای نگرفتهام.

سؤال:

آیا کسی میداند چه چیزی باعث این میشود و چگونه میتوان آن را رفع کرد؟ این مشکلی اساسی ایجاد نمیکند اما اینکه ویرایشگر معتبر باشد به اشکالزدایی و بررسی نحوه استفاده از کتابخانهها کمک میکند.

پاسخ شماره ۱

در کلاس کامپوننت، سعی کنید این ویژگی را اضافه کنید: active=1;

پاسخ شماره ۲

من چیزی که باعث این مشکل در مورد من میشد را پیدا کردم. یک جزء قدیمی در پروژه وجود داشت که دیگر استفاده نمیشد و از بخش declarations: [] در app.module.ts حذف شده بود.

VSCode برای آن خطا گزارش میدهد، حتی اگر دیگر در حال کامپایل شدن در برنامه نباشد. اعلامیه را دوباره به app.module.ts اضافه کنید و «خطاها» ناپدید میشوند. آن را بردارید و دوباره برمیگردند.

در مورد من، من میتوانستم کامپوننت را کاملاً حذف کنم زیرا لازم نبود. این فقط اخیراً پس از ارتقای نسخه انگولار ظاهر شد.