web-dev-qa-db-ja.com

カスタムライブラリコンポーネントは既知の要素ではありませんが、アプリをコンパイルして実行します

問題

私のhtmlファイルは、カスタムコンポーネント/パイプが「既知の要素ではない」ことを警告しています。ただし、アプリケーションのビルドと実行意図したとおりに機能、およびカスタムコンポーネント/パイプは機能します。コンポーネントの二分法は機能しますが、エラーとして表示するのは煩わしく、操作が難しい場合があります。これは小さなことですが、エラーが発生していないときにHTMLファイルにエラーが表示されないようにしたいのです。

概要

2つの異なるangularプロジェクトがあります。angularライブラリを自分のangularアプリケーションで使用します。ライブラリはいくつかのカスタムをエクスポートしますアプリケーションが使用するコンポーネント、パイプ、サービス。npmを介してこのライブラリを公開していません。代わりにnpm-linkを使用して、アプリケーションにライブラリへのアクセスを許可しています。これは、アプリケーションコンポーネントで定義されているサービス/コンポーネントが機能するように機能するようですライブラリからテンプレートファイルに何かを入れた瞬間、そのセレクターに下線が引かれ、警告が表示されます。

ファイル

/*Library Module*/
@NgModule({
  declarations: [
    ThemeToggleComponent,
    // Other custom components/pipes
  ],
  exports: [
    ThemeToggleComponent,
    // Other components needed in templates files
  ]
})
export class MyCommonModule {}


/*
 * Public API Surface of my-common library
 */

export * from './lib/my-common.module';
/*
 * Many other components, services, pipes, etc etc
 */
export * from './lib/theme-toggle/theme-toggle.component';


/* Consuming Application module */
import { MyCommonModule } from 'my-common';

@NgModule({
  imports: [
    MyCommonModule,
  ],
  declarations: [
    MyComponent,
  ],
})
export class MyModule {}

/* Template of MyComponent, my.component.html */
<div>
  <my-theme-toggle (darkThemeSelected)="toggleTheme($event)"></my-theme-toggle>
</div>

上記のファイルには、カスタムコンポーネントを参照するすべての行が赤で下線が引かれ、エラーメッセージが表示されます'my-theme-toggle' is not a known element：...。

修正しようとする試み

私は何かを試しましたが、役に立ちません

  • NPMリンクを使用せず、ng-packagrによって作成されたライブラリをアプリケーションのノードモジュールにコピーするだけ
  • すべての再構築と再リンク/再起動
  • 他のS.Oに関する質問の検索：ほとんどの質問は、インポート/エクスポートが実際に正しくなかったため、ビルドの失敗に関するものです。

私の直感

これは、消費するアプリケーションのtsconfig.jsonにあるpathsコンパイラオプションの問題だと思います。私のすべての研究を通して、これは他の何よりも浮かび上がる1つのことです。すべてが機能しているため、現在パスを設定していません。私の共通ライブラリは、この問題以外は、他のnode_moduleライブラリと同じように見え、動作します。

私のもう1つの考えは、すべてが機能して実行されるため、vs-codeがインポートまたはその性質の何かを理解していないことに問題がある可能性があるということです。これはありそうもないと思いますが。

背景

両方angularプロジェクトはバージョン9、rc7にあります。私はng-packagrを使用してライブラリをビルドしています。ビジュアルスタジオコードを使用しており、執筆時点では最新のリリースを使用しています。

htmlangulartypescriptnpmvisual-studio-code
9
Zen

私は最近までそのようなエラーを説明したことがありませんでした。

Angular言語サービス拡張機能（最近インストールしたもの）をアンインストールした後）はエラーがなくなりました。

1
Wolf359

この問題を修正するには、現在、生産フラグ--prodを使用してビルドする必要があります。これは、現在の状態では Angular Language ServerはIvyでは機能しない ビルドであるためです。デフォルトでは、angular prodビルドはIvyなしでビルドされます。したがって、ビルドされると、lib.metadata.jsonファイルが作成されます。これは、言語サーバーがプラグインを機能させるために使用するファイルです。

  1. ライブラリで、ビルドを作成しますng build <lib> --prod
    • --watchフラグを追加して、変更を監視します
  2. ライブラリにリンクを作成しますcd dist次にnpm link
    • 私のlibには複数のモジュールが含まれているため、distフォルダーにpackage.jsonを作成し、そこにリンクを作成しました。これはあなたができるようになります
      • import { ModuleAComponent } from '<lib>/moduleA'
      • import { ModuleADirective } from '<lib>/moduleA'
    • 注：リンクするフォルダにはpackage.jsonが必要です。それ以外の場合は、最も近いのでプロジェクトのルートを使用しますpackage.json
    • 同じことを行うと、以下のパスは正しい形式になります。そうでない場合は、正しくない可能性があります。"lib": ["./node_modules/lib", "./node_modules/lib/*"]
  3. アプリケーションで、パッケージへのリンクnpm link <lib>
  4. アプリケーションでpathをtsconfig.base.jsonに作成します（パスはリンクの作成方法によって異なる場合があります）
  5. アプリケーションで、Angular Language Serverを再起動します
{
  "compilerOptions": {
    "paths": {
      "lib/*": [
        "./node_modules/lib/*"
      ]
    }
  }
}
0
Get Off My Lawn

まったく同じ問題があります。ここに修正があります、

追加

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

そして

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

あなたのモジュールに

完了 app.module.ts ご参考に

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgNiceSelectModule } from 'ng-Nice-select';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgNiceSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule { }
0
ramzan ali