Блог

Я пытаюсь создать пользовательскую библиотеку angular, которая будет использоваться в нескольких проектах и будет опубликована в частном реестре verdaccio npm.

И он работает, и отлично рендерится, и отлично строится, но в vs-коде есть эта раздражающая ошибка, которая заключается в том, что «my-component» не является известным элементом.

Я проверил, что я создаю в рабочем режиме, а ivy отключен, и что я экспортирую все компоненты из библиотечного модуля, и он успешно генерирует файл metadata.json.

Я так долго пытался избавиться от этой ошибки, и самое близкое, что у меня есть, это добавить

     schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ]
  

для моего my 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