Angular 2-Angular cli --Build project

Question

I am newbie to Angular 2 . I developed one small project and packaging is generated using angular-cli.It generates dist folder successfully.

But when I deploy this app to server and hit index.html page ,Page cant access the bundle js file.

Index.html after bundling::

<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

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


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <!-- Latest compiled and minified JavaScript -->
<script src="//rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>

<link href="styles.d41d8cd98f00b204e9800998ecf8427e.bundle.css" rel="stylesheet"></head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.d41d8cd98f00b204e980.bundle.js"></script><script type="text/javascript" src="styles.b2328beb0372c051d06d.bundle.js"></script><script type="text/javascript" src="main.83a76acd0c370402d4d0.bundle.js"></script></body>

Angular-cli.js

{
      "project": {
        "version": "1.0.0-beta.21",
        "name": "app-name"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": [
            "assets",
            "favicon.ico"
          ],
          "index": "index.html",
          "main": "main.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.json",
          "prefix": "app",
          "mobile": false,
          "styles": [
            "styles.css"
          ],
          "scripts": [],
          "environments": {
            "source": "environments/environment.ts",
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "addons": [],
      "packages": [],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "css",
        "prefixInterfaces": false,
        "inline": {
          "style": false,
          "template": false
        },
        "spec": {
          "class": false,
          "component": true,
          "directive": true,
          "module": false,
          "pipe": true,
          "service": true
        }
      }
    }

Folder structure after bundle:

So my question how can I append folder name in src tag of index.html file while packaging using Angular-CLI like below tag.

<script type="text/javascript" src="/dist/inline.d41d8cd98f00b204e980.bundle.js">

I don't see any way do customize the bundle path. It works correctly for me and your structure looks ok. Could you please past your error message in your post ? — Karbos 538
– Karbos 538, Commented Jan 25, 2017 at 10:48
when I hit my application url in browser it gives me 404 for bundle js.localhost:port/inline.d41d8cd98f00b204e980.bundle.js --404.Because bundle js is present in Myapp folder after packaging.My application url is localhost:port/Myapp — Vaibs
– Vaibs, Commented Jan 25, 2017 at 10:53
On Local it works perfectly. I am facing issue when it gets deployed on apache server — Vaibs
– Vaibs, Commented Jan 25, 2017 at 10:55
Maybe take a look to your request logs and the base url (w3schools.com/tags/tag_base.asp) — Karbos 538
– Karbos 538, Commented Jan 25, 2017 at 10:56

OArnarsson · Accepted Answer · 2017-01-25 11:13:26Z

1

Have you tried adding

<base href="./dist/">

to the head of your html file?

answered Jan 25, 2017 at 11:13

OArnarsson

9701 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vaibs Over a year ago

Doesn't work out for me! Actual problem is post building the project all the js and assets (images) files are not getting mapped properly. If i add 'dist' in all my scripts css inline in index.html, it gets loaded and runs perfectly.

vinayakj Over a year ago

First try above sol with simple html file with one script tag & see the generated url & change it accordingly

OArnarsson Over a year ago

Okay, are all the images inside the app/src folder inside your angular CLI project? Ahh! Try changing it to <base href="/">, nothing more. I tried making a new project with some images in the app/src folder and set the base to "/" and it links them fine. Hope this helps!

Collectives™ on Stack Overflow

Angular 2-Angular cli --Build project

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related