2

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?

user6680
  • 79
  • 6
  • 34
  • 78

2 Answers2

2

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>
Roger Ng
  • 771
  • 11
  • 28
  • I ran ng build (also tried ng build -prod) and it finished putting the files in the dist folder, but when I put the dist folder on my ftp server and open the page from my site, I get loading... and it never loads. What step am I missing? Is there something I have to do after ng build? – user6680 Nov 23 '16 at 17:30
  • I have added more information to my answer. Please check whether you're using the same version and having the same result. – Roger Ng Nov 24 '16 at 02:57
  • I just figured out the issue. I noticed the file not found for all the ng build files were pointing to the root directory of my ftp server. site.com/ngbuild file is here(according to console errors)/ while they were all really located in dist so after the ng build I went into index.html in dist folder and put dist/ in front of all the script srcs and now it's rendering the app. Thanks for you input though, it still helped me by seeing your path of files in your index.html – user6680 Nov 24 '16 at 04:35
0

From the sites source below is what your HTML looks like:

<html>
<head>
  <meta charset="utf-8">
  <title>User Demo with JSON</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

You are not loading any Angular or JS files. That is the reason for app not working.

Arun Ghosh
  • 7,634
  • 1
  • 26
  • 38
  • I searched SO for `deploy angular2 app` and found this: http://stackoverflow.com/questions/35539622 – ppovoski Nov 23 '16 at 01:46