Angualr2 AngularCLI App kann keine HTML-Dateien in der Bibliothek node_modules finden

Question

Ich habe eine Angular2 Angular-CLI-App, die eine benutzerdefinierte Bibliothek verwendet, die über NPM installiert wird (Ordner node_modules). Meine Angular2-App kann die benutzerdefinierten Bibliothekskomponenten zur Entwurfszeit finden. Wenn jedoch die App dient über ng dienen, die App-Fehler zur Laufzeit mit einem 404-Fehler für HTML, CSS-Dateien, die es gibt in der benutzerdefinierten Bibliothek über NPM installiert:

http://localhost:4200/cdf-media-slider.component.html 404 (nicht gefunden)

cdf- video.component ist eine benutzerdefinierte Angular2-Bibliothek, die ich versuche, in meiner App zur Arbeit zu gelangen. Wie bekomme ich meine App, Komponenten und entsprechende HTML-, CSS-Dateien aus einer Bibliothek in node_module zu liefern?

Hier sind meine Angaben um Angular-CLI:

Winkel-cli: 1.0.0-beta.18
Knoten: 6.6.0
os: win32 x64

Hier ist, wie die benutzerdefinierte Komponente wird geladen HTML-Datei:

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 und CDF-media-slider.component.less residieren im selben Ordner wie diese Komponente. Dieser Code befindet sich letztendlich in node_modules. Ich benutze barrel approach für das Auftauchen von Code wo jeder Ordner eine index.ts Datei hat, die den Inhalt exportiert. Jeder übergeordneten Ordner hat eine index.ts, dass es ein Kinder Index etc.

In meinem Client-Anwendung exportiert, die diese benutzerdefinierte Komponente verbraucht, ich bin die Komponente wie folgt importieren:

import { CdfMediaGridComponent } from 'ng2cdf/index'; 

Visual Studio-Code kann finden diese Datei, weil ich Intellisense habe und es sich nicht darüber beschwert, dass es fehlt. Zur Laufzeit werden die HTML- und CSS-Dateien nicht gefunden (404) und die App sucht sie im Stammverzeichnis der App (http://localhost:4200/cdf-media-slider.component.html).

Wie erhalten Sie den entsprechenden Pfad zu den HTML- und CSS-Dateien?

Danke für Ihre Hilfe.

Answer 1

WebPack ist intelligent genug, um diese Dateien zu erfassen, solange sie richtig aufgenommen werden. Wenn Sie einen Link zum npm-Paket bereitstellen könnten, wäre es einfacher zu sagen, aber Sie müssen nur einen Modulimport hinzufügen.

Wenn die Bibliothek kein Modul besitzt, können Sie entweder ein Modul dafür erstellen oder einfach die Komponenten/Anweisungen zum Hauptmodul hinzufügen.

In Ihrem app.module.ts@NgModule Erklärung, fügen CdfMediaGridComponent und alle anderen Richtlinien/Komponenten in der Bibliothek sowohl für die declarations und exports Eigenschaften. Alternativ wäre es besser, ein vollständig separates Modul für diese benutzerdefinierte Bibliothek zu erstellen, und fügen Sie dieses Modul nur app.module 's imports Eigenschaft hinzu. Beispiel:

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' ]

Versuchen Sie dies. Css. nicht weniger.