Как npm опубликовать компонент Angular2 с отдельным файлом html templateUrl?

Question

Я создаю библиотеку Angular2, которая определяет некоторые компоненты. Я пытаюсь опубликовать эту библиотеку как модуль npm, а затем npm install и использовать его в других моих проектах Angular2.

Я следил за учебниками, такими как [1] и [2]. Это привело меня к тому, что я могу успешно импортировать службы и компоненты, которые определяют их встроенный шаблон (например, template: '<p>hello world</p>') из моей библиотеки.

Однако, когда я импортирую компоненты, которые определяют их шаблон в отдельном файле, используя templateUrl: 'app/hello-world.component.html', мое приложение, которое импортирует этот компонент, пытается загрузить файл шаблона в моей директории проекта, а не в каталог node_modules/ установленной библиотеки. Очевидно, что это приводит к ошибке:

404 Not Found - http://localhost:3000/app/hello-world.component.html

Есть ли способ публикации библиотеки Angular2, которая использует templateUrl с в компонентах? Или есть обходной путь, как инструмент, который может автоматически встраивать любые ссылки templateUrl при пересылке моих компонентов TypeScript на JavaScript?

В случае, если это актуально: в настоящее время я использую SystemJS.

Answer 1

встраивание шаблоны имеет важное значение для повышения производительности и, таким образом это имеет смысл, чтобы получить их встраиваемыми перед публикацией пакета. Только для быстрого развития это барьер.

Мое решение - использовать расширение gulp gulp-inline-ng2-template для создания встроенной версии моего кода и ссылки на библиотеку в dist, а не на папку app из других моих проектов.

gulpfile.js:

var gulp = require('gulp'), 
    inlineNg2Template = require('gulp-inline-ng2-template'); 

gulp.task('inline-templates', function() { 
    return gulp.src('app/**/*.ts') 
     .pipe(inlineNg2Template({useRelativePaths: true, indent: 0, removeLineBreaks: true})) 
     .pipe(gulp.dest('dist')); 
}); 

Answer 2

Если вы используете глоток, есть пакет под названием gulp-angular2-embed-templates, который займет ваше имущество templateUrl и вложит его в собственность template.

https://www.npmjs.com/package/gulp-angular2-embed-templates