定义ng build生成app文件的位置

Question

我想在asp.net核心使用angular-cli，我需要知道如何更改 dist 文件夹的路径

Answer 1

更新的方法是更新outDir中的.angular-cli.json属性。

仍然支持ng build命令参数--output-path（或简称为-op），如果您想要多个值，可以将它们保存在{{1作为npm脚本。

注意： package.json属性不会像currently-accepted answer by @cwill747所说的那样被称为.angular-cli.json。那只是output-path参数。

如上所述，它被称为ng build，它位于outDir属性之下。

P.S。

（2017年12月）

添加此答案后1年，有人添加了一个基本相同信息的新答案，原始海报将接受的答案更改为包含相同信息的1年后答案这一行。

Answer 2

您可以更新.angular-cli.json中的输出文件夹：

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

Answer 3

您也可以使用CLI，例如：

ng build -prod --output-path=production

# or

ng serve --output-path=devroot

Answer 4

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

定义ng build生成app文件的位置

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://github.com/angular/angular-cli/wiki/build

在子目录

中托管角度应用

设置输出路径，将告诉angular放置“已编译”文件的位置，但是在更改输出路径时，在运行应用程序时，angular仍将假定应用程序托管在Web服务器的文档根目录中。

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

在angular.json中：

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

CLI：

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 5

唯一有效的方法是更改outDir和angular-cli.json中的src/tsconfig.json。

我希望我的dist文件夹在angular项目文件夹之外。如果我也没有更改src/tsconfig.json中的设置，Angular CLI会在构建项目时抛出警告。

以下是最重要的一行......

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

而且......

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

Answer 6

注意：正确答案如下。这不再有效

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

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

Answer 7

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 8

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

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

或者你的目的地的路径是什么。

Answer 9

对于我使用的github页面

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

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

Answer 10

警告：Angular 6及以上！

对于具有angular.json（而不是angular-cli.json）的读者，正确的密钥是 outputPath 。我猜想角度配置在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中），也许有人可以为此链接一个官方资源。

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

10 个答案:

P.S。

定义ng build生成app文件的位置

在子目录

警告：Angular 6及以上！