CODEWITHSUNDEEP
angularwebpackwebpack-dev-server
user506069
user506069

Reputation: 781

How do I set an Angular 2 & webpack project to retrieve images from a context path?

Using the Angular 2 Webpack starter here: https://github.com/AngularClass/angular2-webpack-starter

I want to access the app at http://localhost:3000/contextPath, not http://localhost:3000

I have added the publicPath setting under output in webpack.dev.js:

  output: {
    publicPath: '/contextPath',
    path: helpers.root('dist'),
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js',
    library: 'ac_[name]',
    libraryTarget: 'var',
  },

And set the baseUrl in webpack.common.js:

const METADATA = {
  title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
  baseUrl: '/contextPath',
  isDevServer: helpers.isWebpackDevServer()
};

After running webpack-dev-server I am able to access the app at http://localhost:3000/contextPath#/home, the .js files are served correctly using the context path, like http://localhost:3000/contextPath/polyfills.bundle.js, but the angular shield image is broken and the page is trying to retrieve it from http://localhost:3000/assets/img/angularclass-avatar.png.

How should I get the application to use the correct url for the image (including the context path), which is http://localhost:3000/contextPath/assets/img/angularclass-avatar.png ?

App running at context path with broken image link:

Running app with broken image link.

Upvotes: 0

Views: 927

Answers (2)

user506069
user506069

Reputation: 781

Both baseUrl and publicPath in my webpack config files needed to include a slash on the end. Setting them to '/contextPath/' resolved the issue.

Upvotes: 0

Sean Larkin
Sean Larkin

Reputation: 6430

I believe you are wanting to set the publicPath property. Try setting:

output.publicPath: '/contextPath'.

Upvotes: 1

Related Questions