Angualr2 AngularCLIアプリケーションがnode_modulesライブラリのHTMLファイルを見つけることができません

Question

NPM（node_modulesフォルダ）経由でインストールされたカスタムライブラリを使用しているAngular2 Angular-CLIアプリケーションがあります。私のAngular2アプリは、デザイン時にカスタムライブラリコンポーネントを配置できます。しかし、NPM経由でインストールされたカスタムライブラリに存在するCSSファイル、HTMLのための404エラーで、NGを経由して、実行時にアプリケーションエラーをアプリに役立つ提供する際：

http://localhost:4200/cdf-media-slider.component.html 404（見つかりません）

cdf-は、 video.componentは私のアプリ内で作業しようとしているカスタムAngular2ライブラリです。どのようにしてコンポーネントと対応するHTML、CSSファイルをnode_modulesのライブラリから提供するようにアプリケーションを設定するのですか？ここで

私の詳細は角度-CLIの周りにある：

角度-CLI：1.0.0-beta.18
ノード：6.6.0
OS：Win32のx64の

ここ

ですかカスタムコンポーネントCDF-メディアslider.component.htmlとCDF-メディアslider.component.lessこのコンポーネントと同じフォルダに存在

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

@Component({ 
    selector: 'cdf-media-slider', 
    templateUrl: './cdf-media-slider.component.html', 
    styleUrls: [ './cdf-media-slider.component.less' ] 
}) 
export class CdfMediaGridComponent implements OnInit, AfterViewInit 
{ 
    //IMPLEMENTATION CODE HERE... 
    ... 
} 

：HTMLファイルをロードしています。このコードは最終的にnode_modulesにあります。私は各フォルダにその内容をエクスポートするindex.tsファイルがあるコードを浮上させるためのバレルアプローチを使用しています。それぞれの親フォルダは、それが、私はこのような部品を輸入しています。このカスタムコンポーネントを消費子のインデックスなど、私のクライアントアプリで

の輸出index.tsがあります

import { CdfMediaGridComponent } from 'ng2cdf/index'; 

VisualStudioのコードを見つけることができます。この私はintellisenseがあり、それが不足していると不平を言っていないので、ファイル。しかし、実行時に、HTMLファイルとCSSファイルは見つからず（404）、アプリケーションはアプリケーションのルート（http://localhost:4200/cdf-media-slider.component.html）でそれらを探しています。

HTMLファイルとCSSファイルへの適切なパスはどのようにして得られますか？

ありがとうございました。

Answer 1

WebPackは、それらが適切に含まれている限り、これらのファイルを取得するのに十分スマートです。 npmパッケージへのリンクを提供することができれば、分かりやすくなりますが、モジュールインポートを追加するだけでよいでしょう。

ライブラリにモジュールがない場合は、モジュールを作成するか、コンポーネント/ディレクティブをメインモジュールに追加するだけです。あなたのapp.module.ts@NgModule宣言で

、CdfMediaGridComponentを追加し、両方declarationsとexportsプロパティにそのライブラリ内の他のディレクティブ/コンポーネント。 また、このカスタムライブラリ用に完全に別のモジュールを作成し、そのモジュールをapp.moduleのimportsプロパティに追加する方がよいでしょう。例：

CDF-media.module.ts

@NgModule({ 
    declarations: [ 
    CdfMediaGridComponent, 
    CdfSliderDirective, 
    EtcDirective, 
    ... 
    ], 
    providers: [], 
    imports: [], 
    exports: [ 
    CdfMediaGridComponent, 
    CdfSliderDirective, 
    EtcDirective, 
    ... 
    ] 
}) 
export class CdfMediaModule { 
} 

app.modules。TS

@NgModule({ 
    declarations: [ 
    MyAppComponent 
    ... 
    ], 
    providers: [], 
    imports: [CdfMediaModule], 
    exports: [ 
    MyAppComponent 
    ... 
    ] 
}) 
export class AppModule { 
} 

Answer 2

 

 
templateUrl: 'app/cdf-media-slider.component.html', 
 
styleUrls: [ 'app/cdf-media-slider.component.css' ]

はこれを試してみてください。 Css。劣らず。