Angualr2 AngularCLI App無法在node_modules庫中找到HTML文件

Question

我有一個Angular2 Angular-CLI應用程序，它使用通過NPM（node_modules文件夾）安裝的自定義庫。 我的Angular2應用程序可以在設計時找到自定義庫組件。 但是，當通過ng服務提供應用程序時，應用程序錯誤在運行時出現404錯誤的HTML，通過NPM安裝的自定義庫中存在的CSS文件：

http：// localhost：4200 / cdf-media-slider.component.html 404（未找到）

cdf-video.component是一個自定義的Angular2庫，我正試圖在我的應用程序中工作。 如何讓我的應用程序從node_modules中的庫中提供組件和相應的HTML，CSS文件？

以下是Angular-CLI的詳細信息：

angular-cli：1.0.0-beta.18
節點：6.6.0
os：win32 x64

以下是自定義組件加載HTML文件的方式：

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...
    ...
}

cdf-media-slider.component.html和cdf-media-slider.component.less與此組件位於同一文件夾中。 此代碼最終駐留在node_modules中。 我正在使用桶方法來表示代碼，其中每個文件夾都有一個index.ts文件，用於導出它的內容。 每個父文件夾都有一個index.ts，用於導出它的子索引等。

在我的客戶端應用程序中使用此自定義組件，我正在導入組件，如下所示：

import { CdfMediaGridComponent }  from 'ng2cdf/index';

VisualStudio代碼可以找到此文件，因為我有智能感知，並且它不會抱怨它丟失。 但是，在運行時，找不到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。 不會少。