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


112

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

Answers:


74

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

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

14
是否可以将index.html放在./location/toYour/dist和javascript捆绑包中的子文件夹中,例如./location/toYour/dist/bundles
Naveed Ahmed

1
有人知道进一步定制outDir的任何更新吗?css / ts /在单独的路径中
fidev

190

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

ng build命令的参数--output-path(或-op简称)仍然还支持,如果你想多个值可以是有用的,你可以将它们保存在您package.json的NPM脚本。

请注意:.angular-cli.json属性不叫output-path喜欢通过@ cwill747当前接受的答案说。那ng build只是论点。

outDir如上所述,它被称为,并且在apps属性下。

聚苯乙烯

(2017年12月)

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


3
是否可以将index.html放在./location/toYour/dist和JavaScript包中的子文件夹中,例如./location/toYour/dist/bundles
Naveed Ahmed

10
:D PS苦涩
Sunil Kumar

4
我在这里看到的最好的PS
Frenkey

他可能在这里提拔他的朋友,这是腐败
亚历山大·博罗维

69

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

在子目录中托管Angle App

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

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

在angular.json中:

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

Cli:

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

如果您不知道在构建时将在何处托管应用程序,则可以在生成的index.html中更改基本标记。

这是一个如何在Docker容器中执行此操作的示例:

入口点

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


17

对我唯一起作用的是更改outDir两个angular-cli.jsonAND src/tsconfig.json

我希望将dist文件夹放在有角度的项目文件夹之外。如果我也没有更改设置,src/tsconfig.json那么每当我构建项目时,Angular CLI都会发出警告。

这是最重要的几行...

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

还有...

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

2
太棒了!的更新cli 7x,以上操作在angular.json字段中完成outputPathtsconfig 上面的调整保持不变)。Hth
EdSF '18

17

当心:正确的答案如下。这不再起作用

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

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

9

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

首先,environmentsangular-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/文件夹。


1
看起来是最好的答案,但是Angular CLI仍将我的文件发布在dist文件夹中。版本:angular-cli: 1.0.0-beta.21
NinjaFart '16

从Angular CLI WikioutDir(字符串):构建结果的输出目录。默认值为dist /。
hbthanki

@hbthanki那是cli开关,而不是环境文件json属性
swestner,

9

用于我使用的github页面

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

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


2

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

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

或您的dist目录的路径。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.