Search code examples
angular-clilinodefedora-25

Deploying Angular on Linode

I am having trouble deploying Angular 4 on Linode.

Using Angular-cli, I have a small Angular 4 app which just renders a basic google map. It can be found here, and it runs fine locally on a mac.

The Linode has been set up fine running Fedora 25 and I can ssh into it.

I have set up a hostname 'ofeyspi' and cloned the repo to my linode.

$ hostname
ofeyspi

Checking the hostname has been connected to the url,

$ cat /etc/hosts
127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
139.162.199.9 ofeyspi.qqiresources.com ofeyspi

Then I run:

$ ng build --prod --bh /root/beans3/dist/
 11% building modules 9/9 modules 0 activeTemplate parse warnings:                 
The <template> element is deprecated. Use <ng-template> instead ("
  <div class="card">
    [WARNING ->]<template ngFor let-panel [ngForOf]="panels">
      <div role="tab" id="{{panel.id}}-header" [attr.ar"): ng:///root/beans3/node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts.NgbAccordion.html@2:4
Hash: 079970cfbabe6b2f710a                                                              
Time: 34065ms
chunk    {0} polyfills.a3e056f914d9748ff431.bundle.js (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.47083d1d3073f3856af7.bundle.js (main) 142 kB {3} [initial] [rendered]
chunk    {2} styles.604a57bc7d4c0f84e447.bundle.css (styles) 122 bytes {4} [initial] [rendered]
chunk    {3} vendor.244ceb2ee1e4bb317079.bundle.js (vendor) 1.39 MB [initial] [rendered]
chunk    {4} inline.df954263324e7c133385.bundle.js (inline) 0 bytes [entry] [rendered]

As you can see this gives an error, a problem with the template element, which can be ignored in development, but I wonder is that the same for production.

This creates a new dist directory, and then I run,

$ ng server --host qqiresources.com

and I've also tried,

$ ng server --host 139.162.199.9
** NG Live Development Server is running on http://139.162.199.9:4200 **
Hash: 2391cafc7c903540029f                                                              
Time: 17824ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 10.5 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 150 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.67 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

When I navigate to http://qqiresources.com:4200 or http://139.162.199.9:4200 I get connection error.

"This site can't be reached"

The console shows,

Failed to load resource: net::ERR_CONNECTION_REFUSED

I've tried running the second command both inside the dist directory and in the projects root directory.

Is there something else that I am missing?

UPDATE: I see now that ng server is not correct, so I installed node and move to the dist directory, where I run http-server,

$ http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://139.162.199.9:8080
Hit CTRL-C to stop the server

But still navigating to http://139.162.199.9:8080 brings up the same 'Site can't be reached' message.

Thanks

UPDATE: I have got apache 2 working and serving the index.html file in the dist directory. However it seems to be having trouble using the other files in dist. I posted a question on it Running Angular-cli on Apache 2

Solution

  • I dont know much about linode. But you should never run 'ng serve' in production. Why not serve 'dist' folder statically via an apache, nginx or production node server. This is how most angular apps are served in production.