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

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
angular-cli#1.0.0-beta.23 (2016-12-15) NOT on npm
Angular cli for existing github project
How to pass config data to NgModule so NgModule will be compiled with AOT
Cloning a repo based on Angular CLI
How can I speed up Angular CLI Live Reload - 1-2 minutes per change
Generating a barrel when calling ng g component <myName>
Setting up tether-drop to work with angular-cli#1.0.0-beta.24
Angular CLI (AOT) gives error: ERROR in Cannot determine the module for class
Angular CLI - ng serve won't run unless I specify port

Categories

HOME
batch-processing
vb6
amazon-swf
freepascal
scipy
fparsec
otrs
extract
mainframe
apple-numbers
terrain
yocto
shader
nixos
lagom
game-maker-studio-1.4
xlsx
ctypes
automata
maxima
ida
zope
google-openid
distance
uiautomator
epicor
kitematic
cocoa-touch
rworldmap
cronet
printdocument
katharsis
dss
web-frontend
mangodb
xor
shapes
hawtio
jboss-esb
bigcartel
autocompletetextview
active-model-serializers
ntfs-mft
tic-tac-toe
powermta
startapp
sapui
rhel6
ogre3d
workflow-foundation-4.5
nuget-server
pycurl
castle-dynamicproxy
qos
gulp-typescript
android-navigationview
cjson
push-diffusion
rstudio-server
multiple-file-upload
multifile-uploader
image-editing
logcat
magento-1.4
anythingslider
plone-3.x
optionbutton
unity5.3
jericho-html-parser
visual-studio-code
urn
cpu-cores
apache-mina
google-earth-plugin
c++-actor-framework
django-1.6
kallithea
adaptive-compression
boost-test
slick-2.0
map-force
help-viewer
confusion-matrix
windows-mobile-6
driver-signing
goinstant
multiple-login
dynamics-ax-2009
sharpmap
mailcore
database-permissions
cadisplaylink
law-of-demeter
electronic-signature
handwriting
authenticode
nvelocity
post-redirect-get
chatroom
j-interop
dirty-data

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