Angualr2 AngularCLI Aplikacja nie może znaleźć plików HTML w bibliotece node_modules

Question

Mam aplikację Angular2 Angular-CLI, która pobiera niestandardową bibliotekę zainstalowaną za pośrednictwem NPM (folder node_modules). Moja aplikacja Angular2 może lokalizować niestandardowe składniki biblioteki w czasie projektowania. Jednak, gdy obsługujących aplikację poprzez ng służyć, błędy aplikacji przy starcie z 404 błędu dla HTML, pliki CSS, które istnieją w bibliotece niestandardowej zainstalowanego przez KMP:

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

cdf- video.component to niestandardowa biblioteka Angular2, którą próbuję dostać do pracy w mojej aplikacji. Jak mogę przekonać moją aplikację do udostępniania komponentów i odpowiednich plików HTML, CSS z biblioteki w module node_modules?

Oto moje dane wokół skośnych CLI:

kątowe-cli: 1.0.0-beta.18
węzeł: 6.6.0
OS: Win32 x64

Oto jak składnik niestandardowy ładuje plik 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 i cdf-media-slider.component.less przebywać w tym samym folderze co tego składnika. Ten kod ostatecznie znajduje się w module node_modules. Używam podejścia beczkowego do wynurzania kodu, w którym każdy folder ma plik index.ts, który eksportuje jego zawartość. Każdy folder dominująca jest index.ts że eksport jest to wskaźnik dziecka itp

W mojej aplikacji klienckiej, która pochłania ten niestandardowy składnik, jestem importowania składnika takiego:

import { CdfMediaGridComponent } from 'ng2cdf/index'; 

VisualStudio Kod ten można znaleźć plik, ponieważ mam intellisense i nie narzeka, że ​​go brakuje. W czasie wykonywania nie znaleziono plików HTML i CSS (404), a aplikacja szuka ich w katalogu głównym aplikacji (http://localhost:4200/cdf-media-slider.component.html).

Jak uzyskać odpowiednią ścieżkę do plików HTML i CSS?

Dzięki za pomoc.

Answer 1

Aplikacja WebPack jest wystarczająco inteligentna, aby pobrać te pliki, o ile są one uwzględniane prawidłowo. Jeśli mógłbyś podać link do pakietu npm, łatwiej byłoby powiedzieć, ale możesz po prostu dodać import modułu.

Jeśli biblioteka nie ma modułu, można utworzyć dla niej albo po prostu dodać komponenty/dyrektywy do modułu głównego.

W swoim app.module.ts@NgModule deklaracja, dodać CdfMediaGridComponent oraz innych dyrektyw/komponenty w tej biblioteki do obu declarations i exports właściwości. Alternatywnie lepiej byłoby utworzyć całkowicie oddzielny moduł dla tej niestandardowej biblioteki i po prostu dodać ten moduł do właściwości app.module o nazwie imports. Przykład:

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

Spróbuj tego. Css. nie mniej.