Referencing images is still either broken or very inconsistent (css + html)

[Seikilos]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Unknown

Description

When referencing images, there is wild mix of broken or inconsistent behaviour through ng serve, ng test and ng build. Especially when images are referenced from css files and when the intention is running the deployed app from a subdirectory.
It is also trivially to reproduce.

I tried to follow up on all of those changes with how urls are treated but the varying mix up of broken behaviour is noteworthy.

🔬 Minimal Reproduction

• Init project with ng new image-test --style css --strict
• Select No for routing
• Save the following image into the src/assets folder: https://angular.io/assets/images/logos/angular/angular.png
• Replace app.component.html with this:

<h1>Sample. TWO images should be displayed</h1>
<div style='background: url("assets/angular.png") no-repeat; width: 200px; height:200px'></div>
<div class="the-image"></div>

• Insert into app.component.css the following style:

.the-image
{
    width: 200px;
    height: 200px;
    background: url('../assets/angular.png') no-repeat;
}

Depending of the type of path in the css file you get very different results. The scenario above:

• ng serve -> works
• ng build --base-href '/image-test/' -> angular.png is now placed in two locations at dist/image-test and in dist/image-test/assets
• ng test -> karma dies hard. Starts chrome, chokes and dies. See error section.

If one start to mix up paths you get into different hells. I tried absolute paths in css, e.g. /assets/angular.png, but beside a configuration that I have to do so that karma does not choke on this, I was unable to figure out, how to run such an app from a subfolder, because during ng build all absolute css paths are untouched and 404 on a webserver when serving from /image-test/ because the paths point to /assets/angular.png which is 404, the file is rather located at /image-test/assets/angular.png

🔥 Exception or Error

• ng build --base-href '/image-test/' -> angular.png is now placed in two locations at the top level and in assets. Why do I need doubling the resources?

• ng test -> karma chokes and dies with this exception:

22 12 2020 10:24:24.449:ERROR [karma-server]: UnhandledRejection: Cannot read property 'range' of undefined
22 12 2020 10:24:24.449:ERROR [karma-server]: TypeError: Cannot read property 'range' of undefined
    at handleRangeHeaders (d:\image-test\node_modules\webpack-dev-middleware\lib\util.js:131:21)
    at processRequest (d:\image-test\node_modules\webpack-dev-middleware\lib\middleware.js:98:19)
    at ready (d:\image-test\node_modules\webpack-dev-middleware\lib\util.js:53:12)
    at handleRequest (d:\image-test\node_modules\webpack-dev-middleware\lib\util.js:182:5)
    at d:\image-test\node_modules\webpack-dev-middleware\lib\middleware.js:64:7
    at new Promise (<anonymous>)
    at middleware (d:\image-test\node_modules\webpack-dev-middleware\lib\middleware.js:63:12)
    at d:\image-test\node_modules\@angular-devkit\build-angular\src\webpack\plugins\karma.js:288:13
    at call (d:\image-test\node_modules\connect\index.js:239:7)
    at next (d:\image-test\node_modules\connect\index.js:183:5)
    at d:\image-test\node_modules\karma\lib\web-server.js:24:9
    at call (d:\image-test\node_modules\connect\index.js:239:7)
    at next (d:\image-test\node_modules\connect\index.js:183:5)
    at nullProxy (d:\image-test\node_modules\karma\lib\middleware\proxy.js:86:52)
    at call (d:\image-test\node_modules\connect\index.js:239:7)
    at next (d:\image-test\node_modules\connect\index.js:183:5)```

When I comment out only the css part and add this snippet to karma.conf.js

 proxies: {
      '/assets/': '/base/src/assets/',
    },
    files: [
      { pattern: './src/assets/**', watched: false, included: false, nocache: false, served: true }
    ],

I could run ng test, with broken styles but at least with some images (the image referenced from html will work).
Using relative paths I was unable to make ng test run, but maybe I am just lacking some more configuration

🌍 Your Environment

Angular CLI: 11.0.5
Node: 14.15.2
OS: win32 x64

Angular: 11.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.5
@angular-devkit/build-angular   0.1100.5
@angular-devkit/core            11.0.5
@angular-devkit/schematics      11.0.5
@schematics/angular             11.0.5
@schematics/update              0.1100.5
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?
Developing on windows 10 x64 (1903)

Maybe relevant: The css url background: url('../assets/angular.png') is compacted to angular.png during ng serve. Regardless how deep I nest the png file into assets, even when I move the file deeper and reference it via background: url('../assets/many/levels/deep/angular.png'), ng serve will still fetch /angular.png which is probably why karma cannot handle it properly as well.

[alan-agius4]

Hi @Seikilos,

Thanks for the detailed reported.

The above mentioned inconsistencies are actually expected. Let me explain why, by answering your questions.

inconsistent behaviour through ng serve, ng test and ng build.

There shouldn't be any inconsistencies between these pipelines as resources are handled in the same way.

ng build --base-href '/image-test/' -> angular.png is now placed in two locations at the top level and in assets. Why do I need doubling the resources?

Relative resources which are referenced in CSS files are fingerprinted (hashed), flattened and copied automatically. This however doesn't applied to resources referenced in the HTML templates (See: #3415 and #3415 (comment)).

If you are referencing a resources using relative paths in a CSS files, you'd need to copy this via the assets option.

ng test -> karma chokes and dies with this exception:

This shouldn't happening, and in fact I am not able to replicate this on a new project. Maybe it's caused by some custom Karma configuration?

⠋ Generating browser application bundles...04 01 2021 09:27:12.818:WARN [karma]: No captured browser, open http://localhost:9876/
04 01 2021 09:27:12.822:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
04 01 2021 09:27:12.822:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
04 01 2021 09:27:12.824:INFO [launcher]: Starting browser Chrome
✔ Browser application bundle generation complete.
04 01 2021 09:27:15.588:WARN [karma]: No captured browser, open http://localhost:9876/
04 01 2021 09:27:15.649:INFO [Chrome 87.0.4280.88 (Mac OS 11.0.0)]: Connected on socket M4Y-P2_0ThewJfvhAAAA with id 64291346
Chrome 87.0.4280.88 (Mac OS 11.0.0): Executed 1 of 1 SUCCESS (0.047 secs / 0.032 secs)
TOTAL: 1 SUCCESS

[Seikilos]

Hi @alan-agius4,
I would create a github repo and reproduce the issue with karma again if that helps. Afaik my karma is vanilla as I have never used it before 🤷
What is your OS? Maybe I can switch to it and test the behaviour there as well in a VM

[alan-agius4]

@Seikilos, a reproduction would definitely help us understand the issue you are facing better.

thanks

[Seikilos]

@alan-agius4 I guess I can skip creating a repo. I pinned the issue. Its the @angular-devkit/build-angular package.
When I explicitly set it in packages.json to "@angular-devkit/build-angular": "0.1100.6" everything is nice. but
"@angular-devkit/build-angular": "0.1100.5", leads to karma's demise.
I guess it has been either coincidently fixed or someone fixed it without knowing this ticket existed 😄

One minor clarification of my post: The asset I referenced in the sample is copied to top-level of the build result. Is this intended? I know other people over at stackoverflow were also irritated by this.

The result of my workflow above results in this after ng build. You can see, angular.png is twice there now:

└───image-test
    │   angular.png <----------------------
    │   favicon.ico
    │   index.html
    │   main.js
    │   main.js.map
    │   polyfills.js
    │   polyfills.js.map
    │   runtime.js
    │   runtime.js.map
    │   styles.css
    │   styles.css.map
    │   vendor.js
    │   vendor.js.map
    │
    └───assets
            angular.png <----------------------

[alan-agius4]

@Seikilos, glad to hear it was fixed.

The default behaviour is indeed to emit the assets in the top level directory. To emit the resources in a separate directory you need to use the resourcesOutputPath option.

See: https://angular.io/cli/build

[angular-automatic-lock-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.}