Ability to require(...) an image file within Typescript

[pcroc]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.2.1 (e)
node: 7.9.0
os: linux x64
@angular/animations: 4.2.6
@angular/common: 4.2.6
@angular/compiler: 4.2.6
@angular/core: 4.2.6
@angular/forms: 4.2.6
@angular/http: 4.2.6
@angular/platform-browser: 4.2.6
@angular/platform-browser-dynamic: 4.2.6
@angular/router: 4.2.6
@angular/cli: 1.2.1
@angular/compiler-cli: 4.2.6

Desired functionality.

I'm processing templates with html-loader so that webpack will optimize and fingerprint image files that are referenced in the template. However, I would like to be able to reference an image file within Typescript code, and have the same effect.

This works (HTML), and the image is processed by webpack:
<img src="../image/img1.png">

This doesn't work (Typescript):
let carouselImage = require('../images/img1.png');

The following error is output:
ERROR in xxx.ts (299,22): Cannot find name 'require'.

Mention any other details that might be useful.

See issues #2231 and #3415 regarding processing of image files using webpack.

[filipesilva]

I'm sorry but this isn't something we are looking at adding.

[yjaaidi]

Hi @pcroc,

You can simply add declare var require: (path: string) => any to src/typings.d.ts.

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