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 run html 应该将所有 css 和 html 文件从 app/ 文件夹复制到 dist/app/

编辑：我想修改我的答案以指出angular-cli。这个命令行工具工具得到了 Angular 团队的支持，并且使捆绑变得轻而易举（ng build --prod）等等。

Answer 2

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

• 安装shelljs
• 将静态资源添加到copyStaticAssets.ts 文件中

import * as shell from "shelljs";

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

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

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

Answer 3

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

Answer 4

在我的回答中使用nodemon 作为替代方案：Watch template files and copy them to dist/ folder 可以使用package.json 进行配置，以便将您的 css 和 html 文件与您的主机操作系统的简单复制命令一起放置。

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

Answer 5

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

对于您的情况，我认为类似的方法会起作用：

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

Answer 6

从贝尔纳多的回答我改变了这个

 "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。希望这有帮助！

Answer 7

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

您必须使用复制方法复制 *.html 和 *.css 等其他文件，例如 npm 脚本中的 cp shell 命令或 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,
      }
}