Como incluir arquivos personalizados com a compilação angular-cli?

113

RE: Angular2 2.0.0, angular-cli v1.0.0-beta.11-webpack.8

Como faço para dizer ao angular-cli para incluir um arquivo de "src / assets" na raiz de "dist" quando for compilado?

Implementamos em um host Windows e precisamos incluir um arquivo "web.config" para dizer ao IIS para rotear tudo para o índice. Estávamos fazendo isso antes do RC4, mas com toda a atualização não deu certo (não me lembro como fizemos).

Tenho pesquisado a documentação do repositório GitHub e não encontrei nada útil em relação a este tópico. Talvez eu esteja no lugar errado?

No ToC , há um ponto de marcador "Adicionando arquivos extras ao build", mas parece que essa seção não existe.

Kizmar
fonte
2
Basicamente, você pode copiar arquivos com o npm. Basta adicionar o comando de cópia em scripts em package.json. Verifique também este lucasmreis.github.io/blog/npm-is-an-amazing-build-tool
Vadim Sentiaev
O que acabei fazendo (o que também parece hacky): instalei um pacote npm de cópia de arquivo e, em seguida, adicionei um valor na seção "scripts" de "package.json" assim "copy:webConfig": "node node_modules/copy/bin/cli.js web.config dist". Eu também acrescentou um post script de construção: "postbuild": "npm run copy:webConfig". Havia outros problemas ao tentar fazer a cópia funcionar, mas isso funcionou.
Kizmar
Hmm obteve exatamente o mesmo requisito com as Regras do Azure IIS e a CLI Angular - também não queria adicionar mais etapas de compilação, se possível
Rodney
As respostas aqui estão certas, mas se você precisar copiar arquivos diferentes por ambiente recomendo ler: stackoverflow.com/a/59162533/3306960
Manuel Lopera

Respostas:

147

A propriedade "assets" do angular-cli.json pode ser configurada para incluir arquivos personalizados no build do angular-cli webpack. Portanto, configure o valor da propriedade "ativos" como uma matriz. Por exemplo:

"assets": ["assets", "config.json",".htaccess"],

a configuração acima irá copiar config.jsn e .htaccess para a pasta dist durante a construção do webpack do angular-cli. A configuração acima funcionou no angular-cli versão 1.0.0-beta.18

Md Ayub Ali Sarker
fonte
6
Precisa estar em "apps", exemplo: "apps": [{"assets": ["config / appConfig.json"]}]
Manny
Parece verdade, mas não funciona para mim. "ativos": "ativos" e "ativos": ["ativos"] - funciona, mas "ativos": ".htaccess", "ativos": ["ativos", ".htaccess"] - não funciona. Alguma sugestão?
Gleb
@gleb, adicione como "ativos": ["ativos", ".htaccess"], acho que isso vai servir ao seu propósito.
Md Ayub Ali Sarker
@MdAyubAliSarker, obrigado, o problema é que usei o angular-cli versão 1.0.0-beta.17. 1.0.0-beta.19 funciona bem para mim
Gleb
1
Ok, ignore isso, era um tipo - funciona. Portanto, o Web.config precisa ir para a raiz da pasta Src e o arquivo JSON se parece com "ativos": ["ativos", "web.config"],
Rodney
66

Resposta correta atual:

A equipe adicionou suporte para copiar arquivos específicos como estão para a pasta de saída ( distpor padrão) em uma versão posterior do Angular CLI (seria beta 17 ou 19 - está nas versões 1.x finais há muito tempo).

Basta adicioná-lo ao array da seguinte angular-cli.jsonforma:

{
  ...
  "aplicativos" [
    {
       "root": "src",
       "ativos": [
         "ativos",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

(Observe que o caminho é relativo à srcpasta)

Eu pessoalmente uso e funciona muito bem.

A partir do beta 24, adicionei um recurso ao Angular CLI que garante que todos os assetsarquivos e pastas sejam servidos pelo servidor de desenvolvimento webpack quando em execução ng testnão apenas ng serve.

Ele também oferece suporte para servir os arquivos de ativos no servidor de desenvolvimento webpack usado para testes de unidade ( ng test).
(caso você precise de alguns arquivos JSON para os testes, ou apenas deteste ver avisos 404 no console).
Eles já são servidos de ng e2eporque está cheio ng serve.

E também tem recursos mais avançados, como filtrar quais arquivos você deseja de uma pasta e fazer com que o nome da pasta de saída seja diferente da pasta de origem:

{
  ...
  "aplicativos" [
    {
      "root": "src",
      "ativos": [
        "ativos",
        "web.config":
        {
          // Copia o conteúdo nesta pasta
          "entrada": "../",
          // Isso corresponde a este curinga
          "glob": "* .config",
          // E colocá-los nesta pasta em `dist` ('.' Significa colocá-lo em` dist` diretamente)
          "resultado": "."
        }
      ],
      ...
    }
  ]
  ...
}

Você também pode consultar a documentação oficial: Guia Angular - Configuração do espaço de trabalho .


.

[SOMENTE PARA ARQUIVO] Resposta original (6 de outubro de 2016):

Infelizmente, isso não é suportado no momento (a partir da versão beta-16). Eu levantei a preocupação exata para a equipe (arquivos web.config), mas não parece que vai acontecer tão cedo (a menos que você esteja bifurcando a CLI, etc).

Siga esta edição para uma discussão completa e possíveis detalhes futuros.

PS

Para o arquivo JSON, você pode colocá-lo ./src/assets/. Esta pasta é copiada como está ./dist/assets/. Este é o comportamento atual.

Anteriormente, nos dias do systemJS, havia outra ./public/pasta que era copiada ./dist/diretamente, mas ela não existe mais nas versões Webpack, que o problema mencionado acima discute.

Meligy
fonte
2
Esta configuração funcionou para mim: {"glob": " * / ", "input": "src / assets", "output": "/ assets"},
patrickbadley
7

Uma solução (embora na minha opinião seja um pouco um hack) é declarar uma variável em seu main.tsarquivo que requer o arquivo extra que você deseja incluir na saída de compilação do webpack.

EX:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

/* HACK: Include standalone web.config file manually in webpack build
 *
 * Due to the way the beta angular-cli abstracts the webpack config files into
 * angular-cli.json and lacks current documentation we were unable to find
 * a way to include additional files manually in the webpack build output.
 *
 * For hosting on IIS we need to include a web.config file for
 * specifying rewrite rules to make IIS compatible with the Angular Router.
 * The one liner following this comment is a hack to accomplish this
 * and should be reviewed and corrected as soon as adequete documentation
 * is available for the angular-cli configuration file.
 */
const webConfig = require('file?name=[name].[ext]!./web.config');

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Quando o webpack encontra essa instrução de declaração de variável, main.tsele emitirá o web.configarquivo bruto como parte da saída da compilação:

                            Asset       Size  Chunks             Chunk Names
                       inline.map    5.59 kB       2  [emitted]  inline
                       web.config  684 bytes          [emitted]
                 styles.bundle.js    16.7 kB    1, 2  [emitted]  styles
                        inline.js    5.53 kB       2  [emitted]  inline
                         main.map    5.36 MB    0, 2  [emitted]  main
                       styles.map    22.6 kB    1, 2  [emitted]  styles
                   main.bundle.js    4.85 MB    0, 2  [emitted]  main
                       index.html    1.98 kB          [emitted]
                assets/.npmignore    0 bytes          [emitted]
         assets/styles/global.css    2.74 kB          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.45 kB       0
webpack: bundle is now VALID.

Uma solução ideal seria a configuração do webpack, mas eu não consigo entender como o angular-cli está gerenciando isso angular-cli.jsonainda (beta.16).

Portanto, se alguém tiver uma resposta melhor que estenda a configuração do webpack para um projeto gerado pelo angular-cli, adoraria ouvi-la.

Joe Purdy
fonte
5

Para leitores Angular 8 ,

.htaccessprecisa ser src/.htaccess. Ver abaixo,

 "assets": [
    "src/favicon.ico",
     "src/assets",
     "src/.htaccess"
  ],

Certifique-se de ter colocado o .htaccessarquivo dentro do srcdiretório do seu projeto.

e o arquivo para colocá-lo angular.json, não oangular-cli.json

(Se precisar de um htaccessarquivo válido , você pode encontrar um aqui - https://stackoverflow.com/a/57126352/767625 )

É isso aí. Isso agora deve ser copiado quando você clicar ng build --prod=true.

Espero que isso ajude alguém.

Felicidades,

Anjana Silva
fonte
1
e o arquivo para colocá-lo angular.jsonnão é o angular-cli.jsonmencionado nas respostas anteriores.
mMerlin
1

Há uma seção de "scripts" no arquivo angular-cli.json. Você pode adicionar todos os arquivos javascript de terceiros lá.

Alex Lin
fonte
1
Sim, mas web.config não é um arquivo JavaScript. Ele também irá copiar isso sem esperar que seja JS e empacotá-lo com o resto do JS?
Kizmar,
@Kizmar, Sim, isso não vai funcionar. Ele tentará (e falhará) carregá-lo como js.
Nathan Cooper
0

No meu caso, usei o Angular versão 5 , então tentei criar um arquivo chamado Staticfile.txt ao executar o comando ng build --prod. certifique-se de fornecer a extensão do arquivo, caso contrário, o arquivo não será criado.

Nadee
fonte
0

Modifique angular.json.
Adicionar entrada à matriz de ativos:

{
  "glob": "**/web.config",
  "input": "src/",
  "output": "./"
}
Noel Selewa
fonte