CODEWITHSUNDEEP
angulardeployment
Rob DePietro
Rob DePietro

Reputation: 324

Angular 2+ Application ng build

I created an angular 2+ front end application that I am trying to run on my company's sharepoint website. However, when I ng build my project and the dist folder is created It will not allow my to take the index.html and .js files and just place them in a shared drive to launch the application. I need some help. Is it possibly after a build to launch the application without a web server? Basically just launch the index.html and for it to work?

I know it has something to do with the routing and the base href

angular chrome error

Upvotes: 2

Views: 395

Answers (5)

Night Train
Night Train

Reputation: 2576

I found an easy solution so here is an

EDIT:

There is a npm package "http-server" that lets you easily run a http server locally. Here is how to install and use it:

  1. Install http-server globally

    npm install -g http-server

  2. To run your build in your dist folder on http://localhost:4201 run:

    http-server dist -a 127.0.0.1 -p 4201

You can also use XAMPP, but that goes far beyond what you need for that. But if you dont want to use the npm package there are also methods how to run a webserver with onboard tools of Windows or MacOS described in this Gist

Alternative with GitHub Pages

I also had the same problem and couldnt solve it, even after searching stackoverflow for (lets be honest...) minutes. I found some solutions, but I couldn't get it running. What I did instead was using GitHub Pages (you can also use GitLab Pages where you can create private repositories).

  1. Build

    Build your app with the base-href for the GitHub Page

    ng build --prod --base-href "https://USER_NAME.github.io/REPOSITORY/"

  2. Push to GitHub

    Push your build to GitHub as the gh_pages branch. If you are not familar with Git you can use the very easy to use GitHub Desktop app

  3. set GitHub Pages

    got to https://github.com/USER_NAME/REPOSITORY/settings and set the branch where you uploaded your page (in our case gh_pages) as the source of GitHub Pages

There is a lot more you can do with using Travis-CI. Travis-CI can build your project every time you push an update to your repository and push it to GitHub Pages. GitLab even has their own Continuous Integration.

Upvotes: 1

Rob DePietro
Rob DePietro

Reputation: 324

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emulator</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></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

I appreciate the ideas. I was able to change the base href a bit higher so that the .js files are now being recognized but now getting a different error in the console with nothing loading...seems has something to do with routing unfortunately.

enter image description here

Upvotes: 0

marouane kadiri
marouane kadiri

Reputation: 316

Try to change in your index.html instead of base href="/" add the name of your folder where the index.html and don't forget the ending "/":

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emulator</title>
  <base href="/<BaseFolder>/">

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

Upvotes: 0

Rob DePietro
Rob DePietro

Reputation: 324

good suggestion but still no love...still getting failed to load resource in the console.

Upvotes: 0

Rob DePietro
Rob DePietro

Reputation: 324

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emulator</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></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Upvotes: 0

Related Questions