angular-cli


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

Related Links

Create Project with Angular 4 Release using angularcli
addons removed in angular-cli.json whats the replacement
angular-cli: ng serve command with config error
Augury Angular-cli When I installed the augury .Error is as follows
Teamcity for building Angular cli app
angular cli update issue on local folder
Access to -aot parameter in code
Missing peer dependencies after installing latest angular-cli: What to do?
angular-cli ng serve : Error: No errors
Getting error after Angular cli update
Does angular-cli uses rollup to do ahead-of-time compilation and adding all into one file?
Angular CLI install error
Using glob for assets in angular-cli throws error
Importing Global SCSS into Component SCSS with Angular-CLI
Error during AOT build with angular-cli 24 and Angular 2.4.1
Add importer to node-sass in angular-cli project

Categories

HOME
makefile
numpy
vhdl
nlp
itext
label
mapbox-gl-js
apollo
wampserver
schemacrawler
triggers
proguard
netflix-feign
phoenix
uicollectionview
redux-observable
jpeg2000
jconsole
deb
autolayout
onsen-ui
source-maps
bcrypt
cep
ab-initio
owl-api
forum
xor
getjson
read-write
backup-strategies
division
bing-maps-api
vsts-package-management
rhel.net
socketpair
haskell-pipes
android-preferences
dart-pub
google-account
median
ivona
amd
worker
livefyre
livescribe
jgraph
spell-checking
spring-data-hadoop
volume
photon-controller
addin-express
keycode
rmongodb
pydio
gitweb
pax-web
fps
remoteapp
django-south
supportmapfragment
bluesnap
brackets-shell
altbeacon
except
enyo
eyeql
evo
sem
subresource-integrity
built-in
calibration
on-duplicate-key
type-mismatch
jython-2.7
adcolony
livechat
dto
ember-addon
yahoo-boss-api
anjuta
winrt-httpclient
asp.net-mvc-scaffolding
installshield-2009
haskell-platform
carddav
backbone-relational
manage.py
shortcuts
dwolla
resgen
qss
magickwand
snapjs
icsharpcode
point-sprites
email-spec
open-graph-beta
carbide

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App