6

Estou aprendendo Angular CLI e consegui fazer uma aplicação rodar a aplicação em localhost do ng serve. Porém, queria colocar essa aplicação no meu site hospedado na Hostinger, apenas para testar e etc.

Então, fui jogar todos os arquivos (26 mil arquivos) da aplicação no site por casa do "node_modules".

Pesquisando vi que tinha que fazer o "ng build". Fiz o "ng build", ele criou a pasta "dist", fui jogar essa pasta no site, ele subiu tudo certinho, mas não executa os componentes, fica apenas no index.html.

Gostaria de saber como eu faço para colocar essa aplicação no meu site?

index.html (Dentro da pasta "dist"): " Angular Reddit

    <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">

</head>
<body>
  <app-root>Carregando...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>"

package.json:

{
  "name": "angularreddit",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "semantic-ui": "^2.2.10",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.4",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

inline.bundle.js:

/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    var parentJsonpFunction = window["webpackJsonp"];
/******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, resolves = [], result;
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId])
/******/                resolves.push(installedChunks[chunkId][0]);
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/                modules[moduleId] = moreModules[moduleId];
/******/            }
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
/******/        while(resolves.length)
/******/            resolves.shift()();
/******/        if(executeModules) {
/******/            for(i=0; i < executeModules.length; i++) {
/******/                result = __webpack_require__(__webpack_require__.s = executeModules[i]);
/******/            }
/******/        }
/******/        return result;
/******/    };
/******/
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // objects to store loaded and loading chunks
/******/    var installedChunks = {
/******/        4: 0
/******/    };
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;
/******/
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = function requireEnsure(chunkId) {
/******/        if(installedChunks[chunkId] === 0)
/******/            return Promise.resolve();
/******/
/******/        // an Promise means "currently loading".
/******/        if(installedChunks[chunkId]) {
/******/            return installedChunks[chunkId][2];
/******/        }
/******/        // start chunk loading
/******/        var head = document.getElementsByTagName('head')[0];
/******/        var script = document.createElement('script');
/******/        script.type = 'text/javascript';
/******/        script.charset = 'utf-8';
/******/        script.async = true;
/******/        script.timeout = 120000;
/******/
/******/        if (__webpack_require__.nc) {
/******/            script.setAttribute("nonce", __webpack_require__.nc);
/******/        }
/******/        script.src = __webpack_require__.p + "" + chunkId + ".chunk.js";
/******/        var timeout = setTimeout(onScriptComplete, 120000);
/******/        script.onerror = script.onload = onScriptComplete;
/******/        function onScriptComplete() {
/******/            // avoid mem leaks in IE.
/******/            script.onerror = script.onload = null;
/******/            clearTimeout(timeout);
/******/            var chunk = installedChunks[chunkId];
/******/            if(chunk !== 0) {
/******/                if(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
/******/                installedChunks[chunkId] = undefined;
/******/            }
/******/        };
/******/
/******/        var promise = new Promise(function(resolve, reject) {
/******/            installedChunks[chunkId] = [resolve, reject];
/******/        });
/******/        installedChunks[chunkId][2] = promise;
/******/
/******/        head.appendChild(script);
/******/        return promise;
/******/    };
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // identity function for calling harmony imports with the correct context
/******/    __webpack_require__.i = function(value) { return value; };
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // on error function for async loading
/******/    __webpack_require__.oe = function(err) { console.error(err); throw err; };
/******/ })
/************************************************************************/
/******/ ([]);
//# sourceMappingURL=inline.bundle.js.map
12
  • Está usando o plano VPS?
    – Daniel
    24/05/2017 às 5:45
  • Daniel, não! Estou usando o plano gratuito da Hostinger! 24/05/2017 às 16:10
  • Então é isso - você precisa de um servidor linux que você possa controlar, configurar, instalar módulos, etc. Dá uma olhada aqui e você vai ver que o suporte do plano gratuito é pra PHP e não o que você está usando... :p
    – Daniel
    24/05/2017 às 16:21
  • O que eu faria: primeiro arrumar um servidor que dê acesso a um prompt de comando do linux, depois eu usaria o git e um serviço como esse para salvar meu projeto inteiro. Depois no servidor linux, eu simplesmente daria o comando 'pull' do meu projeto inteiro, e depois 'npm install' - e tudo deveria estar rodando! Sugiro que você pesquise esses comandos e principalmente o 'git' (já tem bastante pergunta de como utilizar ele aqui, e o próprio serviço que eu indiquei te ajuda a fazer o básico, e é grátis).
    – Daniel
    24/05/2017 às 16:28
  • 1
    @DanielGomes eu não recomendaria, em nenhuma circunstância, o desenvolvimento no host de produção. O processo inicial do Nicolas está correto - desenvolvimento local e publicação da versão de distribuição.
    – OnoSendai
    24/05/2017 às 16:50

3 Respostas 3

8

Como você descobriu é necessário fazer um build da aplicação, ao fazer isso os arquivos gerados podem ser utilizados em qualquer servidor web.

Ex: no wampserve você pode copiar a pasta /dist do seu projeto angular para a pasta /www do wampserve e acessar localhost/dist e lá estará sua pagina em angular 4.

No seu caso você deve "subir" sua aplicação para a hospedagem da hostinger e configurar seu htaccess para redirecionar todas as requisições para o arquivo index.html, só dessa forma o angular poderá ter controle sobre as rotas.

adicione um arquivo .htaccess na pasta da sua hospedagem com essa regra abaixo para fazer essa configuração

    <IfModule mod_rewrite.c>
      RewriteEngine on
      RewriteCond %{REQUEST_FILENAME} -s [OR]
      RewriteCond %{REQUEST_FILENAME} -l [OR]
      RewriteCond %{REQUEST_FILENAME} -d
      RewriteRule ^.*$ - [NC,L]

      RewriteRule ^(.*) /dist/index.html [NC,L]
    </IfModule>

Obs: coloque no seu servidor somente os arquivos da pasta dist, os arquivos gerados devem ser usados em conjunto e não separadamente pois um depende do outro para funcionar.

ps: eu também uso a hospedagem da hostinger para testar minhas aplicações em angular e para trabalhar com o angular só é preciso de um servidor de conteúdo estático e nada mais.

1
  • 1
    Rodrigo, boa noite! Obrigado por responder tão bem minha dúvida. Consegui fazer o Angular funcionar no Wamp graças as tuas dicas. Porém, joguei a pasta dist para o servidor e não funcionou. Creio que não vai funcionar com o plano gratuito e também não existe mais o .htaccess, tentei criar um, mas não funcionou, quando vai para lá, em 5 minutos ele é apagado. Eu vou comprar amanhã um mês do VPS da Hostinger para fazer alguns testes, se tudo der certo, beleza! Se não der, paciência! Muito obrigado pela resposta! 7/06/2017 às 2:50
1
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularHelloWord</title>
  <base href="/">

Retire a tag base do index, para que seus arquivos js sejam direcionados corretamente.

0

Cara, pra mim funcionou fazendo o build assim:

    ng build --base-href /nomeDoSeuProjeto/    

Depois só fazer o upload do projeto que está dentro da pasta dist/ para o servidor.

Fonte: https://angular.io/cli/build

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .