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。 不会少。