fix(serve): fallback to config.app[0].index (#3813)

Fix #3748

packages/angular-cli/tasks/serve-webpack.ts

@@ -19,6 +19,8 @@ export default Task.extend({
     const ui = this.ui;
 
     let webpackCompiler: any;
+    const projectConfig = CliConfig.fromProject().config;
+    const appConfig = projectConfig.apps[0];
 
     let config = new NgCliWebpackConfig(
       this.project,
@@ -84,12 +86,10 @@ export default Task.extend({
     }
 
     const webpackDevServerConfiguration: IWebpackDevServerConfigurationOptions = {
-      contentBase: path.resolve(
-        this.project.root,
-        `./${CliConfig.fromProject().config.apps[0].root}`
-      ),
+      contentBase: path.join(this.project.root, `./${appConfig.root}`),
       headers: { 'Access-Control-Allow-Origin': '*' },
       historyApiFallback: {
+        index: `/${appConfig.index}`,
         disableDotRule: true,
         htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
       },
@@ -98,8 +98,7 @@ export default Task.extend({
       proxy: proxyConfig,
       compress: serveTaskOptions.target === 'production',
       watchOptions: {
-        poll: CliConfig.fromProject().config.defaults &&
-          CliConfig.fromProject().config.defaults.poll
+        poll: projectConfig.defaults && projectConfig.defaults.poll
       },
       https: serveTaskOptions.ssl
     };

tests/e2e/tests/misc/fallback.ts

@@ -0,0 +1,33 @@
+import { request } from '../../utils/http';
+import { killAllProcesses } from '../../utils/process';
+import { ngServe } from '../../utils/project';
+import { updateJsonFile } from '../../utils/project';
+import { moveFile } from '../../utils/fs';
+
+
+export default function () {
+  // should fallback to config.app[0].index (index.html by default)
+  return Promise.resolve()
+    .then(() => ngServe())
+    .then(() => request('http://localhost:4200/'))
+    .then(body => {
+      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+        throw new Error('Response does not match expected value.');
+      }
+    })
+    .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; })
+    // should correctly fallback to a changed index
+    .then(() => moveFile('src/index.html', 'src/not-index.html'))
+    .then(() => updateJsonFile('angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      app['index'] = 'not-index.html';
+    }))
+    .then(() => ngServe())
+    .then(() => request('http://localhost:4200/'))
+    .then(body => {
+      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+        throw new Error('Response does not match expected value.');
+      }
+    })
+    .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; });
+}

tests/e2e/utils/http.ts

@@ -4,7 +4,11 @@ import * as _request from 'request';
 
 export function request(url: string): Promise<string> {
   return new Promise((resolve, reject) => {
-    let options = { url: url, agentOptions: { rejectUnauthorized: false }};
+    let options = {
+      url: url,
+      headers: { 'Accept': 'text/html' },
+      agentOptions: { rejectUnauthorized: false }
+    };
     _request(options, (error: any, response: IncomingMessage, body: string) => {
       if (error) {
         reject(error);