如何在 'ng build' 之后更改 angular-cli 中的 dist 文件夹路径

Question

我想将 angular-cli 与 asp.net 核心一起使用，我需要知道如何更改 dist 文件夹

Answer 1

Beware: The correct answer is below. This no longer works

在您的项目中创建一个名为 .ember-cli 的文件，并在其中包含以下内容：

{
   "output-path": "./location/to/your/dist/"
}

Answer 2

您也可以使用 CLI，例如：

ng build -prod --output-path=production

# or

ng serve --output-path=devroot

Answer 3

另一种选择是将 webroot 路径设置为 angular cli dist 文件夹。在 Program.cs 配置 WebHostBuilder 时只需说

.UseWebRoot(Directory.GetCurrentDirectory() + "\Frontend\dist")

或者你的 dist 目录的任何路径。

Answer 4

Angular CLI 现在使用环境文件来执行此操作。

首先，将 environments 部分添加到 angular-cli.json

类似于：

{
  "apps": [{
      "environments": {
        "prod": "environments/environment.prod.ts"
      }
    }]
}

然后在环境文件中（在本例中为environments/environment.prod.ts），添加如下内容：

export const environment = {
  production: true,
  "output-path": "./whatever/dist/"
};

现在当你运行 :

ng build --prod

它会输出到./whatever/dist/文件夹。

Answer 5

更新的方法是更新 angular.json 中的 outDir 属性（在旧的 Angular CLI 版本中称为 .angular-cli.json）。

ng build 命令参数 --output-path（或简称 -op）也仍然受支持，如果您需要多个值，这会很有用，您可以将它们保存在 package.json 作为 npm 脚本。

Beware: The .angular-cli.json property is NOT called output-path like the says. That's the ng build argument only.

It's called outDir as mentioned above, and it's a under the apps property.

.

P.S.

（2017 年 12 月）

添加此答案后 1 年，有人添加了一个包含基本相同信息的新答案，并且原始发布者将接受的答案更改为包含 1 年延迟的答案此行第一行的信息相同。

Answer 6

唯一对我有用的是在 angular-cli.json 和 src/tsconfig.json 中更改 outDir。

我想要 angular 项目文件夹之外的 dist 文件夹。如果我也没有更改 src/tsconfig.json 中的设置，那么每当我构建项目时，Angular CLI 都会发出警告。

这是最重要的几行...

// angular-cli.json
{
  ...
  "apps": [
    {
      "outDir": "../dist",
      ...
    }
  ],
  ...
}

还有...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}

Answer 7

您可以在 .angular-cli.json:

中更新输出文件夹

"outDir": "./location/toYour/dist"

Answer 8

对于Angular 6+，事情发生了一点变化。

定义 ng build 生成应用程序文件的位置

Cli 设置现在已在工作区根目录的 angular.json（替换为 .angular-cli.json）中完成。默认 angular.json 中的输出路径应如下所示（已删除不相关的行）：

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "outputPath": "dist/my-app-name",

显然，这将在 WORKSPACE/dist/my-app-name 中生成您的应用程序。如果您喜欢其他目录，请修改 outputPath。

您可以使用命令行参数覆盖输出路径（例如 CI 作业）：

ng build -op dist/example
ng build --output-path=dist/example

S.a。 https://angular.io/cli/build

在子目录中托管 angular 应用程序

设置输出路径，将告诉angular在哪里放置“已编译”文件，但是无论您如何更改输出路径，当运行应用程序时，angular仍会假定该应用托管在网络服务器的文档根目录中。

要使其在子目录中工作，您必须设置基本 href。

在angular.json中：

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "baseHref": "/my-folder/",

客户端：

ng build --base-href=/my-folder/

如果您不知道在构建时应用程序将托管在哪里，您可以在生成的 index.html.

中更改基本标签

这是我们如何在 docker 容器中执行此操作的示例：

entrypoint.sh

if [ -n "${BASE_PATH}" ]
then
  files=( $(find . -name "index.html") )
  cp -n "${files[0]}" "${files[0]}.org"
  cp "${files[0]}.org" "${files[0]}"
  sed -i "s*<base href=\"/\">*<base href=\"${BASE_PATH}\">*g" "${files[0]}"
fi

Answer 9

我使用 github 个页面

ng build --prod --base-href "https://<username>.github.io/<RepoName>/" --output-path=docs

这是将输出复制到文档文件夹的内容：--output-path=docs

Answer 10

注意：Angular6及以上！

对于 angular.json（不是 angular-cli.json）的读者，正确的密钥是 outputPath。我猜 angular 配置在 Angular 6 中更改为 angular.json，因此如果您使用版本 6 或更高版本，您很可能有一个 angular.json 文件。

要更改输出路径，您必须更改 outputPath 和构建选项。

示例angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "projects": {
        "angular-app": {
            "projectType": "application",
            [...]
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/angular-app",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        [...]

我找不到关于此的任何官方文档（没有像我预期的那样包含在 https://angular.io/guide/workspace-config 中），也许有人可以 link 关于此的官方资源。

如何在 'ng build' 之后更改 angular-cli 中的 dist 文件夹路径

how to change the dist-folder path in angular-cli after 'ng build'

angular-cli

angular

P.S.

定义 ng build 生成应用程序文件的位置

在子目录中托管 angular 应用程序

注意：Angular6及以上！