如何使用angular-cli构建包含自定义文件？

4 回答

• 53

  angular-cli.json的“assets”属性可以配置为包含angular-cli webpack构建中的自定义文件 . 因此，将“assets”属性值配置为数组 . 例如：

  "assets": ["assets", "config.json",".htaccess"],
  

  上面的配置会在angular-cli webpack构建期间将config.jsn和.htaccess复制到dist文件夹中 . 以上设置适用于angular-cli版本1.0.0-beta.18

  回复于 2024-05-03T17:32:42+08:00
• 7

  当前正确答案：

  该团队已经在更高版本的Angular CLI中添加了对将特定文件按原样复制到输出文件夹（默认为 dist ）的支持（将是beta 17或19 - 它已经在最终的1.x版本中使用了很长时间） .

  你只需将它添加到 angular-cli.json 中的数组中：

  {
    ...
    "apps" [
      {
         "root": "src",
         "assets": [
           "assets",
           "web.config"
         ],
         ...
      }
    ]
    ...
  }
  

  （注意路径是相对于 src 文件夹的）

  我个人使用它，它工作得很好 .

  从beta 24开始，我在Angular CLI中添加了一项功能，确保在运行ng test而不仅仅是ng serve时，从webpack dev服务器提供所有资产文件和文件夹 .

  它还支持在用于单元测试的webpack dev服务器中提供资产文件（ ng test ） .
  （如果你需要一些JSON文件用于测试，或者只是讨厌在控制台中看到404警告） .
  它们已经从 ng e2e 提供，因为它运行完整 ng serve .

  它还具有更多高级功能，例如从文件夹中过滤您想要的文件，以及输出文件夹名称与源文件夹不同：

  {
    ...
    "apps" [
      {
        "root": "src",
        "assets": [
          "assets",
          "web.config",
          {
            // Copy contents in this folder
            "input": "../",
            // That matches this wildcard
            "glob": "*.config",
            // And put them in this folder under `dist` ('.' means put it in `dist` directly)
            "output": "."
          }
        ],
        ...
      }
    ]
    ...
  }
  

  .

  ---

  .

  [仅供存档]原始答案（2016年10月6日）：

  目前不支持此功能（从beta-16开始） . 我向团队提出了确切的关注（web.config文件），但它似乎不会很快发生（除非你要求CLI等） .

  请关注this issue以获取完整的讨论和未来可能的详细信息 .
  附：
  对于JSON文件，您可以将其放在 ./src/assets/ 中 . 此文件夹按原样复制到 ./dist/assets/ . 这是当前的行为 .

  在systemJS早期，有另一个 ./public/ 文件夹被直接复制到 ./dist/ ，但这在Webpack版本中消失了，上面讨论的问题讨论过 .

  回复于 2024-05-03T17:32:42+08:00
• 93

  一个解决方案（虽然在我看来有点像黑客）是在 main.ts 文件中声明一个变量，它需要你想要包含在webpack构建输出中的额外文件 .

  EX：

  import './polyfills.ts';
  
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { enableProdMode } from '@angular/core';
  import { environment } from './environments/environment';
  import { AppModule } from './app/';
  
  /* HACK: Include standalone web.config file manually in webpack build
   *
   * Due to the way the beta angular-cli abstracts the webpack config files into
   * angular-cli.json and lacks current documentation we were unable to find
   * a way to include additional files manually in the webpack build output.
   *
   * For hosting on IIS we need to include a web.config file for
   * specifying rewrite rules to make IIS compatible with the Angular Router.
   * The one liner following this comment is a hack to accomplish this
   * and should be reviewed and corrected as soon as adequete documentation
   * is available for the angular-cli configuration file.
   */
  const webConfig = require('file?name=[name].[ext]!./web.config');
  
  if (environment.production) {
      enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  

  当webpack在 main.ts 中遇到此变量声明语句时，它将作为构建输出的一部分发出原始 web.config 文件：

  Asset       Size  Chunks             Chunk Names
                         inline.map    5.59 kB       2  [emitted]  inline
                         web.config  684 bytes          [emitted]
                   styles.bundle.js    16.7 kB    1, 2  [emitted]  styles
                          inline.js    5.53 kB       2  [emitted]  inline
                           main.map    5.36 MB    0, 2  [emitted]  main
                         styles.map    22.6 kB    1, 2  [emitted]  styles
                     main.bundle.js    4.85 MB    0, 2  [emitted]  main
                         index.html    1.98 kB          [emitted]
                  assets/.npmignore    0 bytes          [emitted]
           assets/styles/global.css    2.74 kB          [emitted]
  Child html-webpack-plugin for "index.html":
           Asset     Size  Chunks       Chunk Names
      index.html  4.45 kB       0
  webpack: bundle is now VALID.
  

  一个理想的解决方案是在webpack配置中，但是我无法通过 angular-cli.json （beta.16）对angular-cli如何管理这个问题做出正面或反面 .

  因此，如果有人有一个更好的答案，扩展webpack配置为angular-cli生成的项目，我很乐意听到它 .

  回复于 2024-05-03T17:32:42+08:00
• 1

  angular-cli.json文件中有一个“脚本”部分 . 您可以在那里添加所有第三方javascript文件 .

  回复于 2024-05-03T17:32:42+08:00