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文件。

您必须在npm脚本中使用cp shell命令等复制方法复制其他文件，例如* .html和* .css，或者grunt-contrib-copy。

使用npm脚本的示例：

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

只需在shell中运行npm run html。

使用grunt的例子：

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

Answer 3

根据Bernardo的回答，我更改了此

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

{{2}并且工作得很好。在一条指令中编译和复制html和css文件我还添加了这个

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

以删除整个目录 dist 。希望这有帮助！

Answer 4

此方法由Microsoft提供：-
https://github.com/Microsoft/TypeScript-Node-Starter
检出文件“ copyStaticAssets”。上面的解决方案都不适合我，因此我希望这对像我这样的人有所帮助。

Answer 5

@yesh kumar，感谢您分享链接。这是我做的步骤

安装shelljs
将静态资产添加到copyStaticAssets.ts文件

import * as shell from "shelljs";

shell.cp("-R", "lib/certs", "dist/");

在ts-node copyStaticAssets.ts脚本部分配置package.json

"scripts": {
  "build": "tsc && npm run copy-static-assets",
  "prod": "npm run build && npm run start",
  "copy-static-assets": "ts-node copyStaticAssets.ts"
 }

Answer 6

作为我在此处的详细答案的替代方案：https://stackoverflow.com/a/40694657/986160 可能是你的css和html与ts文件。然后你可以使用module.id，它将指向组件的js的路径，并在相应地转换它之后你基本上可以使用相对路径：）

对于你的情况，我认为类似的东西会起作用：

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

Answer 7

从这里我的答案中，使用nodemon作为替代方案：Watch template files and copy them to dist/ folder可以使用package.json进行配置，以将css和html文件与主机操作系统的简单副本一起使用。

但是，这几天，您在Angular 4/5生态系统中拥有Webpack。

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

7 个答案: