webpack not able to import images( using express and angular2 in typescript)

The problem is that you confuse TypeScript level modules and Webpack level modules.

In Webpack any file that you import goes through some build pipeline.

In Typescript only .ts and .js files are relevant and if you try to import x from file.png TypeScript just does not know what to do with it, Webpack config is not used by TypeScript.

In your case you need to separate the concerns, use import from for TypeScript/EcmaScript code and use require for Webpack specifics.

You would need to make TypeScript ignore this special Webpack require syntax with a definition like this in a .d.ts file:

declare function require(string): string;

This will make TypeScript ignore the require statements and Webpack will be able to process it in the build pipeline.

Instead of:

import image from 'pathToImage/image.extension';

Use:

const image = require('pathToImage/image.extension');

I'm using

import * as myImage from 'path/of/my/image.png';

and created a typescript definition with

declare module "*.png" {    const value: any;    export = value;}

This only works when you have a correct handler like the file-loader in webpack. Because this handler will give you a path to your file.