Angualr2 AngularCLI App cannot find HTML files in node_modules library

Question

I have a Angular2 Angular-CLI app which is consuming a custom library installed via NPM (node_modules folder). My Angular2 app can located the custom library components at design time. However, when serving the app via ng serve, the app errors at runtime with a 404 error for HTML, CSS files that exist in the custom library installed via NPM:

http://localhost:4200/cdf-media-slider.component.html 404 (Not Found)

cdf-video.component is a custom Angular2 library I'm trying to get to work inside my app. How do I get my app to serve components and corresponding HTML, CSS files from a library in node_modules?

Here are my particulars around Angular-CLI:

angular-cli: 1.0.0-beta.18
node: 6.6.0
os: win32 x64

Here's how the custom component is loading HTML file:

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 and cdf-media-slider.component.less reside in the same folder as this component. This code ultimately resides in node_modules. I'm using barrel approach for surfacing code where each folder has an index.ts file that exports it's contents. Each parent folder has an index.ts that exports it's child's index etc.

In my client app that consumes this custom component, I'm importing the component like this:

import { CdfMediaGridComponent }  from 'ng2cdf/index';

VisualStudio Code can find this file because I have intellisense and it doesn't complain about it being missing. At run-time however, the HTML and CSS files are not found (404) and the app is looking for them at the root of the app (http://localhost:4200/cdf-media-slider.component.html).

How do you get the appropriate path to the HTML and CSS files?

Thanks for your help.

Answer 1

WebPack is smart enough to grab those files, so long as they're being included right. If you could provide a link to the npm package it would be easier to tell, but you may just need to add a module import.

If the library doesn't have a module, you could either create one for it, or simply add the components/directives to the main module.

In your app.module.ts @NgModule declaration, add CdfMediaGridComponent and any other directives/components in that library to both the declarations and exports properties. Alternatively, it would be better to make a completely a separate module for this custom library, and just add that module to app.module's imports property. Example:

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