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

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.

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

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.

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.

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.

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,

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

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.

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

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