Angular CLI - 再利用可能なコンポーネントのイメージパスの参照方法

Question

他のアプリケーションで参照される再利用可能なコンポーネントにイメージを含める方法を理解するのに役立つ必要があります。

例えば、私は角型アプリケーションを持っています。一般的なコンポーネントと別の角型アプリケーションを含むUI-Commonと呼んでいます。コマンド・センターと呼ぶことにしましょう。 UI-共通に

、以下のように定義されるMY-control.componentと呼ばれるコンポーネントがある：

は[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> 

[私の-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() { 

    } 
} 

コマンドセンターでは、UI-Commonをpackage.jsonの依存関係として追加します。コマンド・センターのコンポーネントが作成され、次のように私の-control.componentを使用している：

[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'; 
    } 
} 

問題は、コマンド・センターから実行したときのmy-controlのイメージがまったく読み込まれないことです。これは、「assets/images/myImage.png」で使用されているイメージパスがCommand-Centerに存在しないためです。 Command-Centerのassetsフォルダにイメージのコピーを保存したくありません。共通コンポーネント内の画像を適切に処理するにはどうすればよいですか？

Answer 1

：https://github.com/angular/angular-cli/issues/3555

角度アプリを設定することができます相対ファイルパスからアプリケーションの配布ディレクトリ内のフォルダにファイルをコピーします。これにより、手動でローカルアセットフォルダに画像をコピーすることなく、node_modulesフォルダ内から画像にアクセスすることができます。次のように

は角CLI（1.2.1）の最新バージョンにアップデートした後、私は私のアンギュラcli.jsonファイルを変更：

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

は今UI-共通アプリ内にあるすべての画像がアクセスできますコマンドセンターアプリにここでの設定について

詳細：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 : '/' }] 
]); 

私はあなたが画像を使用したいモジュールのために、このような何かをする必要があると思うこの角度CLI機能要求見つかり