How do I publish an Angular CLI (Angular 4) project to my server?

Asked

Viewed 13,703 times

5

I’m learning Angular CLI and managed to make an application run on localhost ng serve. However, I wanted to put this application on my hosted website on Hostinger, just for testing and etc.

So, I went to play all the files (26,000 files) of the application on the website of "node_modules".

Researching I saw that I had to do the "ng build". I did the "ng build", he created the folder "dist", I went to play this folder on the site, he climbed everything right, but does not execute the components, it is just on index.html.

I wonder how I do to put this application on my website?

index.html (Inside the "dist" folder): " 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.bundlejs.:

/******/ (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
angular build

  • You’re using the VPS plan?

  • Daniel, no! I’m using Hostinger’s free plan!

  • So that’s it - you need a linux server that you can control, configure, install modules, etc. Take a look here and you will see that the free plan support is for PHP and not what you are using... :p

  • What I would do: first fix a server that gives access to a linux command prompt, then I would use the git and a service such as that to save my entire project. Then on the linux server, I would simply give the 'pull' command of my entire project, and then 'npm install' - and everything should be running! I suggest you research these commands and especially git (you already have a lot of questions about how to use it here, and the very service I indicated helps you do the basics, and it’s free).

  • Thank you so much for the tips and the answer, Daniel! I will seek to know better about the commands and will likely buy a VPS. I have some projects in PHP for clients, I think it will be better to host everything in one place and manage it myself.!

  • I misspelled, the full command that 'downloads' your project to the server is 'git pull' - good luck! :)

  • 1

    @Danielgomes I would not recommend, in none condition, development on the production host. Nicolas’s initial process is correct - local development and publication of the distribution version.

  • @Nícolasaigner you could post here the content of dist\index.html? And, if possible, your package.json also?

  • @Onosendai and I, +1

  • @Onosendai, yes! I put in question the files!

  • Perfect - and how are the contents of inline.bundle.js and main.bundle.js? These are the files responsible for loading both the dependencies and your application. They are correctly populated?

  • @Onosendai, I was able to put inline.bundle.js, the other file is huge, but it’s correct too. I think that’s what Daniel Gomes said, because it’s not a VPS and so on.

Show 7 more comments

3 answers

7


As you discovered it is necessary to build the application, by doing this the generated files can be used on any web server.

Ex: in wampserve you can copy the folder /dist from its angular design to the folder /www wampserve and access localhost/dist and there will be your page in angular 4.

In your case you must "upload" your application to the Hostinger hosting and configure your htaccess to redirect all requests to the index.html file, only then the angular can have control over the routes.

add a . htaccess file to your hosting folder with this rule below to make this setting

    <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>

Note: put only the files in the folder on your server dist, the generated files must be used together and not separately because one depends on the other to work.

ps: I also use the Hostinger hosting to test my applications in angular and to work with angular it only takes a static content server and nothing more.

  • 1

    Rodrigo, good night! Thank you for answering my question so well. I was able to make Angular work on Wamp thanks to your tips. However, I played the dist folder for the server and it didn’t work. I don’t think it will work with the free plan and there is no more . htaccess, I tried to create one, but it didn’t work, when it goes there, in 5 minutes it gets erased. I’m going to buy a month of Hostinger’s VPS tomorrow to do some tests, if all goes well, beauty! If not, patience! Thank you very much for your reply!

1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularHelloWord</title>
  <base href="/">

Remove the base tag from the index, so that your js files are correctly directed.

0

Man, it worked for me doing the build like this:

    ng build --base-href /nomeDoSeuProjeto/

Then just upload the project that is inside the dist/ folder to the server.

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

Browser other questions tagged angular build

You are not signed in. Login or sign up in order to post.