Angualr2 AngularCLI application cannot find HTML files in node_modules library

Question

I have an Angular2 Angular -CLI application that uses a custom library installed through the NPM folder (node_modules). My Angular2 application can host custom library components during development. However, when servicing the application through the ng service, application errors at runtime with a 404 error for HTML, CSS files that exist in the user library installed via NPM:

http: // localhost: 4200 / cdf-media-slider.component.html 404 (not found)

cdf-video.component is the regular Angular2 library that I'm trying to work with inside my application. How to get my application for servicing components and related HTML, CSS files from a library in node_modules?

Here are my details about Angular -CLI:

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

Here's how a custom component loads an 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 are in the same folder as this component. This code is ultimately located in node_modules. I use the barrel method to determine the code, where each folder has an index.ts file that exports its contents. Each parent folder has an index.ts index, which exports its child index, etc.

In my client application that consumes this custom component, I import the component as follows:

 import { CdfMediaGridComponent } from 'ng2cdf/index'; 

VisualStudio code can find this file because I have intellisense and it does not complain that it is missing. However, at runtime, no HTML or CSS files were found (404), and the application looks for them in the root of the application ( http: // localhost: 4200 / cdf-media-slider.component.html ).

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

Thanks for your help.

Answer 1

WebPack is smart enough to capture these files if they are included correctly. If you could provide a link to the npm package, it would be easier to say, but you may just need to add a module import.

If the library does not have a module, you can either create one for it, or simply add components / directives to the main module.

In the app.module.ts @NgModule @NgModule add CdfMediaGridComponent and any other directives / components in this library to the declarations and exports properties. Alternatively, it would be better to make a completely separate module for this user library and simply add this module to the app.module 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 { } 

Answer 2

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

Try it. Css. no less.