6

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

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

cdf-video.component 是一个自定义 Angular2 库，我正试图在我的应用程序中工作。如何让我的应用程序从 node_modules 的库中提供组件和相应的 HTML、CSS 文件？

以下是我关于 Angular-CLI 的详细信息：

角度-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 文件的适当路径？

谢谢你的帮助。

4

2 回答 2

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 {
}
于 2016-11-02T06:55:08.823 回答
0 

 

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

尝试这个。CSS。不少于。

于 2016-11-02T07:49:54.287 回答