Karma not serving assets in angular 8

🐞 bug report

Affected Package

Karma tests (ng t)

Is this a regression?

Yes, in version 7 it was working

Description

When loading a http asset, angular 8 returns Failed: Http failure response for http://localhost:9877/assets/test.json: 404 Not Found

🔬 Minimal Reproduction

ng new ng8-test-assets

create a file in the assets folder named test.json with this content

{
  "test": true
}

in app.component.spec.ts:

  it('should get test.json', async () => {
    const client: HttpClient = TestBed.get(HttpClient);

    try {
      const result = await client.get('/assets/test.json').toPromise();
    } catch (err) {
      fail(err);
    }

  });

Heres a link to a repo with the issue: https://github.com/plchampigny/ng8-test-assets

🔥 Exception or Error

Failed: Http failure response for http://localhost:9877/assets/test.json: 404 Not Found

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.0
Node: 10.16.0
OS: win32 x64
Angular: 8.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.0.0
@ngtools/webpack                  8.0.0
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

[LoaderB0T]

We have the same problems since updating to Angular 8 today. The console gets spammed with errors of missing fonts and images 😕

For me the fix/workaround was to add the assets folder to the ‘files’ array in the karma.conf.js like so:

 files: [
    { pattern: 'assets/Scripts/**/*.js', watched: true, included: true, served: true },
    { pattern: 'assets/Scripts/**/*.ttf', watched: false, included: false, served: true },
    { pattern: 'assets/Scripts/**/*.woff', watched: false, included: false, served: true },
    { pattern: 'assets/Scripts/**/*.woff2', watched: false, included: false, served: true },
    { pattern: 'assets/Scripts/**/*.css', watched: false, included: false, served: true },
],

And to add an entry in the proxies array like so:

proxies: {
    "/assets/": "/base/assets/"
}

[alan-agius4]

Just had a look at this and it seems to be a problem from copy-webpack-plugin which are not handling Windows back slash separators. This issue occurs only on Windows OS.

What is happening is webpack’s MemoryFileSystem will contain below entries

MemoryFileSystem {
  data:
   { _karma_webpack_:
      { '': true,
        'main.js':
         <Buffer 2f 2a 2a 2a 2a 2a 2a 2f 20 28 66 75 6e 63 74 69 6f 6e 28 6d 6f 64 75 6c 65 73 29 20 7b 20 2f 2f 20 77 65 62 70 61 63 6b 42 6f 6f 74 73 74 72 61 70 0a ... >,
        'polyfills.js':
         <Buffer 2f 2a 2a 2a 2a 2a 2a 2f 20 28 66 75 6e 63 74 69 6f 6e 28 6d 6f 64 75 6c 65 73 29 20 7b 20 2f 2f 20 77 65 62 70 61 63 6b 42 6f 6f 74 73 74 72 61 70 0a ... >,
        'polyfills-es5.js':
         <Buffer 2f 2a 2a 2a 2a 2a 2a 2f 20 28 66 75 6e 63 74 69 6f 6e 28 6d 6f 64 75 6c 65 73 29 20 7b 20 2f 2f 20 77 65 62 70 61 63 6b 42 6f 6f 74 73 74 72 61 70 0a ... >,
        'styles.js':
         <Buffer 2f 2a 2a 2a 2a 2a 2a 2f 20 28 66 75 6e 63 74 69 6f 6e 28 6d 6f 64 75 6c 65 73 29 20 7b 20 2f 2f 20 77 65 62 70 61 63 6b 42 6f 6f 74 73 74 72 61 70 0a ... >,
        'vendor.js':
         <Buffer 28 77 69 6e 64 6f 77 5b 22 77 65 62 70 61 63 6b 4a 73 6f 6e 70 22 5d 20 3d 20 77 69 6e 64 6f 77 5b 22 77 65 62 70 61 63 6b 4a 73 6f 6e 70 22 5d 20 7c ... >,
        'favicon.ico':
         <Buffer 00 00 01 00 02 00 10 10 00 00 00 00 20 00 68 04 00 00 26 00 00 00 20 20 00 00 00 00 20 00 a8 10 00 00 8e 04 00 00 28 00 00 00 10 00 00 00 20 00 00 00 ... >,
        assets: [Object],
        'assets\\test.json':
         <Buffer 7b 0d 0a 20 20 22 74 65 73 74 22 3a 20 74 72 75 65 0d 0a 7d 0d 0a> } } }

Instead of

MemoryFileSystem {
  data:
   { _karma_webpack_:
      { '': true,
        'main.js':
         <Buffer 2f 2a 2a 2a 2a 2a 2a 2f 20 28 66 75 6e 63 74 69 6f 6e 28 6d 6f 64 75 6c 65 73 29 20 7b 20 2f 2f 20 77 65 62 70 61 63 6b 42 6f 6f 74 73 74 72 61 70 0a ... >,
        'polyfills.js':
         <Buffer 2f 2a 2a 2a 2a 2a 2a 2f 20 28 66 75 6e 63 74 69 6f 6e 28 6d 6f 64 75 6c 65 73 29 20 7b 20 2f 2f 20 77 65 62 70 61 63 6b 42 6f 6f 74 73 74 72 61 70 0a ... >,
        'polyfills-es5.js':
         <Buffer 2f 2a 2a 2a 2a 2a 2a 2f 20 28 66 75 6e 63 74 69 6f 6e 28 6d 6f 64 75 6c 65 73 29 20 7b 20 2f 2f 20 77 65 62 70 61 63 6b 42 6f 6f 74 73 74 72 61 70 0a ... >,
        'styles.js':
         <Buffer 2f 2a 2a 2a 2a 2a 2a 2f 20 28 66 75 6e 63 74 69 6f 6e 28 6d 6f 64 75 6c 65 73 29 20 7b 20 2f 2f 20 77 65 62 70 61 63 6b 42 6f 6f 74 73 74 72 61 70 0a ... >,
        'vendor.js':
         <Buffer 28 77 69 6e 64 6f 77 5b 22 77 65 62 70 61 63 6b 4a 73 6f 6e 70 22 5d 20 3d 20 77 69 6e 64 6f 77 5b 22 77 65 62 70 61 63 6b 4a 73 6f 6e 70 22 5d 20 7c ... >,
        'favicon.ico':
         <Buffer 00 00 01 00 02 00 10 10 00 00 00 00 20 00 68 04 00 00 26 00 00 00 20 20 00 00 00 00 20 00 a8 10 00 00 8e 04 00 00 28 00 00 00 10 00 00 00 20 00 00 00 ... >,
        assets: [Object] } } }

When webpack-dev-middleware call context.fs.statSync('/_karma_webpack_/assets/test.json'); it will throw an error that the file cannot be found.

I opened a PR to address this https://github.com/webpack-contrib/copy-webpack-plugin/pull/389