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和{{ 1}}属性。或者，最好为此自定义库创建一个完全独立的模块，然后将该模块添加到 app.module 的exports属性中。例如：

<强> CDF-media.module.ts

imports

<强> app.modules.ts

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

Answer 2

＆＃13;

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

＆＃13;

试试这个。 CSS。不能少。

Angualr2 AngularCLI App无法在node_modules库中找到HTML文件

2 个答案: