como alterar o caminho da pasta dist no angular-cli após 'ng build'


112

Gostaria de usar o angular-cli com asp.net core e preciso saber como posso alterar o caminho da pasta dist

Respostas:


74

Você pode atualizar a pasta de saída em .angular-cli.json:

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

14
É possível colocar index.html em ./location/toYour/dist e pacotes javascript em uma subpasta, por exemplo ./location/toYour/dist/bundles
Naveed Ahmed

1
Alguém sabe de alguma atualização sobre como personalizar o outDir ainda mais? css / ts / em caminhos separados
fidev

190

A forma mais atual de fazer isso é atualizar a outDirpropriedade em .angular-cli.json.

O ng buildargumento do comando --output-path(ou -opabreviadamente) também é suportado, o que pode ser útil se você quiser vários valores, você pode salvá-los em seus package.jsonscripts como npm.

Cuidado: a .angular-cli.jsonpropriedade NÃO é chamada output-pathcomo a resposta atualmente aceita por @ cwill747 diz. Esse é o ng buildúnico argumento.

É chamado outDirconforme mencionado acima e está sob a appspropriedade.

.

PS

(Dezembro de 2017)

1 ano após adicionar esta resposta , alguém adicionou uma nova resposta com essencialmente as mesmas informações, e o pôster original alterou a resposta aceita para a resposta com 1 ano de atraso contendo as mesmas informações na primeira linha desta.


3
É possível colocar index.html em ./location/toYour/dist e pacotes JavaScript em uma subpasta, por exemplo ./location/toYour/dist/bundles
Naveed Ahmed

10
: D o PS é amargo
Sunil Kumar

4
melhor PS que vi aqui
Frenkey

ele provavelmente está promovendo seu amigo aqui, isso é uma corrupção
Alexander Borovoi

69

Para Angular 6+, as coisas mudaram um pouco.

Defina onde o ng build gera os arquivos do aplicativo

A configuração do Cli agora é feita em angular.json (substituído .angular-cli.json) no diretório raiz do seu espaço de trabalho. O caminho de saída no angular.json padrão deve ser parecido com este (linhas irrelevantes removidas):

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

Obviamente, isso irá gerar seu aplicativo em WORKSPACE / dist / my-app-name. Modifique outputPath se preferir outro diretório.

Você pode substituir o caminho de saída usando argumentos de linha de comando (por exemplo, para trabalhos de CI):

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

Sa https://github.com/angular/angular-cli/wiki/build

Hospedando o aplicativo angular no subdiretório

Definir o caminho de saída dirá ao angular onde colocar os arquivos "compilados", mas, no entanto, você altera o caminho de saída, ao executar o aplicativo, o angular ainda assumirá que o aplicativo está hospedado na raiz de documentos do servidor web.

Para fazê-lo funcionar em um subdiretório, você terá que definir o href de base.

No angular.json:

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

Cli:

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

Se você não sabe onde o aplicativo será hospedado no momento da construção, você pode alterar a tag base no index.html gerado.

Aqui está um exemplo de como fazemos isso em nosso contêiner 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


17

A única coisa que funcionou para mim foi mudar outDirem angular-cli.jsonAND src/tsconfig.json.

Eu queria minha pasta dist fora da pasta do projeto angular. Se eu não alterasse a configuração emsrc/tsconfig.json também, o Angular CLI lançaria avisos sempre que eu construir o projeto.

Aqui estão as linhas mais importantes ...

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

E ...

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

2
Impressionante! Atualizar para cli 7x, o acima é feito em angular.jsone o campo é outputPath(o tsconfig ajuste acima permanece o mesmo). Hth
EdSF

17

Cuidado: a resposta correta está abaixo. Isso não funciona mais

Crie um arquivo chamado .ember-cliem seu projeto e inclua nele estes conteúdos:

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

9

O Angular CLI agora usa arquivos de ambiente para fazer isso.

Primeiro, adicione uma environmentsseção aoangular-cli.json

Algo como :

{
  "apps": [{
      "environments": {
        "prod": "environments/environment.prod.ts"
      }
    }]
}

E então, dentro do arquivo de ambiente ( environments/environment.prod.tsneste caso), adicione algo como:

export const environment = {
  production: true,
  "output-path": "./whatever/dist/"
};

agora quando você executa:

ng build --prod

ele será enviado para a ./whatever/dist/pasta.


1
Parece a melhor resposta, mas o Angular CLI ainda publica meus arquivos na pasta dist. Versão:angular-cli: 1.0.0-beta.21
NinjaFart

Do Angular CLI Wiki : outDir (string): O diretório de saída para resultados de construção. O padrão é dist /.
hbthanki

@hbthanki Essa é a chave cli, não o arquivo de ambiente propriedade json
swestner

9

para páginas do github que eu uso

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

Isso é o que copia a saída para a pasta docs: --output-path=docs


2

Outra opção seria definir o caminho do webroot para a pasta angular cli dist. Em seu Program.cs ao configurar o WebHostBuilder basta dizer

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

ou qualquer que seja o caminho para o seu diretório dist.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.