How do I get the webpack publicPath

Question

I'm using the following code add icons to the MdIconRegistry:

constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
  iconRegistry.addSvgIconSet(
    sanitizer.bypassSecurityTrustResourceUrl('/assets/svg-sprite-action-symbol.svg'));
  iconRegistry.addSvgIconSet(
    sanitizer.bypassSecurityTrustResourceUrl('/assets/svg-sprite-content-symbol.svg'));
  iconRegistry.addSvgIconSet(
    sanitizer.bypassSecurityTrustResourceUrl('/assets/svg-sprite-navigation-symbol.svg'));
}

This unfortunately breaks when using ng [build|serve] --deploy-url=/public/ (In production I would like to deploy the ng build output to a CDN)

Is there a way that I can access the webpack publicPath variable from my angular component so that I can specify the urls for the svg icons relative to that?

I had a look in the ng build output, and I can see the variable is set in inline.bundle.js, but I'm not sure how to correctly access it.

/******/    __webpack_require__.p = "/public/";

Answer 1

You can get it from __webpack_public_path__ global variable.

Answer 2

if you have access to webpack-configration file then you can easely get the public path

suppose you have webpack.config.js in your project root and you have component file in /src/component/mycomponent.js

and your webpack.config.js is something like this

module.exports = {
.
.
.
 output: {
   path: "somthing",
   filename: "somthing",
   publicPath: "something"
 }
.
.
.
}

then /src/component/mycomponent.js would be like

import webpackConfig from "../../webpack.config"

const publickPath = webpackConfig.output.publicPath

webpack config file is just like another javascript file you can import content from it