Webpack errors out on images

[mikeTmw]

I cloned this repo and tried adding an image into src/assets/img and referencing in the Page1.html like so:

<img src="assets/img/lego.jpg">

However, webpack chokes on this with a "Module not found" error and prevents any of the tests from running:

ERROR in ./src/pages/page1/page1.html
Module not found: Error: Can't resolve './assets/img/lego.jpg' in 'C:\dev\ionic-unit-testing-example-master\src\pages\page1'
 @ ./src/pages/page1/page1.html 1:405-437
 @ ./src/pages/page1/page1.ts
 @ ./src/pages/page1/page1.spec.ts
 @ ./src \.spec\.ts
 @ ./test-config/karma-test-shim.js

I assume this requires a modification to the webpack.config.js to get it to look in the correct location but I am not that familiar with webpack so I'm not sure the fix. I did note that images are loaded using "null_loader" which I understand just loads a null module, in which case I am not sure why webpack cares about where the image is.

Anyone know what needs to be changed to prevent this problem?

[kamok]

Karma requires you to set up your files path.

For example, in my karma.conf.js, I have this in the files array:

{ pattern: './www/assets/images/*.jpg', watched: false, included: false, served: true}

For more information, visit http://karma-runner.github.io/1.0/config/files.html

[mikeTmw]

I tried setting up the files property in karma.conf.js like so:

files: [
  {pattern: './karma-test-shim.js', watched: true},
  {pattern: '../src/assets/img/*.jpg', watched: false, included: false, served: true},
  {pattern: '../www/assets/img/*.jpg', watched: false, included: false, served: true}
],

but it did not have any effect. I still received the same error.

[kamok]

If you're getting a 404 on your jpg, just keep tweaking it. I've also seen people adding /base infront of the path. Just search for solutions. This is a common problem for Angular 2 + Karma testing.

[mikeTmw]

Note that adding a leading slash to the img src in page1.html like <img src="/assets/img/lego.jpg"> resolves the problem but my understanding is that the Ionic way to reference assets is to use no leading slash. Please correct me if I am wrong.

[esmiralha]

The tip above helped with an image referenced in an HTML file, but I still have the same problem with custom fonts referenced from a scss file. Putting a slash in front of the url didn't help. Can someone point me to a tutorial on how to use webpack properly with Ionic 2?

[Stukongeluk]

@mikeTmw You are right, it isn't the ionic way to do that, and it won't work when building on android/ios with cordova. The tests will run but the images won't display.

I'm still trying some configurations to get both of them working and if i'm silent for a week, assume I failed.

[Stukongeluk]

I have to test this at a bigger scale though, but here is my fix: In your webpack.test.js edit the following piece of code:

test: /\.html$/,
loader: 'raw-loader'

Maybe you have to npm install raw-loader --save-dev first but this works and you don't have to edit your paths.

I don't know what consequences this will have with tests, but atleast you can test without changing the paths and still let it work with hybrid apps.

EDIT: This loader will put all the html file content in a string.

[pwagner]

Thank you, @Stukongeluk ! This made the "Module not found" error disappear. Only a warning remains (WARN [web-server]: 404: /assets/img/logo.png) - but I guess that's not a problem.

[roblouie]

I've just submitted a fix for this. Doesn't result in a warning either.

[pwagner]

@roblouie's fix works for me. But in order to get rid of the warnings, I also had to add the following in karma.conf.js: proxies: { '/assets/': 'http://localhost:8100/assets/' }