Angular 2 + Typescript编译器复制html和css文件

Question

在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文件的任何信息.

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

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" }

Answer 1

对于独立于操作系统的解决方案,请使用copyfiles

npm install copyfiles --save-dev

然后向package.json添加一个脚本

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

现在npm运行html应该将app /文件夹中的所有css和html文件复制到dist/app /

编辑:我想修改我的答案,指出angular-cli.角度团队支持此命令行工具实用程序,并使捆绑变得轻而易举(ng build --prod)等.

Answer 2

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

你必须使用像cpnpm脚本中的shell命令或grunt-contrib-copy这样的复制方法来复制其他文件,如*.html和*.css .

使用npm脚本的示例:

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

只需npm run html在shell中运行.

使用grunt的示例:

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