[Fixed] Deploying Angular2 site on FTP server

Issue

I’m trying to run my angular2 site on my portfolio site, but when I point to index.html file, all I get is Loading… and the page never loads. I’ve never deployed an angular2 site online before. Is there something I’m missing?

Solution

If you are using angular-cli, you can create a build by using the command ng build and then upload those files located in dist/ folder to your FTP server.

After executing ng build, you should see the following files in dist/ folder.

C:\temp\ng2_test\dist>dir
 Volume in drive C is OS
 Volume Serial Number is XXXX-XXXX

 Directory of C:\temp\ng2_test\dist

2016-11-24  10:50 AM    <DIR>          .
2016-11-24  10:50 AM    <DIR>          ..
2016-11-24  10:50 AM             5,430 favicon.ico
2016-11-24  10:50 AM               481 index.html
2016-11-24  10:50 AM             5,539 inline.bundle.js
2016-11-24  10:50 AM             5,600 inline.bundle.map
2016-11-24  10:50 AM         2,477,664 main.bundle.js
2016-11-24  10:50 AM         2,504,627 main.bundle.map
2016-11-24  10:50 AM            10,268 styles.bundle.js
2016-11-24  10:50 AM            13,940 styles.bundle.map
               8 File(s)      5,023,549 bytes
               2 Dir(s)  329,406,005,248 bytes free

Version

angular-cli: 1.0.0-beta.21
node: 7.2.0
os: win32 x64

Content of dist/index.html

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Leave a Reply

(*) Required, Your email will not be published