title: Angular2 why --base-href build option is not working
body: <p>Now I am trying to build angular2 project with --base-href option, But it is not working well.</p>
  
  <blockquote>
    <p>ng build --bh=/Chamber/frontend/</p>
  </blockquote>
  
  <p>This is contents of .angular-cli.json</p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "frontend"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "D:/Work/Learn/Laravel/Chamber/Chamber/public/frontend/",
        "assets": [
          "assets",
          "assets/favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",
            "../node_modules/font-awesome/scss/font-awesome.scss",
            "styles.scss"
        ],
        "scripts": [
            "../node_modules/jquery/dist/jquery.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.min.js"
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.dev.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
      {
        "project": "src/tsconfig.app.json"
      },
      {
        "project": "src/tsconfig.spec.json"
      },
      {
        "project": "e2e/tsconfig.e2e.json"
      }
    ],
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "scss",
      "component": {}
    }
  }
  </code></pre>
  
  <p>After building, the outDir's index.html contains not valid basehref as below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Chamber&lt;/title&gt;
      &lt;base href= "/"&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  &lt;/head&gt;
  
  &lt;body class="homepage"&gt;
    &lt;app-root&gt;Loading...&lt;/app-root&gt;
  
  &lt;script type="text/javascript" src="inline.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="polyfills.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="scripts.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="styles.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="vendor.bundle.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="main.bundle.js"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my angular2 version.</p>
  
  <pre><code>D:\Work\Learn\Laravel\Chamber\Frontend&gt;ng -v
  Your global Angular CLI version (1.0.3) is greater than your local
  version (1.0.1). The local Angular CLI version is used.
  
  To disable this warning use "ng set --global warnings.versionMismatch=false".
      _                      _                 ____ _     ___
     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                 |___/
  @angular/cli: 1.0.1
  node: 6.10.0
  os: win32 x64
  @angular/common: 4.1.0
  @angular/compiler: 4.1.0
  @angular/core: 4.1.0
  @angular/forms: 4.1.0
  @angular/http: 4.0.3
  @angular/platform-browser: 4.1.0
  @angular/platform-browser-dynamic: 4.1.0
  @angular/router: 4.1.0
  @angular/cli: 1.0.1
  @angular/compiler-cli: 4.1.0
  
  D:\Work\Learn\Laravel\Chamber\Frontend&gt;
  </code></pre>
  
  <p>I don't know what is wrong.
  Is there anyone to fix this?</p>