0

I'm using angular-starter.

Right now I'm trying to deploy to a test server. My problem is with the images located at src/assets/img.

My angular 4 code (component and view):

// Component
public ngOnInit() {
  this.logoUrl = require('../../assets/img/co-logo.png');
}

// View
<img flex src="{{logoUrl}}" alt="Logo">

Till here I don't have any issue.

My problem is understanding the behavior of webpack.

I've file-loader installed and I've added this piece of code (and tried a lot of others options) to webpack.common.js: Have tried with this options:

{
  test: /\.(png|jpe?g|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        outputPath: '/assets/img/',
        publicPath: '/',
        name: '[hash]_[name].[ext]',
      }
    }
  ],
}

The output seems not bad at all, I get this:

 » app  
  » dist  
   » assets  
    » img  
    - b1249ef43aea4c57bcc7782f6a0ebb99_co-logo.png

The issue

When loading the page, if I check the url of the image, it only retrieve me this:

/app/dist/01b401fa5bdbfdc4e3daf75d72fa76b9.png

I was expecting something like: 

/app/dist/assets/img/b1249ef43aea4c57bcc7782f6a0ebb99_co-logo.png

I've tried, at least, with this parameters:

publicPath: '/assets/img/'
name: '/assets/img/[hash]_[name].[ext]'

Can anyone help me on this? I'm struggling with this since yesterday :/

Thank you all!

Edit: webpack code

lmarcelocc
  • 1,301
  • 11
  • 21

1 Answers1

1

Couple of things to make things clear and simple while resolving the issue

  1. Make sure webpack config has output.path pointed to the destination folder. I believe its app folder in your case. Do note that output.path takes absolute path i.e use path module.
  2. Take out publicPath in file-loader till we resolve the issue.
  3. Use relative path for file-loader's outputPath i.e. assets/img

Once you do those changes, things should work as expected. Then you can try putting back publicPath for file-loader depending on your need.

In general, i wouldn't use publicPath unless i have different environments to be taken care for ex. prod and dev. But thats just me.

Rakesh Kumar Cherukuri
  • 1,251
  • 9
  • 25
  • Hello. `output.path = helpers.root('dist')` `{ test: /\.(jpg|png|gif)$/, use: [ { loader: 'file-loader', options: { outputPath: 'assets/img/', name: '[hash].[name].[ext]' } } ] },` but still, with this ` ` I now get `assets/img/b1249ef43aea4c57bcc7782f6a0ebb99.co-logo.png` instead of `app/dist/assets/img/b1249ef43aea4c57bcc7782f6a0ebb99.co-logo.png` Thanks. – lmarcelocc Dec 07 '17 at 15:40
  • It worked last time I was on it but now I still getting the last comment problem :/ – lmarcelocc Dec 11 '17 at 12:09
  • Hmm, please edit the original post to include your current full webpack config. – Rakesh Kumar Cherukuri Dec 11 '17 at 12:27
  • Hello. Is at the end of the first post. Thanks. – lmarcelocc Dec 11 '17 at 14:04
  • Unfortunately, the configuration you have attached is a partial config. There are other configuration options being merged at the build time. Nevertheless, the config of `file-loader` in that file works as expected when tested. The next thing to see is to find out the effective webpack configuration after merging. Can you 1. add `console.log(JSON.stringify(module.exports(), null, 2));` at the end of the same file. 2. Run webpack build 3. Have a look at the effective webpack config that it logs to console. If i have to guess, there must be some override during merge. – Rakesh Kumar Cherukuri Dec 11 '17 at 18:06
  • Hi Rakesh. Thanks for your time. 1. https://pastebin.com/pPM7aFtb 2. https://pastebin.com/6J0GSLAa 3. Will take a look now. thank you :) – lmarcelocc Dec 11 '17 at 18:15