自定义角度库组件显示错误“不是已知元素”

Posted 2023-03-15

【中文标题】自定义角度库组件显示错误“不是已知元素”

【英文标题】：Custom angular library component displays error 'not a known element'

【发布时间】：2021-01-15 18:13:00

【问题描述】：

我正在尝试创建一个自定义角度库以用于多个项目，并将发布到私有 verdaccio npm 注册表。

它可以正常工作、渲染和构建，但是在 vs 代码中存在这个令人讨厌的错误，即“我的组件”不是已知元素。

我已经检查了我正在生产模式下构建并且常春藤被禁用，并且我正在从库模块中导出所有组件并且它成功生成了 metadata.json 文件。

我一直试图摆脱这个错误很长时间，我得到的最接近的事情就是添加

    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ]

到我的 ngModule。

我的 cystom 模块文件是：

ng-package.json

  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/my-lib",
  "deleteDestPath": false,
  "lib": 
    "entryFile": "src/public-api.ts",
    "umdModuleIds": 
  ,
  "whitelistedNonPeerDependencies": ["tslib"]

tsconfig.lib.prod.json

  "extends": "./tsconfig.lib.json",
  "compilerOptions": 
    "declarationMap": false
  ,
  "angularCompilerOptions": 
    "enableIvy": false
  

public-api.ts

export * from './lib/mylib.module';
export * from './lib/interfaces';
export * from './lib/services/mylib-util.service';
export * from './lib/services/mylib-config.service';
export * from './lib/components/my-component.component';
export * from './lib/components/my-other-component.component';

mylib.module.ts

export function configFactory() 
  return new ConfigService();


@NgModule(
  declarations: [
    MyComponentComponent,
    MyOtherComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    UtilService,
    
      provide: ConfigService,
      useFactory: configFactory
    
  ],
  exports: [
    MyComponentComponent,
    MyOtherComponentComponent
  ]
)
export class LibraryModule 
  static config(conf: ILibModuleConfig): ModuleWithProviders<LibraryModule> 
    const config = new ConfigService(conf);
    return 
      ngModule: LibraryModule,
      providers: [
        
          provide: ConfigService,
          useValue: config
        
      ]
    ;
  

我真的不知道我在这里错过了什么！

我尝试修改 angular.json 中的构建器，并同时使用了 @angular-devkit/build-ng-packagr:build 和 @angular-devkit/build-angular:ng-packagr，两者都给了我相同的结果。

我的开发依赖项

"devDependencies": 
    "@angular-devkit/build-angular": "~0.1001.3",
    "@angular-devkit/build-ng-packagr": "^0.1001.3",
    "@angular/cli": "~10.1.2",
    "@angular/compiler-cli": "~10.1.2",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^10.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tsickle": "^0.39.1",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  

【参考方案1】：

经过大量的修改后，当我将ng-packagr 的版本回滚到9.1.5 而不是10.1.0 版本时，一切正常