<p dir="auto">I am trying to resolve the image URL's:</p>
<p dir="auto"><strong>app.module.ts code</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { NgModule } from &quot;@angular/core&quot;;
import { BrowserModule } from &quot;@angular/platform-browser&quot;;
import { AppComponent } from &quot;./app.component&quot;;
import { routing, appRoutingProviders } from &quot;./app.routing&quot;;
import { Routes, RouterModule } from &quot;@angular/router&quot;;
import { UrlResolver } from '@angular/compiler';

const routes: Routes = [
];

@NgModule({
    imports: [
        BrowserModule,
        routing,
        RouterModule.forRoot(routes, { useHash: true })
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        appRoutingProviders, UrlResolver
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}"><pre class="notranslate"><code class="notranslate">import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { routing, appRoutingProviders } from "./app.routing";
import { Routes, RouterModule } from "@angular/router";
import { UrlResolver } from '@angular/compiler';

const routes: Routes = [
];

@NgModule({
    imports: [
        BrowserModule,
        routing,
        RouterModule.forRoot(routes, { useHash: true })
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        appRoutingProviders, UrlResolver
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}
</code></pre></div>
<p dir="auto"><strong>app.component.ts code:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Component } from &quot;@angular/core&quot;;
import { Router } from &quot;@angular/router&quot;;
import { UrlResolver } from '@angular/compiler';

@Component({
    moduleId: module.id,
    selector: &quot;my-app&quot;,
    templateUrl: &quot;app.component.html&quot;
})
export class AppComponent {
    constructor(private urlResolver: UrlResolver) { }

    public resolvePath(path) {
        return this.urlResolver.resolve(module.id, path);
    }
}"><pre class="notranslate"><code class="notranslate">import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { UrlResolver } from '@angular/compiler';

@Component({
    moduleId: module.id,
    selector: "my-app",
    templateUrl: "app.component.html"
})
export class AppComponent {
    constructor(private urlResolver: UrlResolver) { }

    public resolvePath(path) {
        return this.urlResolver.resolve(module.id, path);
    }
}
</code></pre></div>
<p dir="auto">I am providing UrlResolver, but the constructor injection of UrlResolver is causing error:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/12258728/21437850/2fcd3834-c854-11e6-9dd3-d54ed14dab2f.png"><img src="https://cloud.githubusercontent.com/assets/12258728/21437850/2fcd3834-c854-11e6-9dd3-d54ed14dab2f.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>app.component.html code</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &lt;img [src]=&quot;resolvePath('Logo.jpg')&quot; alt=&quot;Logo&quot; width=&quot;50&quot; height=&quot;50&quot;&gt;"><pre class="notranslate"><code class="notranslate"> &lt;img [src]="resolvePath('Logo.jpg')" alt="Logo" width="50" height="50"&gt;
</code></pre></div>
<p dir="auto">why error on constructor injection, should I add anything in providers ?</p>
<p dir="auto">I'm using Gulp with Browserify as my build tools.<br>
Angular2 needs zone as a global variable, normally I would do this like that:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="window.zone = require('zone.js');"><pre class="notranslate"><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">zone</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'zone.js'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">but I have a problem when it comes to ES6 syntax and TypeScript.<br>
Tried doing it like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import 'zone.js';
(&lt;any&gt;window).Zone = zone;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s">'zone.js'</span><span class="pl-kos">;</span>
<span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">any</span><span class="pl-c1">&gt;</span>window).Zone = zone;</pre></div>
<p dir="auto">but this of course shows an error "Cannot find name zone' because variable zone is not defined anywhere.<br>
Then I tried defining it like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as zone from 'zone.js';
(&lt;any&gt;window).Zone = zone;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">zone</span> <span class="pl-k">from</span> <span class="pl-s">'zone.js'</span><span class="pl-kos">;</span>
<span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">any</span><span class="pl-c1">&gt;</span>window).Zone = zone;</pre></div>
<p dir="auto">and now I get "Cannot find module zone.js" but the weird thing is that it works and browserify compiles it correctly.<br>
Also tried:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {zone} from 'zone.js';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">zone</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'zone.js'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">but this causes the same error "Cannot find module zone.js.</p>
<p dir="auto">Could anyone help me how should I import it correctly?</p>