Create a simple Angular app with ng new. Then create src/test.component.ts with the content:
import {Component} from "@angular/core";
@Component({
selector: "test",
template: `<ng-content *ngIf="false"></ng-content>`
})
export class TestComponent {}
Add it to src/app.module.ts and update your src/app.component.html file to use this new component (note that I modified the img src to point to a networked image, not a base64 encoded one):
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<test>
<img width="300" alt="Angular Logo" src="https://duckduckgo.com/assets/logo_homepage.normal.v107.svg">
</test>
</div>
When you run the app, you should not see an image on the screen, but yet if you open up the developer tools under networking, you still see the image network request.
Why is this image being loaded even though the DOM doesn't have an <img> tag? How can I make this not happen, or is this a bug?
The reason I think this behavior is weird is because if you skip the <ng-content> w/ custom component and do a regular <ng-container> or <div> with an *ngIf="false" and the image inside, you will not get any network requests until the content is displayed.
You can access the full source code here.
