[英]how to change the dist-folder path in angular-cli after 'ng build'
我想将 angular-cli 与 asp.net core 一起使用,我需要知道如何更改dist文件夹的路径
The more current way of this is to update the outDir
property in .angular-cli.json
.更新的方法是更新
.angular-cli.json
的outDir
属性。
The ng build
command argument --output-path
(or -op
for short) is still supported also, which can be useful if you want multiple values, you can save them in your package.json
as npm scripts. ng build
命令参数--output-path
(或简称-op
)仍然受支持,如果你想要多个值,这很有用,你可以将它们作为 npm 脚本保存在package.json
中。
Beware: The
.angular-cli.json
property is NOT calledoutput-path
like the currently-accepted answer by @cwill747 says.当心:
.angular-cli.json
属性不像@cwill747所说的当前接受的答案那样被称为output-path
。 That's theng build
argument only.那只是
ng build
参数。It's called
outDir
as mentioned above, and it's a under theapps
property.如上所述,它被称为
outDir
,它位于apps
属性下。
. .
(December 2017) (2017 年 12 月)
1-year after adding this answer , someone added a new answer with essentially same information, and the Original Poster changed the accepted answer to the 1-year-late answer containing same information in the first line of this one.添加此答案 1 年后,有人添加了一个具有基本相同信息的新答案,原始海报将接受的答案更改为此答案第一行中包含相同信息的 1 年延迟答案。
For Angular 6+ things have changed a little.对于 Angular 6+,事情发生了一些变化。
Cli setup is now done in angular.json (replaced .angular-cli.json) in your workspace root directory. Cli 设置现在在工作区根目录中的angular.json (替换为 .angular-cli.json)中完成。 The output path in default angular.json should look like this (irrelevant lines removed):
默认 angular.json 中的输出路径应如下所示(删除了不相关的行):
{
"projects": {
"my-app-name": {
"architect": {
"options": {
"outputPath": "dist/my-app-name",
Obviously, this will generate your app in WORKSPACE/dist/my-app-name.显然,这将在 WORKSPACE/dist/my-app-name 中生成您的应用程序。 Modify outputPath if you prefer another directory.
如果您更喜欢另一个目录,请修改 outputPath。
You can overwrite the output path using command line arguments (eg for CI jobs):您可以使用命令行参数覆盖输出路径(例如对于 CI 作业):
ng build -op dist/example
ng build --output-path=dist/example
Sa https://github.com/angular/angular-cli/wiki/build萨https://github.com/angular/angular-cli/wiki/build
Setting the output path, will tell angular where to place the "compiled" files but however you change the output path, when running the app, angular will still assume that the app is hosted in the webserver's document root.设置输出路径,将告诉 angular 放置“编译”文件的位置,但是无论您如何更改输出路径,运行应用程序时,angular 仍会假设应用程序托管在网络服务器的文档根目录中。
To make it work in a sub directory, you'll have to set the base href.要使其在子目录中工作,您必须设置基本 href。
In angular.json:在 angular.json 中:
{
"projects": {
"my-app-name": {
"architect": {
"options": {
"baseHref": "/my-folder/",
Cli:客户端:
ng build --base-href=/my-folder/
If you don't know where the app will be hosted on build time, you can change base tag in generated index.html.如果您不知道在构建时应用程序将托管在哪里,您可以在生成的 index.html 中更改基本标记。
Here's an example how we do it in our docker container:这是我们如何在 docker 容器中执行此操作的示例:
entrypoint.sh入口点.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
您可以更新 .angular-cli.json 中的输出文件夹:
"outDir": "./location/toYour/dist"
You can use the CLI too, like:您也可以使用 CLI,例如:
ng build -prod --output-path=production
# or
ng serve --output-path=devroot
The only thing that worked for me was to change outDir
in in both angular-cli.json
AND src/tsconfig.json
.唯一对我
outDir
是在angular-cli.json
和src/tsconfig.json
。
I wanted my dist-folder outside the angular project folder.我希望我的 dist 文件夹位于 angular 项目文件夹之外。 If I didn't change the setting in
src/tsconfig.json
as well, Angular CLI would throw warnings whenever I build the project.如果我也没有更改
src/tsconfig.json
的设置,Angular CLI 会在我构建项目时抛出警告。
Here are the most important lines ...以下是最重要的几行...
// angular-cli.json
{
...
"apps": [
{
"outDir": "../dist",
...
}
],
...
}
And ...还有...
// tsconfig.json
{
"compilerOptions": {
"outDir": "../../dist/out-tsc",
...
}
}
Beware: The correct answer is below.
当心:正确答案如下。 This no longer works
这不再有效
Create a file called .ember-cli
in your project, and include in it these contents:在您的项目中创建一个名为
.ember-cli
的文件,并在其中包含以下内容:
{
"output-path": "./location/to/your/dist/"
}
for github pages I Use对于我使用的 github 页面
ng build --prod --base-href "https://<username>.github.io/<RepoName>/" --output-path=docs
This is what that copies output into the docs folder : --output-path=docs
这是将输出复制到 docs 文件夹的内容:
--output-path=docs
output --output-path=docs
Angular CLI now uses environment files to do this. Angular CLI 现在使用环境文件来执行此操作。
First, add an environments
section to the angular-cli.json
首先,在
angular-cli.json
添加一个environments
部分
Something like :类似的东西:
{
"apps": [{
"environments": {
"prod": "environments/environment.prod.ts"
}
}]
}
And then inside the environment file ( environments/environment.prod.ts
in this case), add something like :然后在环境文件(本例中为
environments/environment.prod.ts
)中,添加如下内容:
export const environment = {
production: true,
"output-path": "./whatever/dist/"
};
now when you run :现在当你运行时:
ng build --prod
it will output to the ./whatever/dist/
folder.它将输出到
./whatever/dist/
文件夹。
Another option would be to set the webroot path to the angular cli dist folder.另一种选择是将 webroot 路径设置为 angular cli dist 文件夹。 In your Program.cs when configuring the WebHostBuilder just say
在您的 Program.cs 中配置 WebHostBuilder 时只需说
.UseWebRoot(Directory.GetCurrentDirectory() + "\\Frontend\\dist")
or whatever the path to your dist dir is.或者无论你的 dist 目录的路径是什么。
For readers with an angular.json
(not angular-cli.json
) the key correct key is outputPath .对于使用
angular.json
(不是angular-cli.json
)的读者,正确的关键是outputPath 。 I guess the angular configuration changed to angular.json
in Angular 6, so if you are using version 6 or above you most likely have a angular.json
file.我猜角度配置在 Angular 6 中更改为
angular.json
,所以如果您使用版本 6 或更高版本,您很可能有一个angular.json
文件。
To change the output path you have to change outputPath und the build options.要更改输出路径,您必须更改outputPath和构建选项。
example angular.json
示例
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",
[...]
I could not find any official docs on this (not included in https://angular.io/guide/workspace-config as I would have expected), maybe someone can link an official resource on this.我找不到任何官方文档(如我所料,未包含在https://angular.io/guide/workspace-config中),也许有人可以链接有关此的官方资源。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.