fix(build): fix path error when appConfig has no main (#3867)

Author: filipesilva

packages/angular-cli/models/webpack-build-common.ts

@@ -37,16 +37,17 @@ export function getWebpackCommonConfig(
 ) {
 
   const appRoot = path.resolve(projectRoot, appConfig.root);
-  const appMain = path.resolve(appRoot, appConfig.main);
   const nodeModules = path.resolve(projectRoot, 'node_modules');
 
   let extraPlugins: any[] = [];
   let extraRules: any[] = [];
   let lazyChunks: string[] = [];
 
-  let entryPoints: { [key: string]: string[] } = {
-    main: [appMain]
-  };
+  let entryPoints: { [key: string]: string[] } = {};
+
+  if (appConfig.main) {
+    entryPoints['main'] = [path.resolve(appRoot, appConfig.main)];
+  }
 
   // determine hashing format
   const hashFormat = getOutputHashFormat(outputHashing);

packages/angular-cli/models/webpack-config.ts

@@ -35,14 +35,14 @@ export class NgCliWebpackConfig {
     deployUrl?: string,
     outputHashing?: string
   ) {
-    const config: CliConfig = CliConfig.fromProject();
-    const appConfig = config.config.apps[0];
+    const appConfig = CliConfig.fromProject().config.apps[0];
+    const projectRoot = this.ngCliProject.root;
 
     appConfig.outDir = outputDir || appConfig.outDir;
     appConfig.deployUrl = deployUrl || appConfig.deployUrl;
 
     let baseConfig = getWebpackCommonConfig(
-      this.ngCliProject.root,
+      projectRoot,
       environment,
       appConfig,
       baseHref,
@@ -52,28 +52,28 @@ export class NgCliWebpackConfig {
       progress,
       outputHashing
     );
-    let targetConfigPartial = this.getTargetConfig(
-      this.ngCliProject.root, appConfig, sourcemap, verbose
-    );
-    const typescriptConfigPartial = isAoT
-      ? getWebpackAotConfigPartial(this.ngCliProject.root, appConfig, i18nFile, i18nFormat, locale)
-      : getWebpackNonAotConfigPartial(this.ngCliProject.root, appConfig);
+    let targetConfigPartial = this.getTargetConfig(projectRoot, appConfig, sourcemap, verbose);
 
     if (appConfig.mobile) {
-      let mobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, appConfig);
-      let mobileProdConfigPartial = getWebpackMobileProdConfigPartial(this.ngCliProject.root,
-                                                                      appConfig);
+      let mobileConfigPartial = getWebpackMobileConfigPartial(projectRoot, appConfig);
+      let mobileProdConfigPartial = getWebpackMobileProdConfigPartial(projectRoot, appConfig);
       baseConfig = webpackMerge(baseConfig, mobileConfigPartial);
       if (this.target == 'production') {
         targetConfigPartial = webpackMerge(targetConfigPartial, mobileProdConfigPartial);
       }
     }
 
-    this.config = webpackMerge(
-      baseConfig,
-      targetConfigPartial,
-      typescriptConfigPartial
-    );
+    let config = webpackMerge(baseConfig, targetConfigPartial);
+
+    if (appConfig.main) {
+      const typescriptConfigPartial = isAoT
+        ? getWebpackAotConfigPartial(projectRoot, appConfig, i18nFile, i18nFormat, locale)
+        : getWebpackNonAotConfigPartial(projectRoot, appConfig);
+
+      config = webpackMerge(config, typescriptConfigPartial);
+    }
+
+    this.config = config;
   }
 
   getTargetConfig(projectRoot: string, appConfig: any, sourcemap: boolean, verbose: boolean): any {

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

@@ -56,6 +56,7 @@ export default Task.extend({
       entryPoints.push('webpack/hot/dev-server');
       config.plugins.push(new webpack.HotModuleReplacementPlugin());
     }
+    if (!config.entry.main) { config.entry.main = []; }
     config.entry.main.unshift(...entryPoints);
     webpackCompiler = webpack(config);
 

tests/e2e/tests/misc/minimal-config.ts

@@ -1,5 +1,5 @@
-import { writeFile } from '../../utils/fs';
-import { ng } from '../../utils/process';
+import { writeFile, writeMultipleFiles } from '../../utils/fs';
+import { runServeAndE2e } from '../test/e2e';
 
 
 export default function () {
@@ -8,7 +8,33 @@ export default function () {
       apps: [{
         root: 'src',
         main: 'main.ts'
-      }]
+      }],
+      e2e: { protractor: { config: './protractor.conf.js' } }
     })))
-    .then(() => ng('build'));
+    .then(() => runServeAndE2e())
+    .then(() => writeMultipleFiles({
+      './src/script.js': `
+        document.querySelector('app-root').innerHTML = '<h1>app works!</h1>';
+      `,
+      './e2e/app.e2e-spec.ts': `
+        import { browser, element, by } from 'protractor';
+
+        describe('minimal project App', function() {
+          it('should display message saying app works', () => {
+            browser.ignoreSynchronization = true;
+            browser.get('/');
+            let el = element(by.css('app-root h1')).getText();
+            expect(el).toEqual('app works!');
+          });
+        });
+      `,
+      'angular-cli.json': JSON.stringify({
+        apps: [{
+          root: 'src',
+          scripts: ['./script.js']
+        }],
+        e2e: { protractor: { config: './protractor.conf.js' } }
+      }),
+    }))
+    .then(() => runServeAndE2e());
 }

tests/e2e/tests/test/e2e.ts

@@ -3,7 +3,7 @@ import {expectToFail} from '../../utils/utils';
 import {ngServe} from '../../utils/project';
 
 
-function _runServeAndE2e(...args: string[]) {
+export function runServeAndE2e(...args: string[]) {
   return ngServe(...args)
     .then(() => ng('e2e'))
     .then(() => killAllProcesses(), (err: any) => {
@@ -16,8 +16,8 @@ export default function() {
   // This is supposed to fail without serving first...
   return expectToFail(() => ng('e2e'))
     // These should work.
-    .then(() => _runServeAndE2e())
-    .then(() => _runServeAndE2e('--prod'))
-    .then(() => _runServeAndE2e('--aot'))
-    .then(() => _runServeAndE2e('--aot', '--prod'));
+    .then(() => runServeAndE2e())
+    .then(() => runServeAndE2e('--prod'))
+    .then(() => runServeAndE2e('--aot'))
+    .then(() => runServeAndE2e('--aot', '--prod'));
 }