Angular-cli: Karma not serving assets in angular 8

[plchampigny]

🐞 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?

[pksh]

Out of interest, what Launchers or webdriver version have you configured in Karma? I am having similar issue but happening on Angular v7.0.4 code base. My configuration is using Chrome 74.0.3729 and HeadlessChrome 74.0.3729 running on Win 10.

[plchampigny]

@pksh you can see karma config here:
https://github.com/plchampigny/ng8-test-assets/blob/master/karma.conf.js

[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/"
}

[soyjuanmedina]

Same problem here!!

[bartoszbobin]

I have similar problem but with production build.

deployUrl isn't added to fonts path anymore

[mgilroy]

Identical issue here when upgrading application from Angular 7 to Angular 8.

Workaround from LoaderB0T doesn't appear to work for us.

Tour of hero's project would benefit from having the icon served from the assets folder and a test to validate that it loaded as this would then have flagged the issue faster. Also more accurately represents how most people will serve assets.

[brian428]

Unfortunately, trying to add things to Karma's files array won't work for anything that's not a Karma asset type. So JSON, image files, etc. can't be loaded and proxied this way.

This is a blocking regression, so I'm forced to revert everything back to version 7 until this is addressed (hopefully soon).

[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

[brian428]

Thanks for figuring it out, Alan!

[alan-agius4]

Still blocked on copy-webpack-plugin as they didn't review the PR. I'll ping them.

[vysheradugi4]

Same issue. As temporary solution may use this approach: https://stackoverflow.com/questions/40088462/how-do-i-serve-assets-when-i-run-ng-test-using-latest-angular-cli-beta-15-w-web

[alan-agius4]

Should be fixed via https://github.com/angular/angular-cli/pull/15172

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}