【问题标题】:How to serve static directory from "ng serve"如何从“ng serve”提供静态目录
【发布时间】:2017-11-22 14:39:38
【问题描述】:

请问有没有类似的webpack dev server config这样的配置:

devServer : {
    historyApiFallback : true,
    stats : 'minimal',
    contentBase: helpers.root('../src/static'),
  }

我想从静态目录提供静态文件,就像 webpack 开发服务器如何提供文件一样。 谢谢

【问题讨论】:

  • 我不确定我的判断是否正确,但如果您使用的是 Angular CLI,src 文件夹下的 assets 可以提供静态文件。

标签: angular


【解决方案1】:

此答案已针对 Angular 8+ 进行了验证。如果你的静态文件在 sourceDir 之外(在你的 angular.json 文件中找到),例如在你的 node_modules 中的某个地方,那么你需要在你的 angular.json 文件中添加类似这样的东西:

    root: "",
    architect: {
      build: {
        options:{
          outputPath: "dist/smartui",
          assets: {
            {
              "glob": "**/*",
              "input": "node_modules/@cruxcode/smartpdf",
              "output": "smartpdf/"
            }
          }
        }
      }
    }

完成此操作后,无论何时构建项目或使用 ng serve,input 中的资产都将复制到您在 angular.json 文件中提到的 output 中,如上所示。 output 目录在您构建或服务后将出现在outputPath 目录中。

globinput 目录中匹配。

您的资产将在output/ 提供。在上面的示例中,我可以按如下方式访问代码中的资产 <img src="smartpdf/web/index.html">

【讨论】:

    【解决方案2】:

    是的,你可以。在angular.json 中,您可以使用名为assets 的条目。无论您在assets 值数组中包含什么文件或目录,都将通过ng serve 提供服务。无论您在projects/<your-project>/architect/build/options/assets 添加什么,都将在所有 构建配置中提供,并包含在生产构建的dist 目录中。

    如果您希望某些内容仅在开发或测试期间可用,您可以使用Build Configurations。默认情况下,您有一个部分 projects//architect/build/configurations/production。因此,您可以添加自己的部分,例如 ../build/configurations/dev(可能最初复制 production 部分中的任何内容)。然后,您可以在那里添加assets 条目。这些资产在生产配置中不可用。

    要将ng serve 启动到特定配置,请使用--configuration 参数。比如匹配dev配置:

    ng serve --configuration=dev
    

    免责声明:上面没有测试 - 只是阅读手册:-)

    【讨论】:

      【解决方案3】:

      是的,确实如此。

      在 Angular 应用的根目录中查找名为 angular.json 的文件。有一个条目叫做“资产”。在此处添加您的静态目录。他们下的任何内容都将通过ng serve 直接提供。当您上线时,所有这些文件都将被复制到 /dist 目录,因此它们也将在生产环境中提供。

      "projects": {
        "YourCoolProject": {
            "root": "",
            ...
            "architect": {
              "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                  "outputPath": "dist",
                  ...
                  "assets": [
                    "src/assets", 
                    "myOtherStaticFiles"   /* <-- Add *your* directory(s) here */
                  ],
                  "styles": [
                  ...
      

      附言是的,我知道您不能真正评论 JSON。让我休息一下。

      【讨论】:

      • 并且在添加另一个条目之前不要忘记逗号 :)
      • 我怎样才能调整它,以便资产在开发中提供服务,但不复制用于生产(在我的情况下,它们是由不同的开发过程复制的)?
      • 我有一个与@SimonH 类似的问题。就我而言,我想从外部目录(如在 UI 源代码树外部)中获取静态文件,这些文件在运行时添加并通过数据库行从 UI 内部链接到。在真实环境中,Nginx 代理服务器将被配置为同时提供 UI、环境静态文件(相对于应用程序静态文件)以及作为 REST 服务的代理。我想在我的桌面上测试“环境静态”文件,以确保我的应用程序逻辑在推出之前是正确的。在 angular.json 中包含另一个目录不会将这些文件带入我的发行版吗?
      • @SimonH 这里有这个问题的答案stackoverflow.com/questions/53297722/…
      猜你喜欢
      • 1970-01-01
      • 2020-07-20
      • 2012-12-09
      • 1970-01-01
      • 2012-04-27
      • 2013-02-08
      • 1970-01-01
      • 1970-01-01
      • 2017-08-31
      相关资源
      最近更新 更多