ASP.NET CORE Angular 6 добавить сторонний компонент

Question

Я работаю над ASP.NET Core и шаблоном Angular 6, я решил добавить сторонний компонент ( Этот компонент) .

Я добавил его в файл package.json как ng-pick-datetime (и он установлен на модулях узла), а затем добавил его в webpack.config.vendor.js в разделе nonTreeShakeableModules с тем же именем, что и package.json но когда я запускаю команду webpack.js --config webpack.config.vendor.js, я получаю несколько ошибок для модуля, который не найден.

Как правильно добавить сторонний компонент в веб-пакет?

Спасибо.

список ошибок

 ERROR in ./~/ng-pick-datetime/date-time/date-time.module.js
Module not found: Error: Can't resolve '@angular/cdk/a11y' in 'C:\Users\*****\Documents\Visual Studio 2015\Projects\OptimNg-Core\trunk\OptimNg.Core\node_modules\ng-pick-datetime\date-time'
 @ ./~/ng-pick-datetime/date-time/date-time.module.js 3:0-47
 @ ./~/ng-pick-datetime/date-time/index.js
 @ ./~/ng-pick-datetime/picker.js
 @ dll vendor

 ERROR in ./~/ng-pick-datetime/date-time/date-time-picker.component.js
Module not found: Error: Can't resolve '@angular/cdk/overlay' in 'C:\Users\*****\Documents\Visual Studio 2015\Projects\OptimNg-Core\trunk\OptimNg.Core\node_modules\ng-pick-datetime\date-time'
 @ ./~/ng-pick-datetime/date-time/date-time-picker.component.js 14:0-62
 @ ./~/ng-pick-datetime/date-time/index.js
 @ ./~/ng-pick-datetime/picker.js
 @ dll vendor

и т. Д.

Answer 1

сначала это чисто клиентская часть, что означает, что это чисто Angular и не имеет ничего общего с ASP.NET.

проблема в том, что вы не добавили модуль пакета в файл app.module, поэтому angular не загрузил его.

из ссылки на сторонний компонент:

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';

// learn more about this from
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
export const MY_NATIVE_FORMATS = {
    fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'},
    datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric'},
    timePickerInput: {hour: 'numeric', minute: 'numeric'},
    monthYearLabel: {year: 'numeric', month: 'short'},
    dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: {year: 'numeric', month: 'long'},
};

@NgModule({
    imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
    providers: [
        {provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS},
    ],
})
export class AppExampleModule {
}

убедитесь, что ваш импорт включает: OwlDateTimeModule, OwlNativeDateTimeModule

и что они импортируются.