Como você implanta aplicativos angulares?

ng build 

Comando no directório raiz do seu projecto. O site será criado no diretório dist e você pode implantá-lo em qualquer servidor web.

Isto irá ser compilado para teste, se tiver configurações de produção na sua aplicação deverá usar

ng build --prod

Isto irá construir o projecto no directório dist e isto pode ser empurrado para o servidor.

1. Criar uma conta Heroku e instalar o CLI

2. Mova o dep angular-cli para o dependencies em package.json (para que ele seja instalado quando você empurrar para Heroku.

3. Adicione um script postinstall que irá correr ng build quando o código for empurrado para Heroku. Adicione também um comando inicial para um servidor de nó que será criado no passo seguinte. Isto irá colocar os ficheiros estáticos da aplicação num dist directório no servidor e iniciar a aplicação depois.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

1. crie um servidor expresso para servir a aplicação.

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

Cria um comando Heroku e empurra para desviar a aplicação.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Aqui está um rápido writeup eu fiz que tem mais detalhes, incluindo como forçar os pedidos a usar HTTPS e como lidar PathLocationStrategy :)

1. Criar uma aplicação Web no Azure
2. Criar uma aplicação Angular 2 Em vs código.
3. Pacote web para pacote.js.
4. Obter o perfil Azure publicado no Sítio xml
5. Configurar o Azure-implantar usando https://www.npmjs.com/package/azure-deploy {[14] } com o perfil do local.
6. posicionar.
Prova o creme.

A fim de enviar o seu aplicativo Angular2 para um servidor de produção, em primeiro lugar, certifique-se de que o seu aplicativo é executado localmente na sua máquina.

O aplicativo Angular2 também pode ser implantado como um aplicativo de nó.

Então, crie um servidor de pontos de entrada de nó.js / app.js (o meu exemplo usa express)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Adicione também express como uma dependência no seu pacote.ficheiro json.

Depois, coloque-o no seu ambiente preferido.

Obtém-se o pacote de produção de carregamento mais pequeno e rápido compilando com o compilador de tempo anterior, e tree-shake/minify com rollup, como mostrado no livro de receitas de AOT angular aqui: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Isto também está disponível com o Angular-CLI como foi dito nas respostas anteriores, mas se não fez a sua aplicação usando o CLI, deve seguir o livro de receitas.

Também tenho um exemplo de trabalho com materiais e SVG gráficos (apoiados por Angular2) que inclui um pacote criado com o AOT cookbook. Você também encontra toda a configuração e scripts necessários para criar o pacote. Olha para isto. https://github.com/fintechneo/angular2-templates/

Para implantar sua aplicação no IIS siga os passos abaixo.

Passo 1: compilar a sua aplicação Angular usando o comando ng build --prod

Passo 2: Depois da compilação, todos os ficheiros são guardados na pasta dist do local da sua aplicação.

Passo 3: Criar uma pasta em C:\inetpub\wwwroot pelo nome QRCode .

Passo 4: copiar o conteúdo da pasta dist para C:\inetpub\wwwroot\QRCode pasta.

Passo 5: Abrir o gestor do IIS usando comando (Janela + R) e tipo inetmgr Carregue em OK.

Passo 6: carregue com o botão direito no Sítio Web por omissão e carregue em Adicione a aplicação.

Passo 7: indique a alcunha 'QRCode' e defina a localização física para C:\inetpub\wwwroot\QRCode

Passo 8: abrir índice.html e encontrar a linha href= " \ " e remover'\'.

Passo 9: procure agora a aplicação em qualquer navegador.

Você também pode acompanhar o vídeo para melhor compreensao.

Url de vídeo: https://youtu.be/F8EI-8XUNZc

A implantação do Angular 2 em azure é fácil

1. Executar ng build --prod , o que irá gerar uma pasta dist com tudo o que estiver dentro de alguns ficheiros, incluindo o índice.galeria.

2. Crie um grupo de recursos e uma aplicação web dentro dele.

3. Coloque os seus ficheiros de pastas com FTP. Em azure ele vai procurar índice.html para executar a aplicação.

Com CLI Angular , pode usar o seguinte comando:

ng build --prod

Ele gera uma pasta dist com tudo o que você precisa para implantar a aplicação.

Se você não tem prática com servidores web, eu recomendo que você use Angular para Cloud. Você só precisa comprimir a pasta dist como arquivo zip e carregá-lo na plataforma.

Distribuição Angular 2 nas páginas Github

Testar a implantação da mochila Angular2 em ghpages

Primeiro obter todos os arquivos relevantes a partir da pasta {[[0]} da sua aplicação, para mim foi a : + ficheiros css na pasta activos + principal.pacote.js + polifills.pacote.js + fornecedor.pacote.js

Em seguida, empurre estes arquivos no repo que você criou.

1 -- se quiser que a aplicação corra no directório raiz-crie um repo especial com o nome [Seu nome verdadeiro].github.io e coloca estes ficheiros no ramo principal

2 -- Onde, Como se quisesse criar esta página no sub directório ou num ramo diferente que não o root, crie um branch gh-pages e empurre estes ficheiros nesse ramo.

Para o primeiro caso será https: / / [o seu nome de utilizador].github.io e para o segundo caso, será [Seu nome verdadeiro].github.io / [nome do Acordo de recompra] .

Se você quiser implantá-lo usando o segundo caso certifique-se de alterar o url de base do Índice.ficheiro html no dist, dado que todos os mapeamentos de rotas dependem da localização que indicar e deverá ser configurado como [/branchname].

Link para esta página

Https://rahulrsingh09.github.io/Deployment

Acordo De Recompra Git

Https://github.com/rahulrsingh09/Deployment

Uso com para sempre:

1. compilar a sua aplicação Angular com o angular-cli para destilar a pasta ng build --prod --output-path ./dist

2. Criar servidor.js ficheiro na sua localização Angular da aplicação:

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);
   

3. Começar para sempre forever start server.js

Se testares uma aplicação como eu em localhost ou vais ter alguns problemas com a página branca {[8] } uso isto:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

Explicação:

ng build

Build app mas há muitos espaços, tabs e outras coisas. Para o servidor não é importante como o código parece. É por isso que uso:

ng build --prod --build-optimizer 

Este código de fabrico e redução de tamanho [--build-optimizer permite reduzir mais código].

Então no final eu adiciono --base-href="http://127.0.0.1/my-app/" para mostrar a aplicação onde está a 'moldura principal' [em simples palavra]. Com ele você pode ter até mesmo vários aplicativos angulares em qualquer pasta.

Para uma forma rápida e barata de hospedar uma aplicação angular, tenho usado a hospedagem Firbase. É gratuito no primeiro nível e muito fácil de implantar novas versões usando o Firebase CLI. Este artigo aqui explica os passos necessários para implantar sua app angular de produção 2 para Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

Em resumo, você executa {[[0]} o que cria uma pasta dist no pacote e que é o pasta que é enviada para o servidor Firebase.

A partir de 2017 A melhor maneira é usar angular-cli (v1.4.4) para o seu projecto angular.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

Você não precisa adicionar -- AOT explicitamente como seu ativado por padrão com --prod.E o uso de -- output-hashing é como sua preferência pessoal em relação à explosão de cache.

Você poderia adicionar explicitamente O suporte de CDN adicionando:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

Se planeia usar CDN para hospedagem, o que é consideravelmente rápido.

Eu diria que muitas pessoas com experiência na Web antes de angular, são usadas para implantar seus artefatos web dentro de uma guerra (ou seja, jQuery e html dentro de um projeto Java/Spring). Acabei fazendo isso para contornar a questão do CORS, depois de tentar Manter meus projetos angulares e de descanso separados.

A minha solução era mover todos os conteúdos angulares (4), gerados com CLI, do meu-app para MyJavaApplication/angular. Em seguida, modifiquei a minha compilação Maven para usar Maven-resources-plugin para mover o conteúdo de /angular / dist para a raiz da minha distribuição (ou seja, $project.construir.directory} / MyJavaApplication). O Angular carrega recursos da raiz da guerra por padrão.

Quando comecei a adicionar roteamento ao meu projecto angular, modifiquei ainda mais a criação do maven para copiar o índice.html de /dist para WEB-INF / app. E, adicionou um controlador Java que redireciona todas as chamadas do lado do servidor para indexar.

Se implantar a sua aplicação no Apache (servidor Linux) para que possa seguir os seguintes passos : Siga as seguintes etapas :

Passo 1 : ng build --prod --env=prod

Passo 2 . (Copiar o dist para o servidor) em seguida, dest pasta criada, copiar a pasta dist e implantá-lo no diretório raiz do servidor.

Passo 3 . Cria o ficheiro .htaccess na pasta de topo e cola isto na pasta .htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Basta seguir o link abaixo,

Muda o teu Índice.localização dos ficheiros do Programa de páginas html Muda o teu componente.localização em html aumenta o seu erro de obtenção que não conseguiu encontrar a localização

Https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-implantar