Angular 2 + Typescript编译器复制HTML和CSS文件 [英] Angular 2 + Typescript compiler copy html and css files

问题描述

在Angular2中，我将拥有

In Angular2 I would have

"outDir": "dist/app"

tsconfig.json中的

.结果，在/dist/app/文件夹和/或其子文件夹中生成了已转译的.js和.map文件.一切正常.

in tsconfig.json. As a result the transpiled .js and .map files are generated in /dist/app/ folder and/or its sub folders. That works all fine.

在我的components.ts文件中，我还像这样使用了引用的html和css

In my components.ts files I also used referenced html and css like this

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

有没有办法使编译器也为整个项目复制引用的html和css文件? 如果是，我将如何配置tsconfig.json?

Is there any way to make compiler to also copy the referenced html and css files for the whole project? If yes, how would I configure my tsconfig.json?

我在这里查看了编译器选项 https://www.typescriptlang.org/docs/handbook/compiler-options.html ，但未发现有关复制html/css文件的任何信息.

I looked into the compiler options here https://www.typescriptlang.org/docs/handbook/compiler-options.html but didn't find anything about copying html/css files.

更新: 我的文件夹结构是这样的

Update: My folder structure is like this

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

tsconfig.json

tsconfig.json

"outDir": "dist/app"

package.json

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文件.不过没有错误.

It doesn't copy html files. There is no error though.

再次更新:

对于使用Linux OS的用户，Bernardo的解决方案是可行的. 对于使用Windows操作系统的用户，以下方法应适用.

For those who are on Linux OS, Bernardo's solution is a working one. For those who are on Windows OS, the following should work.

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

推荐答案

不，TypeScript编译器仅用于* .ts文件.

No, the TypeScript compiler is just for *.ts file.

您必须使用npm脚本中的cp shell命令或

You have to copy other files like *.html and *.css using a copy method like cp shell command inside a npm script or grunt-contrib-copy for example.

使用npm脚本的示例:

Example using npm script:

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

只需在外壳中运行npm run html.

使用grunt的示例:

Example using grunt:

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

这篇关于Angular 2 + Typescript编译器复制HTML和CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！