angular - Angualr2 AngularCLI App 在 node_modules 库中找不到 HTML 文件

Question

我有一个 Angular2 Angular-CLI 应用程序，它正在使用通过 NPM(node_modules 文件夹)安装的自定义库。我的 Angular2 应用程序可以在设计时定位自定义库组件。但是，当通过 ng serve 提供应用程序时，应用程序在运行时出错，对于通过 NPM 安装的自定义库中存在的 HTML 和 CSS 文件，出现 404 错误:

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
操作系统: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 Code 可以找到这个文件，因为我有智能感知，它不会提示它丢失了。然而，在运行时，未找到 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 {
}