Already have some SQ question: angular cli - set 'publicPath' in webpack after 'deployUrl' option is deprecated Angular CLI custom webpack config
But if we are running nextjs and angular on a single domain lets say localhost/. Now the root is pointing to localhost. We are trying to redirect it to angular for post login pages like localhost/auth/..... For this we have tries deployUrl which will change in all js css files. THe deployUrl is deprecated and need to change it with baseHref which will cause changing in all routings. Now, we have anoth way to do it by changing it in webpack config js. Below is the webpack file used to move all JS CSS in auth folder.
module.exports = {
output: {
publicPath: "",
path: path.join(process.cwd(), "dist"),
filename: "auth/[name].[chunkhash:20].bundle.js", // moving bundle orrectly
chunkFilename: "auth/[id].[chunkhash:20].chunk.js" // moving chunked files correctly
},
optimization: {
runtimeChunk: false
},
resolve: {
alias: {
...sharedMappings.getAliases(),
}
},
experiments: {
outputModule: true
},
module:{
rules: [
{
test: /\.(svg|gif|png|eot|woff|ttf|jpe?g)$/i, // this is not working
// use: [
// 'url-loader',
// ],
loader: 'file-loader',
options: {
name: 'auth/[name].[ext]',
outputPath:'auth/'
}
// type: "asset/resource",
// generator: {
// filename: 'auth/[name].[ext]'
// }
},
]
},
plugins: [
new MiniCssExtractPlugin({
"filename": "auth/[name].css", // to move css files, but it only copies not moving
"chunkFilename": "auth/[id].css",
}),
sharedMappings.getPlugin()
],
};
In the above code I am able to move bundle, chunk JS files correctly. Below are the issues with above webpack js
- CSS is copied to auth. But in index.html the path does NOT changed and it is pointing to the root localhost.
- The fonts, images are not moved to auth, however they are pointing to auth/*.ttf URLS but not moved there.
- Can we move all assets like JS images CSS to a folder and use a static CDN on server. Like
static.abc.com/assets/(css|js|images)
while making build. - Tries postbuild
sh copy.sh
command but it works in local to move the files. But again index.html is not updating the relative paths for css which is created withMiniCssExtractPlugin
. Might need to play withsed
command. - I am using Docker to move the files like COPY/(RUN mv) but it is not working to move the files like
COPY --from=nginx:alpine dist/*.woff /usr/share/nginx/html/auth/
RUN mv dist/*.woff /usr/share/nginx/html/auth/
Any suggestion to sort out this issue?