Angular 角度数据表与网页包呈现错误

您好，我在使用位于的角度数据表时遇到问题

我已经按照说明进行了操作，但是没有呈现数据表，区别在于我使用webpack来编译脚本和css文件，并将主题作为覆盖。正在编译文件，但当我试图显示数据表时出现问题，这给了我错误

全局错误处理程序：TypeError:$（…）。DataTable不是函数
在angular datatables.directive.js:38
在ZoneDelegate.invokeTask（zone.js:425）
位于Object.onInvokeTask（core.es5.js:3881）
在ZoneDelegate.invokeTask（zone.js:424）
在Zone.runTask（Zone.js:192）
在ZoneTask.invokeTask（zone.js:499）
在ZoneTask.invoke（zone.js:488）
定时（zone.js:2040）

主题路由模块中包含的角度数据表：

从'@angular/core'导入{NgModule}；
从“./auth”导入{AuthGuard}；
从“/”导入{ThemeComponent}；
导入{
路线，
路由模块
}来自“@angular/router”；
进口{
IndexComponent，
视图1组件，
视图2组件
}从“./页”开始；
从“角度数据表”导入{DataTablesModule}；
常数路由：路由=[
{
路径：'索引'，
组件：IndexComponent
},
{
路径：“视图1”，
组件：View1组件
},
{
路径：“视图2”，
组件：View2组件
}
];
@NGD模块({
声明：[
IndexComponent，
视图1组件，
视图2组件
],
导入：[RouterModule.forChild（路由），DataTableModule]，
导出：[路由模块]
})
导出类ThemeRoutingModule{}

和webpack.config.vendor.js

const path=require（'path'）；
常量glob=require（'glob'）；
const webpack=require（'webpack'）；
const ExtractTextPlugin=require（'extract-text-webpack-plugin'）；
const merge=require（'webpack-merge'）；
常数treeShakableModules=[
“@角度/动画”，
“@angular/common”，
“@angular/compiler”，
“@angular/core”，
“@angular/forms”，
“@angular/http”，
“@角度/平台浏览器”，
“@角度/平台浏览器动态”，
“@angular/router”，
'zone.js'，
];
const nontreshakableModules=[
“自举”，
'bootstrap/dist/css/bootstrap.css'，
“es6承诺”，
“es6垫片”，
“事件源多边形填充”，
“jquery”，
'datatables.net/js/jquery.datatables.js'，
'datatables.net dt/css/jquery.datatables.css'
];
const allModules=treeShakableModules.concat（nontreshakablemodules）.concat（glob.sync（'./ClientApp/assets/***.css'））.concat（glob.sync（'./ClientApp/assets/***.js'）；
module.exports=（env）=>{
const extractCSS=new ExtractTextPlugin（'vendor.css'）；
const isDevBuild=！（环境和环境产品）；
常量sharedConfig={
统计信息：{modules:false}，
解析：{extensions:['.js']}，
模块：{
规则：[
{测试：/\（png | woff | gif | woff2 | eot | ttf | svg）（\？$）/，使用：'url加载程序？限制=100000'}
]
},
输出：{
publicPath:'dist/'，
文件名：'[name].js'，
库：'[name].[hash]'
},
插件：[
new webpack.ProvidePlugin（{$：'jquery'，jquery:'jquery'}），//将这些标识符映射到jquery包（因为Bootstrap希望它是一个全局变量）
新的webpack.ContextReplacementPlugin（/\@angular\b.*\b（bundles | linker）/，path.join（u dirname，'./ClientApp'），//解决方法https://github.com/angular/angular/issues/11580
新的webpack.ContextReplacementPlugin（/angular（\\\\\\\\/）core（\\\\\\\/）@angular/，path.join（\uu dirname，'./ClientApp'），//解决方法https://github.com/angular/angular/issues/14898
新网页包。IgnorePlugin（//^vertx$/）//的解决方法https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig=merge（sharedConfig{
条目：{
//为了保持快速开发构建，请在供应商包中包含所有供应商依赖项。
//但对于生产构建，请将树可抖动的构建排除在外，以便AOT编译器可以生成更小的包。
供应商：isDevBuild？所有模块：不可重建模块
},
输出：{path:path.join（uu dirname，'wwwroot'，'dist'），
模块：{
规则：[
{
测试：/\.css（\？\$）/，使用：extractCSS.extract（{use:isDevBuild？'css loader'：'css loader？minimize'}）
}
]
},
插件：[
提取CSS，
新建webpack.DllPlugin({
path:path.join（uu dirname，'wwwroot'，'dist'，'[name]-manifest.json'），
名称：'[name]\[hash]'
})
].concat（isDevBuild？[]：[
新建webpack.optimize.UglifyJsPlugin（）
])
});
返回[clientBundleConfig]；
}

可能的解决方法：可能的解决方法：