Question

我正在使用ASP.NET Core和Angular 6模板，我决定添加一个第三方组件（This component)。

我将它作为ng-pick-datetime添加到package.json文件中（并且已安装在节点模块上），然后将其添加到webpack.config.vendor.js中nonTreeShakeableModules部分中，其名称与package.json同名但是当我运行webpack.js --config webpack.config.vendor.js命令时，找不到模块的一些错误。

将第三方组件添加到webpack的正确方法是什么？

谢谢。

错误列表

 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

，并且已将其导入。

ASP.NET CORE Angular 6添加第三方组件

1 个答案: