如何更改“ ng build”之后的 dist 文件夹路径

我想与 asp.net 核心使用角-cli，我需要知道如何改变 远离 文件夹的路径

194269 次浏览
小开

注意: 正确答案在下面，这不再有效

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

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

你也可以使用 CLI，比如:

ng build -prod --output-path=production


# or


ng serve --output-path=devroot
小开

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

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

不管你的目录是什么。

小开

角度 CLI 现在使用环境文件来完成这项工作。

首先，向 angular-cli.json添加一个 environments节

比如:

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

小开

当前的方法是更新 angular.json中的 outDir属性(在旧的角度 CLI 版本中称为 .angular-cli.json)。

ng build 命令参数 --output-path(简称 -op)仍然受到支持，如果需要多个值，可以将它们作为 npm 脚本保存在 package.json中。

注意: .angular-cli.json属性不像 目前接受的答案@cwill747所说的那样被称为 output-path，那只是 ng build参数。

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

.

附言。

(二零一七年十二月)

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

小开

对我来说唯一有效的方法就是在 angular-cli.json和 src/tsconfig.json中改变 outDir。

我希望我的 dist 文件夹在棱角项目文件夹之外。如果我没有改变 src/tsconfig.json中的设置，那么无论何时构建项目，Angular CLI 都会抛出警告。

以下是最重要的几句台词。

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

还有..。

// tsconfig.json
{
"compilerOptions": {
"outDir": "../../dist/out-tsc",
...
}
}
小开
最佳答案

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

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

对于角度6 + ，情况有所改变。

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

Cli 安装现在在 Angular Json中完成(替换。角斜肌。在您的工作区根目录中。Json 默认的输出路径应该如下所示(删除了不相关的行) :

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

显然，这将在 WORKSPACE/dist/my-app-name 中生成应用程序。

您可以使用命令行参数覆盖输出路径(例如，对于 CI 作业) :

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

S.A.https://angular.io/cli/build

在子目录中承载角度应用程序

设置输出路径，将告诉角在哪里放置“编译”的文件，但无论你改变输出路径，当运行应用程序，角仍将假定应用程序是在网络服务器的文档根托管。

要使其在子目录中工作，必须设置 basehref。

在 angular.json 中:

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

简介:

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

如果您不知道在构建时应用程序将驻留在哪里，您可以在生成的 index.html 中更改基标记。

下面是我们如何在我们的码头容器中做到这一点的一个例子:

入口点.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
小开

用于我使用的 github 页面

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

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

小开

注意: 角度6及以上！

对于使用 angular.json(而非 angular-cli.json)的阅读器，正确的键是 OutputPath 输出路径。我猜角度配置改变到角度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，因为我期望) ，也许有人可以链接这个官方资源。


提交答案