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

Fix angular#3748

Author: filipesilva

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);