Files not declared in angular.cli/assets and referenced in templates are not being fingerprinted and copied to root (dist) after compilation

[IagoBarboza]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request

Versions.

@angular/cli: 1.4.4
node: 6.11.1
os: darwin x64
@angular/animations: 4.2.6
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.2.6
@angular/compiler: 4.2.6
@angular/compiler-cli: 4.2.6
@angular/core: 4.2.6
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.2.6
@angular/http: 4.2.6
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.2.6
@angular/platform-browser-dynamic: 4.2.6
@angular/platform-server: 4.2.6
@angular/router: 4.2.6
@angular/cli: 1.4.4
typescript: 2.3.4
macOS X Yosemite

Repro steps.

• Create a component and put any image (i.e. image.png) file in the root directory of the component
• In the template, add the tag
• Do not declare the file in angular.cli/assets array
• Run ng serve or ng build

The log given by the failure.

• The image.png is not in the root (dist)

Desired functionality.

Images and other files inside a module or component, if referenced in srcs of tag elements inside templates, should be copied to root (dist) and fingerprinted as in CSS files.

[clydin]

A component's template is not static HTML and as a result cannot, in the general case, be safely analyzed as such. To properly handle statically analyzing for assets, a system would need to be put into place that could provide such capability as, but most likely not limited to, read only attribute marking, asset attribute marking, and dynamic asset context discovery.

[IagoBarboza]

Consider the image.png file inside a module from the app and a template html file in the same directory and that contains the tag <img src="image.png">. Doesn't make sense cli fingerprint the image.png to image.hash.png, update the tag to <img src="image.hash.png"> and put the image.hash.png on dist directory?
The main problem is when i use a third-party module, which is in the situation described above, the module's templates will not find the image files.

[clydin]

The templates are not static which means that what is contained within the source file and what is actually rendered in the web browser can be radically different. And the web browser is what is fetching and loading the asset. To properly perform static analysis on the template, the entire context of that template needs to be taken into account. This would not only include the component code but also the application's module hierarchy (e.g., an Angular directive from a 3rd-party module could be altering or adding img src attributes based on some additional custom attributes; or the component code could be adjusting the img src attribute to load different images based on application state). Webpack would need to be aware of all this to properly perform the asset discovery.

[filipesilva]

I have to close this issue as a duplicate of #3415 to keep the discussion in a single place, but I'll mention there that there's really good discussion in here of the challenges for adding this feature.

[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.}