我在开发期间有一个显示在我的Angular应用程序主页面上的图像,但是当我执行生产版本时,图像不会显示.我一直在寻找其他讨论(
this one看起来很有希望,但没有解决我的问题),但仍然没有找到解决方案.我有什么想法我做错了吗？
<img alt="Rocket" src="../../images/rocket.gif" />
在生产中,它输出：
<img alt="Rocket" src="dist/0f686f4440348c6e453c282baa10b674.gif">
我确实在我的dist文件夹中查看了该文件确实存在,但似乎已损坏.那里有另一个文件,5743b3dcb9db968dd0e484850845aa54.gif,其中包含我的图像.不确定是否提供了提示.
const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin;
const CheckerPlugin = require("awesome-typescript-loader").CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
//const isDevBuild = false;
const sharedConfig = {
stats: { modules: false },context: __dirname,resolve: {
extensions: [".ts",".js"],"alias": {
"jquery-ui":"jquery-ui-dist/jquery-ui","scripts": path.resolve(__dirname,"./ClientApp/scripts"),"node_modules": path.resolve(__dirname,"./node_modules")
}
},output: {
filename: "[name].js",publicPath: "dist/" // Webpack dev middleware,if enabled,handles requests for this URL prefix
},module: {
rules: [
{ test: /\.ts$/,include: /ClientApp/,use: ["awesome-typescript-loader?silent=true","angular2-template-loader","angular-router-loader"] },{ test: /\.html$/,use: "html-loader?minimize=false" },{ test: /\.scss$/,use: ["raw-loader","sass-loader"] },{ test: /\.css$/,use: ["to-string-loader",isDevBuild ? "css-loader" : "css-loader?minimize"] },{ test: /\.(png|jpg|jpeg|gif|svg)$/,use: "url-loader?limit=25000" }
]
},plugins: [
new CheckerPlugin(),new webpack.ProvidePlugin({
jQuery: "jquery",$: "jquery",jquery: "jquery","window.jQuery": "jquery'","window.$": "jquery"
})]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = "./wwwroot/dist";
const clientBundleConfig = merge(sharedConfig,{
entry: { "main-client": "./ClientApp/boot.browser.ts" },output: { path: path.join(__dirname,clientBundleOutputDir) },plugins: [
new webpack.DllReferencePlugin({
context: __dirname,manifest: require("./wwwroot/dist/vendor-manifest.json")
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.sourceMapDevToolPlugin({
filename: "[file].map",// Remove this line if you prefer inline source maps
modulefilenameTemplate: path.relative(clientBundleOutputDir,"[resourcePath]") // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),//new AotPlugin({
new AngularCompilerPlugin({
tsConfigPath: "./tsconfig.json",entryModule: path.join(__dirname,"ClientApp/app/app.module.browser#AppModule"),exclude: ["./**/*.server.ts"]
})
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig,{
resolve: { mainFields: ["main"] },entry: { "main-server": "./ClientApp/boot.server.ts" },manifest: require("./ClientApp/dist/vendor-manifest.json"),sourceType: "commonjs2",name: "./vendor"
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
//new AotPlugin({
new AngularCompilerPlugin({
tsConfigPath: "./tsconfig.json","ClientApp/app/app.module.server#AppModule"),exclude: ["./**/*.browser.ts"]
})
]),output: {
libraryTarget: "commonjs",path: path.join(__dirname,"./ClientApp/dist")
},target: "node",devtool: "inline-source-map"
});
return [clientBundleConfig,serverBundleConfig];
};
我的webpack.config.vendor.js文件如下所示：
const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const merge = require("webpack-merge");
const treeShakableModules = [
"@angular/animations","@angular/cdk","@angular/common","@angular/compiler","@angular/core","@angular/forms","@angular/http","@angular/material","@angular/platform-browser","@angular/platform-browser-dynamic","@angular/router","@asymmetrik/ngx-leaflet","@progress/kendo-angular-charts","@progress/kendo-angular-inputs","@progress/kendo-angular-intl","@progress/kendo-angular-l10n","@progress/kendo-drawing","@progress/kendo-file-saver","zone.js"
];
const nonTreeShakableModules = [
"@progress/kendo-theme-default/dist/all.css","ag-grid-angular","ag-grid","ag-grid-enterprise/dist/ag-grid-enterprise.js","ag-grid/dist/styles/ag-grid.css","ag-grid/src/styles/ag-theme-material.scss","bootstrap","bootstrap/dist/css/bootstrap.css","es6-promise","es6-shim","event-source-polyfill","exceljs/dist/exceljs.min.js","file-saver","font-awesome/css/font-awesome.css","hammerjs","jquery","jquery-ui-dist/jquery-ui","leaflet","leaflet/dist/leaflet.css","lodash","moment","ngx-bootstrap","tether","sheetjs","xlsx","./ClientApp/theme/material/js/material.js","./ClientApp/theme/material/js/ripples.js","./ClientApp/theme/material/css/bootstrap-material-design.css","./ClientApp/theme/material/css/ripples.css"
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin("vendor.css");
const isDevBuild = !(env && env.prod);
//const isDevBuild = false;
const sharedConfig = {
stats: { modules: false },resolve: {
extensions: [".js"]
},module: {
rules: [
{ test: /\.(png|gif|jpg|jpeg|woff|woff2|eot|ttf|svg)(\?|$)/,use: "url-loader?limit=100000" },"sass-loader"] }
]
},output: {
publicPath: "dist/",filename: "[name].js",library: "[name]_[hash]"
},plugins: [
new webpack.ProvidePlugin({ $: "jquery",jQuery: "jquery","window.jQuery": "jquery","_": "lodash" }),// Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/,path.join(__dirname,"./ClientApp")),// Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/,// Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig = merge(sharedConfig,{
entry: {
// To keep development builds fast,include all vendor dependencies in the vendor bundle.
// But for production builds,leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
vendor: isDevBuild ? allModules : nonTreeShakableModules
},"wwwroot","dist") },module: {
rules: [
{ test: /\.css(\?|$)/,use: extractCSS.extract({ use: isDevBuild ? "css-loader" : "css-loader?minimize" }) }
]
},plugins: [
extractCSS,new webpack.DllPlugin({
path: path.join(__dirname,"dist","[name]-manifest.json"),name: "[name]_[hash]"
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
});
const serverBundleConfig = merge(sharedConfig,{
target: "node",resolve: { mainFields: ["main"] },entry: { vendor: allModules.concat(["aspnet-prerendering"]) },output: {
path: path.join(__dirname,"ClientApp","dist"),libraryTarget: "commonjs2"
},module: {
rules: [{ test: /\.css(\?|$)/,isDevBuild ? "css-loader" : "css-loader?minimize"] }]
},plugins: [
new webpack.DllPlugin({
path: path.join(__dirname,name: "[name]_[hash]"
})
]
});
return [clientBundleConfig,serverBundleConfig];
}
我已经解决了这个问题.事实证明,我需要将图像的引用添加到webpack.config.vendor.js文件中的非树可摇动部分.
我添加了以下行,修复了组件html页面中的引用,并且它们都在一个已发布的应用程序中工作！真棒！
"./ClientApp/images/rocket.gif"
原文地址：https://www.jb51.cc/angularjs/141235.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
