Приложение Angualr2 AngularCLI не может найти файлы HTML в библиотеке node_modules

У меня есть приложение 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, которую я пытаюсь заставить работать внутри своего приложения. Как заставить мое приложение обслуживать компоненты и соответствующие файлы HTML, CSS из библиотеки в node_modules?

Вот мои подробности об Angular-CLI:

angular-cli: 1.0.0-beta.18
node: 6.6.0
os: 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 может найти этот файл, потому что у меня есть intellisense, и он не жалуется на его отсутствие. Однако во время выполнения файлы HTML и CSS не найдены (404), и приложение ищет их в корне приложения (http://localhost:4200/cdf-media-slider.component.html).

Как получить правильный путь к файлам HTML и CSS?

Спасибо за вашу помощь.


npm-install angular angular2-cli
person Tom Schreck    schedule 24.10.2016    source источник
comment
Вы добавили свой модуль в system-config.ts file в массиве barrels const?   -  person Reyraa    schedule 24.10.2016
comment
А также после того, как вы добавили, вам нужно снова запустить ng serve.   -  person Reyraa    schedule 24.10.2016
comment
система-config.ts? AngularCLI не создавал system-config.ts. Как этот файл подключен?   -  person Tom Schreck    schedule 24.10.2016
comment
я использую angular-cli версии 1.0.0-beta.17. Используется ли system-config в этой версии?   -  person Tom Schreck    schedule 24.10.2016
comment
Только что обнаруженная последняя версия angular-cli использует веб-пакет, поэтому system-config больше не используется.   -  person Tom Schreck    schedule 24.10.2016
comment
Хорошо, извините, я устарел!   -  person Reyraa    schedule 24.10.2016
comment
Как пользовательский компонент загружает шаблон? Не могли бы вы предоставить код декоратора?   -  person Stefan Negele    schedule 27.10.2016

Ответы (2)


arrow_upward
1
arrow_downward

WebPack достаточно умен, чтобы захватить эти файлы, если они включены правильно. Если бы вы могли предоставить ссылку на пакет npm, было бы проще сказать, но вам может просто понадобиться добавить импорт модуля.

Если в библиотеке нет модуля, вы можете либо создать его, либо просто добавить компоненты/директивы в основной модуль.

В объявлении app.module.ts @NgModule добавьте CdfMediaGridComponent и любые другие директивы/компоненты в этой библиотеке к свойствам declarations и exports. В качестве альтернативы было бы лучше сделать полностью отдельный модуль для этой пользовательской библиотеки и просто добавить этот модуль в свойство imports app.module. Пример:

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 {
}
person Fiddles    schedule 02.11.2016

arrow_upward
0
arrow_downward 

 

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

Попробуй это. Cсс. Не меньше.

person Kriben    schedule 02.11.2016