Angular CLI (7.0.5) 用于开发和生产的不同资产?

2024-01-01

是否可以使用 Angular CLI (7.0.5) 使用不同的资产进行开发和生产?

对于生产我想要资产:

"assets": [
   "projects/example/src/favicon.ico"
]

为了发展我想要资产:

"assets": [
   "projects/example/src/favicon.ico",
   "projects/example/src/assets/development.css"
]

先感谢您。


我找到了一种让它发挥作用的方法,虽然不太漂亮,但很有效。

在 angular.json 文件中,您可以复制当前项目,在我的例子中,我的项目名为“example”。我将复制的项目重命名为“example-dev”。请参阅下面的代码:

{
...
"projects": {
    "example": {
        "root": "projects/example/",
        "sourceRoot": "projects/example/src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "outputPath": "dist/example",
                    "index": "projects/example/src/index.html",
                    "main": "projects/example/src/main.ts",
                    "polyfills": "projects/example/src/polyfills.ts",
                    "tsConfig": "projects/example/tsconfig.app.json",
                    "assets": [
                        "projects/example/src/favicon.ico"
                    ],
                    "styles": [
                        "projects/example/src/styles.scss"
                    ],
                    "scripts": []
                }
            },
            "serve": {
                "builder": "@angular-devkit/build-angular:dev-server",
                "options": {
                    "browserTarget": "example:build"
                }
            }
        }
    },
    "example-dev": {
        "root": "projects/example/",
        "sourceRoot": "projects/example/src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "outputPath": "dist/example",
                    "index": "projects/example/src/index.html",
                    "main": "projects/example/src/main.ts",
                    "polyfills": "projects/example/src/polyfills.ts",
                    "tsConfig": "projects/example/tsconfig.app.json",
                    "assets": [
                        "projects/example/src/favicon.ico",
                        "projects/example/src/assets/development.css"
                    ],
                    "styles": [
                        "projects/example/src/styles.scss"
                    ],
                    "scripts": []
                }
            },
            "serve": {
                "builder": "@angular-devkit/build-angular:dev-server",
                "options": {
                    "browserTarget": "example-dev:build"
                }
            }
        }
    }
}

在项目“example”(生产)中,我删除了资产中的“projects/example/src/assets/development.css”行。在项目“example-dev”中,我将服务中的 browserTarget 更改为“example-dev:build”而不是“example:build”

如果我想服务开发项目:

ng serve example-dev -o

如果我想服务于生产项目:

ng serve example -o

如果有人有更干净的解决方案那么我很想听听:)

EDITED

感谢 Karthick Venkat,我找到了另一种让它工作的方法,它更干净。

在 angular.json 文件中,您需要添加新的开发配置。请参阅下面的代码:

{
"projects": {
    "example": {
        "root": "projects/example/",
        "sourceRoot": "projects/example/src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "outputPath": "dist/example",
                    "index": "projects/example/src/index.html",
                    "main": "projects/example/src/main.ts",
                    "polyfills": "projects/example/src/polyfills.ts",
                    "tsConfig": "projects/example/tsconfig.app.json",
                    "styles": [
                        "projects/example/src/styles.scss"
                    ],
                    "scripts": []
                },
                "configurations": {
                    "production": {
                        "fileReplacements": [{
                            "replace": "projects/example/src/environments/environment.ts",
                            "with": "projects/example/src/environments/environment.prod.ts"
                        }],
                        "optimization": true,
                        "outputHashing": "none",
                        "sourceMap": false,
                        "extractCss": true,
                        "namedChunks": false,
                        "aot": true,
                        "extractLicenses": true,
                        "vendorChunk": false,
                        "buildOptimizer": true,
                        "assets": [
                            "projects/example/src/favicon.ico"
                        ]
                    },
                    "development": {
                        "assets": [
                            "projects/example/src/favicon.ico",
                            "projects/example/src/assets"
                        ]
                    }
                }
            },
            "serve": {
                "builder": "@angular-devkit/build-angular:dev-server",
                "options": {
                    "browserTarget": "example:build"
                },
                "configurations": {
                    "production": {
                        "browserTarget": "example:build:production"
                    },
                    "development": {
                        "browserTarget": "example:build:development"
                    }
                }
            }
        }
    }
}

}

如果我想服务开发项目:

ng serve example --configuration=development -o

如果我想服务于生产项目:

ng serve example --configuration=production -o

or

ng serve example -o
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular CLI (7.0.5) 用于开发和生产的不同资产? 的相关文章

随机推荐

  • 如何从 html 页面调用 javascript 模块 (type=module) 中声明的函数

    我正在努力使用 javascript 模块 我有一个 html 文件和一个 JS 模块 我在 javascript 文件中定义了一个函数 我想从我的 HTML 页面调用该函数 这是我的代码 索引 html
  • 使用 Reactor 的非阻塞 ReentrantLock

    我需要限制同时处理同一资源的客户端数量所以我尝试实现模拟 lock lock try do work finally lock unlock 但以非阻塞方式使用 Reactor 库 我有这样的东西 但我有一个问题 有一个更好的方法吗或者也许
  • Groovy:将 XML 元素从一个文档复制到另一个文档

    我是 Groovy 新手 遇到了一个简单的问题 我想做的就是从一个 XML 文件中提取某些元素并用它创建一个新文件 这是一个示例 XML 让我们使用 Maven pom 文件
  • 在子数组之间移动行

    我有许多子数组 比如 2 个 为了简单起见 每个子数组具有相同的行数和列数 子数组中的每个位置都由 1 10 中的数字占据 我想做的是根据某种移动速率 m 0 1 在子数组之间随机移动行 m 0 对应于不移动 而 m 1 表示所有子数组中的
  • 初始化的只读字段为空,为什么?

    谁能解释一下为什么private readonly Int32 array new 8 7 5 can be null 在这个例子中 它有效 并且 array总是不是null 但在我的公司代码中我有类似的代码并且 array总是null 所
  • 来自命令行的 Behat“base_url”

    我想知道是否可以通过命令行设置base url 例子 bin behat base url http google fr 为了灵活性 我想避免创建新的配置文件并在每次必须测试新的 url 时通过命令行传递它 这里有什么技巧可以做到这一点吗
  • 使用 Spring MVC 的 Twitter Bootstrap

    我想将 Twitter Bootstrap 与现有的 Spring MVC 项目集成 搜索返回抽象结果 没有概述如何将以 UI 为中心的 Bootstrap 与 Spring MVC 集成的教程或文章 集成框架所涉及的配置步骤是什么 Tha
  • scala zip 列表到元组

    使用 JodaTime 尝试将 List LocalDate 转换为 Tuple2 JodaTime JodaTime 这样我就可以像这样进行多重分配 val expire now List row expireDate new JodaD
  • 在批处理文件中,组合两个字符串以创建组合路径字符串

    我需要获取两个字符串并将它们组合成批处理文件中的单个路径字符串 类似于 NET 中的 Path Combine 方法 例如 无论字符串是 C trunk 和 ProjectName Project txt 还是 C trunk 和 Proj
  • 页面加载时未使用哪些 javascript 文件

    是否可以找出网页上未使用的 javascript 文件 而无需添加控制台日志或调试或删除它们以查看是否出现问题 我正在寻找一个工具 或者命令行脚本或firefox插件等 例如 假设我将这些包含在标题中 在页面
  • 实体框架数据库优先:时间戳列不起作用

    使用数据库优先方法 我希望每当我尝试更新一个 过时的 实体时 我的应用程序都会抛出并发异常 而数据库中的相应行已被另一个应用程序 用户 会话更新 我在 Net 4 5 上使用实体框架 5 相应的表有一个时间戳列来维护行版本 我过去通过向您希
  • 为什么我的 Azure 移动服务不接受 ADAL.js 发送的不记名令牌?

    我使用带有隐式流的 ADAL js 来验证 AngularJS 应用程序 以便能够访问 Azure 移动服务 API 我已在 AMS Azure 移动服务 的 身份 选项卡中设置 Azure AD 身份信息 如下所示 应用程序 URL 设置
  • 使屏幕闪烁以提醒用户

    使用 NET 3 5 Winforms 我如何使整个屏幕在红色和白色之间闪烁 闪烁一秒钟 我有一个大屏幕 仅用于显示受监控设备的状态 我希望它在用户应该查看的事件发生时闪烁作为通知 谢谢 使用 tbischel 的建议 这是计时器的一些示例
  • 有效地复制/复制/备份数据库表 - mysql

    Reason 我被分配运行一些脚本来推进一个网站 这是一个梦幻足球网站 该网站的多个实例位于不同的域中 有些拥有超过 8 万用户 每个用户应该拥有一个由 15 名玩家组成的团队 因此 某些表具有 No users x No players
  • 使用 JavaScript 检查/取消检查无线电输入

    我有一个无线电输入组 如果选中了某个收音机 然后我再次单击它 它将变为未选中状态 有没有办法获取收音机以前的状态onClick event
  • 动态添加刻度标记?

    我想知道是否有任何方法可以在渲染图形后动态添加scale x标记 也许通过像这样的函数 zingchart exec myChart addscalexmarker type line range 14 label text label y
  • 从绝对路径获取流?

    我有这个方法 public RasImage Load Stream stream 如果我想加载一个像这样的网址 string url http localhost Application1 Images Icons hand jpg 我怎
  • ASP.NET MVC 的 Windows Azure 存储模拟器连接字符串?

    我正在搜索需要定义才能使用 Windows Azure 存储模拟器的连接字符串 到目前为止 我找到的所有消息来源都表明这些连接字符串应该转到ServiceDefinition and ServiceConfiguration文件位于 Win
  • NSDictionary 的 objectForKey: 依赖于同一性还是相等性?

    假设我有一个名为Person拥有以下财产socialSecurityNumber 并且这个类覆盖了isEqual 当社会保障号属性相等时返回 true 的方法 并说我已经放了一堆实例Person进入一个NSDictionary 如果我现在实
  • Angular CLI (7.0.5) 用于开发和生产的不同资产?

    是否可以使用 Angular CLI 7 0 5 使用不同的资产进行开发和生产 对于生产我想要资产 assets projects example src favicon ico 为了发展我想要资产 assets projects exam