Angular 2 + Typescript компилятор скопировать html и css файлы

В Angular2 у меня было бы

"outDir": "dist/app"

в tsconfig.json. В результате файлы с расширением .js и .map создаются в папке/dist/app/и/или ее подпапках. Это прекрасно работает.

В моих файлах components.ts я также использовал ссылки html и css, подобные этому

@Component({
  selector: 'my-app', 
  templateUrl: 'app/appshell/app.component.html',
  styleUrls: ['app/appshell/app.component.css'],
  ......
}

Есть ли способ заставить компилятор также скопировать ссылки на файлы html и css для всего проекта? Если да, как мне настроить tsconfig.json?

Я просмотрел параметры компилятора здесь https://www.typescriptlang.org/docs/handbook/compiler-options.html, но ничего не нашел о копировании файлов html/css.

Update: Моя структура папок похожа на

Root
  |--app       // for ts
  |--dist/app  // for js

tsconfig.json

"outDir": "dist/app"

package.json

{
  "name": "TestApp",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;",
    ......
}

Он не копирует html файлы. Однако нет ошибки.

Обновить снова:

Для тех, кто находится на ОС Linux, решение Bernardo является рабочим. Для тех, кто находится в ОС Windows, должно работать следующее.

  "scripts": {
    "html": "XCOPY /S /y .\\app\\*.html .\\dist\\app" }

Ответы

Ответ 1

Нет, компилятор TypeScript предназначен только для файла *.ts.

Вам нужно скопировать другие файлы, такие как *.html и *.css, используя метод копирования, например, команду оболочки cp внутри npm script или grunt-contrib-copy например.

Пример использования npm script:

"scripts": {
  "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;"
}

Просто запустите npm run html в оболочке.

Пример использования grunt:

copy: {
      html: {
          src: ['**/*.html'],
          dest: 'dist',
          cwd: 'app',
          expand: true,
      }
}

Ответ 2

Для независимого от ОС решения используйте copyfiles

npm install copyfiles --save-dev

Затем добавьте скрипт в package.json

"scripts": {
  "html": "copyfiles -u 1 app/**/*.html app/**/*.css dist/"
}

Теперь npm run html должен скопировать все файлы css и html из приложения/папки в dist/app/

РЕДАКТИРОВАТЬ: Я хотел бы изменить свой ответ, чтобы указать на angular-cli. Эта утилита для работы с командной строкой поддерживается командой angular и, помимо прочего, позволяет объединять пакеты (ng build --prod).

Ответ 3

Из ответа Bernardo я изменил этот

 "html": "find ./app -name '.html' -type f -exec cp --parents {} ./dist \\;"

для этого

"html": "cd app && tsc && find . \( -name '.html' -or -name '*.css' \) -type f -exec cp --parents {} ../dist \\;"

и работает хорошо. Скомпилируйте и скопируйте файлы html и css в одну инструкцию. Я также добавил этот

"clean": "rm -rf dist"

, чтобы удалить весь каталог dist. Надеюсь эта помощь!

Ответ 4

Этот подход предоставляется Microsoft:
https://github.com/Microsoft/TypeScript-Node-Starter
Проверьте файл "copyStaticAssets". Ни одно из приведенных выше решений не помогло мне, поэтому я надеюсь, что это поможет кому-то вроде меня.

Ответ 5

@yesh kumar, спасибо, что поделились ссылкой. Вот шаги, которые я сделал

Установить shelljs
Добавить статические ресурсы в файл copyStaticAssets.ts

import * as shell from "shelljs";

shell.cp("-R", "lib/certs", "dist/");

Ответ 6

В качестве альтернативы из моего подробного ответа здесь: fooobar.com/questions/71827/... может быть оставить ваши css и html с ts файлами. Затем вы можете использовать module.id, который будет иметь путь, указывающий на js компонента, и после его преобразования вы можете по существу использовать относительные пути:)

В вашем случае я думаю, что что-то вроде этого будет работать:

@Component({
   moduleId: module.id.replace("/dist/", "/"),
...
});

Ответ 7

В качестве альтернативы, используя nodemon из моего ответа здесь: Смотрите файлы шаблонов и копируйте их в dist/folder, можно настроить с помощью package.json чтобы поместить ваши css и html файлы с простым коммандом копирования вашей операционной системы.

Но в наши дни у вас есть Webpack в экосистеме Angular 4/5.