사용자 지정 라이브러리 구성 요소는 알려진 요소가 아니지만 앱이 컴파일 및 실행됩니다.

사용자 지정 라이브러리 구성 요소는 알려진 요소가 아니지만 앱이 컴파일 및 실행됩니다.

문제

HTML 파일에서 사용자 지정 구성 요소/파이프가 '알 수 있는 요소가 아닙니다'라고 경고합니다.그러나 애플리케이션을 빌드하고 실행하면 의도한 대로 작동하며 사용자 지정 구성 요소/파이프가 작동합니다.작동하지만 오류로 표시되는 구성 요소의 이분법은 성가시고 다루기 어려울 수 있습니다.이것이 작은 일이라는 것을 알지만, 오류가 없을 때 HTML 파일에 오류가 표시되지 않기를 바랍니다.

요약

저는 두 개의 뚜렷한 각도 프로젝트가 있습니다. 각도 라이브러리는 제 각도 응용 프로그램으로 사용합니다.라이브러리는 응용 프로그램이 사용하는 여러 사용자 지정 구성 요소, 파이프 및 서비스를 내보냅니다.나는 이 라이브러리를 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-togle'은 알려진 요소가 아닙니다. ...알 수 없는 경우 모듈의 일부인지 확인하십시오.

수정 시도

여러 가지 시도를 해봤지만 소용이 없었습니다.

• NPM 링크를 사용하지 않고 ng-packagr에 의해 만들어진 라이브러리를 내 애플리케이션의 노드 모듈에 복사하는 것.
• 모든 항목 재구축 및 재링크/재시작
• 다른 S.O 질문 검색: 가져오기/내보내기가 실제로 잘못되었기 때문에 대부분의 질문은 빌드 실패에 대한 것입니다.

아이고!

저는 이것이 소비 애플리케이션의 tsconfig.json 경로 컴파일러 옵션의 문제라고 생각합니다.제가 연구한 모든 것 중에서 이것이 가장 많이 나타나는 것입니다.모든 것이 작동하고 있기 때문에 현재 경로가 설정되어 있지 않습니다.공통 라이브러리는 이 문제를 제외하고 다른 node_module 라이브러리처럼 보이고 작동합니다.

저의 또 다른 생각은 모든 것이 작동하고 실행되기 때문에 vs-code가 가져오기를 이해하지 못하거나 그런 성격의 문제일 수도 있다는 것입니다.그럴 것 같지는 않지만요.

배경

두 각도 프로젝트 모두 버전 9, rc7에 있습니다.저는 도서관을 지을 때 ng-packagr을 사용합니다.저는 비주얼 스튜디오 코드를 사용하고 있으며, 작성 당시에는 최신 버전에 있습니다.

편집 이 문제는 각 11로 업그레이드하면서 사라졌습니다. 다른 몇 가지 문제가 해결될 수 있다고 생각합니다. 하지만 이것이 최선의 선택인 것 같습니다.

99.99%의 경우 수입 문제입니다!

저는 이 질문이 스택 오버플로 내부와 외부의 다른 사이트에 약간 다른 방식으로 게시되는 것을 보았습니다.앵귤러 랭귀지 서비스에는 문제가 없을 것이라고 말씀드릴 수 있습니다.

이러한 일이 발생할 수 있는 세 가지 이유가 있습니다.

1. 라이브러리에서 누락된 구성 요소를 내보내는 방법(예: 다음과 같은 경우):

   • 된 된가 추가됨export * from <your-component>의 신에게에.public-api.ts
   • 에 했습니다.exports입니다.

2. 라이브러리 구성 요소를 가져오는 방법(예: 다음과 같은 경우):

   • 도서관을 연결하시겠습니까? cd /path/to/<your-library> && npm link
   • 응용 프로그램을 연결하시겠습니까?: cd /path/to/app && npm link <your-library>
   • ) NgModule 추가YourLibraryModuleimports:[]은 NgModule입니다.

3. App NgModule에서 상위 구성 요소를 선언하는 것을 잊어버릴 수 있습니다!!

   • 이것은 크고 자주 언급되지 않습니다. 10를 Angular 10, 11에 하는 것을 수 .declarations누락된 라이브러리 구성 요소를 참조하며, 언어 서비스/컴파일러는 라이브러리 구성 요소가 누락되었다고 불평할 것이지만 앱 구성 요소가 잘못 내보냈다는 것은 말할 것도 없습니다!

Angular Language 서비스를 다시 시작해야 하는 이유

언어 서비스를 다시 시작한 후(예: VSCode 다시 시작) 오류가 변경될 수 있습니다.위에서 언급한 시나리오 3의 경우 오류는 다음과 같습니다.

Error: Cannot determine the module for class YourAppComponent in YourApp/src/app/components/your-app-component/your-app-component.component.ts! Add YourAppComponent to the NgModule to fix it

그리고 voila!!여러분은 진짜 문제를 보고 그것을 고치는 것은 쉽습니다!

하려면 현재 플래그로 .--prod현재 상태에서는 Angular Language Server가 Ivy 빌드에서 작동하지 않기 때문입니다.기본적으로 각진 prod 빌드는 Ivy 없이 빌드됩니다.따라서 그것이 지어질 때, 그것은 다음을 만듭니다.lib.metadata.json파일. 플러그인이 작동하도록 언어 서버에서 사용하는 파일입니다.

1. 라이브러리에서 빌드 만들기ng build <lib> --prod
   • 을가를 --watch 경변사항을감하기위한플래그시▁to플그래▁flag.
2. 라이브러리에서 링크 만들기cd dist그리고나서npm link
   • 다음을 생성했습니다.package.json에 시대에dist내 lib에 여러 개의 모듈이 있기 때문에 폴더와 링크를 만들었습니다.이렇게 하면 할 수 있습니다.
     • 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/*"
      ]
    }
  }
}

저는 최근까지 그런 오류를 본 적이 없습니다.

최근에 설치한 Angular Language Service 확장을 제거한 후 오류가 사라졌습니다.

저는 Angular 8에서 9로 프로젝트를 전환했고 VS Code에서도 같은 문제가 있었습니다.효과적인 솔루션:

• 구성 프로덕션을 사용하여 라이브러리 구축:ng build my-lib --prod=> 이렇게 하면 컴파일러가 Ivy(Angular docs library) 대신 이전 View Engine을 사용하게 됩니다.
• "/dist/my-lib/" 폴더로 이동하여 다음을 사용합니다.npm pack대신에npm link=> 이렇게 하면 소비 앱에 설치할 수 있는 tgz 파일이 생성됩니다.
• 사용 중인 앱에 라이브러리를 설치합니다.npm install "D:/mypath/dist/my-lib/my-lib-2.1.0.tgz"

이것은 내 환경에서 Angular 9의 VS Code 문제를 해결합니다.

다음과 같은 방법을 시도할 수 있습니다.https://github.com/angular/vscode-ng-language-service/issues/645#issuecomment-648283157 간단히 말해서,

• --prod 플래그를 사용하여 lib를 빌드합니다.
• 그럼 다음으로 이동dist/YourLibName그리고 실행npm link
• lib를 사용할 프로젝트로 이동하여 실행npm link YourLibNamelib 패키지의 이름입니다.제이손
• project tsconfig.json에서 paths 속성을 컴파일러 Options에 추가합니다.

    {  
      "compilerOptions": {
       .
       .
       .
        "paths": {
          "YourLibName from lib package.json": ["node_modules/YourLibPath"]
        },

그러면 다른 도서관과 마찬가지로 자료를 사용할 수 있을 것입니다.

안녕하세요 저는 커스텀 라이브러리를 개발하던 중 같은 문제가 발생했습니다.나는 앱과 lib 사이의 링크를 사용하고 있었습니다.

나는 tsconfig.json 내부의 compilerOptions 아래에 preserveSymlinks를 추가하는 것을 수정했습니다.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "preserveSymlinks": true,
    ...

자세한 내용은 여기를 참조하십시오.

저도 똑같은 문제가 있어요.여기 해결책이 있습니다.

추가 중

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 { }

언급URL : https://stackoverflow.com/questions/60102146/custom-library-component-is-not-a-known-element-but-app-compiles-and-runs