Ignore `src` attributes in Angular 2 template.

[asial-matagawa]

@andipavllo @erisu @frankdiox

Environment

Monaca CLI 2.1.7 monaca-lib 2.2.4

Encountered problem

The current webpack config for Angular 2 crashes with the following error when foo.html which is loaded by require('foo.html') contains an unresolvable path (in a src attribute of img element).

ERROR in ./src/app/app.html
Module not found: Error: Cannot resolve 'file' or 'directory' ./images/pokemon/icons/{{ p.id }}.png in /Users/asial/temp/angular2-onsenui-pokedex/src/app
 @ ./src/app/app.html 1:475-523

How to reproduce

First, run the commands below:

git clone https://github.com/argelius/angular2-onsenui-pokedex.git --no-checkout
cd angular2-onsenui-pokedex
git checkout 2e4210bffa21bd0daaddc76028b3c0082601b0ff

Next, make this change in src/app/app.html:

<img class="sprite" src="/images/pokemon/sprites/{{ pokemon.id }}.png">

<img class="sprite" src="./images/pokemon/sprites/{{ pokemon.id }}.png">

(This is required for running this app in Cordova environment. Otherwise, we would get the following error.)

Then, run the commands below:

npm install
monaca transpile # cause the error

---

FYI: If we use template: (content of app.html) instead of template: require('./app.html'), it worked fine on Cordova environment:

But I think this is not a straightforward solution.

[huybn5776]

My solution is create an component named ng-img(NgImgComponent)

import {Component, Input} from '@angular/core';

@Component({
    selector: 'ng-img',
    template: `<img [attr.class]="class" [attr.src]="src" style="width: 100%; height: 100%">`
})
export class NgImgComponent {
    @Input("src") src;
    @Input("class") class;

    constructor() { }
}

and then replace <img> with <ng-img>. <ng-img class="pokemon-icon" src="./images/pokemon/icons/{{p.id}}.png"></ng-img>

With <ng-img>, it not necessary to put ALL template to app.ts.