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

问题描述

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

它可以正常工作，渲染良好，构建良好，但是vs代码中存在这种令人讨厌的错误，即“ my-component”不是一个已知元素。

我已经检查过我是否在生产模式下进行构建并且禁用了常春藤，并且我正在从库模块中导出所有组件，并且它成功生成了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

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

解决方法

经过大量的查找，当我将ng-packagr的版本回滚到9.1.5的版本而不是10.1.0的版本时，一切工作正常