133

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

4

10 回答 10

230

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

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

当心：该.angular-cli.json属性不像@cwill747 所说output-path的当前接受的答案那样被调用。那ng build只是论据。

它被outDir称为如上所述，它是apps属性下的。

.

附言

（2017 年 12 月）

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

于 2016-10-19T10:06:19.213 回答
92

对于 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

萨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 容器中执行此操作的示例：

入口点.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
于 2018-06-15T16:06:30.640 回答
82

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

"outDir": "./location/toYour/dist"
于 2017-10-18T15:54:27.057 回答
51

您也可以使用 CLI，例如：

ng build -prod --output-path=production

# or

ng serve --output-path=devroot
于 2016-06-06T12:39:18.147 回答
18

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

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

这是最重要的几行...

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

和 ...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}
于 2016-12-02T20:35:42.473 回答
17

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

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

{
   "output-path": "./location/to/your/dist/"
}
于 2016-05-20T16:28:19.163 回答
13

对于我使用的 github 页面

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

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

于 2019-05-06T07:13:33.167 回答
9

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/文件夹。

于 2016-10-19T01:55:05.053 回答
2

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

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

或者你的 dist 目录的路径是什么。

于 2016-08-27T12:48:11.067 回答
0

注意：Angular 6 及更高版本！

对于具有angular.json（不是angular-cli.json）键的读者，正确的键是outputPath。我猜角度配置更改为angular.jsonAngular 6，所以如果您使用的是版本 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中），也许有人可以链接官方资源。

于 2020-12-02T14:07:26.447 回答