Angular CLI - How to reference image paths in reusable components

Question

Need help figuring out how to include images in a reusable component that is referenced in another app.

For example, I have an Angular App, let's call it UI-Common, that contains common components and another Angular App, let's call it Command-Center, that will use those common components.

In UI-Common, there is a component called my-control.component that is defined as follows:

[my-control.component.html]

<div>
<img src="assets/images/myImage.png"/>
<div class"username" *ngIf="user">
    <p><strong>{{user.companyName}}</strong></p>
    <p>{{user.firstName + ' ' + user.lastName}}</p>
</div>

[my-control.component.ts]

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

import { User } from '../../models/user';

@Component({
    selector: 'my-control',
    templateUrl: './my-control.component.html',
    styleUrls: ['./my-control.component.scss'],
})
export class MyControlComponent {
    @Input() user: User;

    constructor() {

    }
}

In Command-Center, it adds UI-Common as a dependency in the package.json. A Command-Center component is created and uses my-control.component as follows:

[app.module.ts]

...
import { HomeComponent } from './home/home.component';
import { MyControlComponent } from 'ui-common';

@NgModule({
   declarations: [
      ...,
      HomeComponent,
      MyControlComponent,
      ...
   ],
   ...
})
export class AppModule { }

[home.component.html]

<my-control [user]=user></my-control>
<div class="homeContent">
    blah blah blah...
</div>

[home.component.ts]

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

import { User } from 'ui-common';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  user: User;

  constructor() {
    this.user = new User();
    this.user.companyName = 'iHeartMedia';
    this.user.firstName = 'John';
    this.user.lastName = 'Smith';
  }
}

The problem is the image on my-control when running from Command-Center does not load at all. This appears to be because the image path being used "assets/images/myImage.png" does not exist in Command-Center. I don't want to save a copy of the image in the Command-Center's assets folder. How do I properly handle images in the common component?

Answer 1

Found this Angular CLI feature request: https://github.com/angular/angular-cli/issues/3555

The Angular app can be configured to copy files from a relative file path to a folder within the app's distribution directory. This allows us to get access to images from within the node_modules folder without having to manually copy the images into the local assets folder.

After updating to the latest version of Angular CLI (1.2.1) I modified my angular-cli.json file as follows:

{
...
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "version.txt",
        {
          "glob": "**/*",
          "input": "../node_modules/ui-common/src/assets/images",
          "output": "./assets/images"
        }
      ],
...
}

Now all images that are in the UI-Common app are accessible to the Command-Center app.

More details about the configuration here: https://github.com/angular/angular-cli/wiki/stories-asset-configuration

Answer 2

import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  declarations: [ ... ],
  imports: [ ... ], 
  providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]); 

I think you need to do something like this for the module you want to to use the image in.