feat(build): add publicPath support via command and angular-cli.json (#3285)

Add publicPath option for webpack.

User can specify publicPath via `--deploy-url` / `-d` from command line or add `deployUrl` to `angular-cli.json`.

It can solve following issues:

Change the public URL address of the output files (different from baseUrl).
Manipulate the request url for chunk js files.
It is very helpful to solve resources url and route lazying load issues for those applications which have different static files paths such as ASP.NET MVC.

Fixes #3136
Fixes #2960
Fixes #2276
Fixes #2241
Fixes #3344

Author: changLiuUNSW

packages/angular-cli/commands/build.ts

@@ -19,6 +19,7 @@ export interface BuildOptions {
   i18nFile?: string;
   i18nFormat?: string;
   locale?: string;
+  deployUrl?: string;
 }
 
 const BuildCommand = Command.extend({
@@ -46,7 +47,8 @@ const BuildCommand = Command.extend({
     { name: 'progress',       type: Boolean, default: true },
     { name: 'i18n-file',      type: String, default: null },
     { name: 'i18n-format',    type: String, default: null },
-    { name: 'locale',         type: String, default: null }
+    { name: 'locale',         type: String, default: null },
+    { name: 'deploy-url',     type: String,  default: null, aliases: ['d'] }
   ],
 
   run: function (commandOptions: BuildOptions) {

packages/angular-cli/lib/config/schema.d.ts

@@ -13,6 +13,7 @@ export interface CliConfig {
         root?: string;
         outDir?: string;
         assets?: string;
+        deployUrl?: string;
         index?: string;
         main?: string;
         test?: string;

packages/angular-cli/lib/config/schema.json

@@ -45,6 +45,9 @@
             ],
             "default": []
           },
+          "deployUrl": {
+            "type": "string"
+          },
           "index": {
             "type": "string",
             "default": "index.html"

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

@@ -118,7 +118,8 @@ export function getWebpackCommonConfig(
     context: projectRoot,
     entry: entryPoints,
     output: {
-      path: path.resolve(projectRoot, appConfig.outDir)
+      path: path.resolve(projectRoot, appConfig.outDir),
+      publicPath: appConfig.deployUrl
     },
     module: {
       rules: [

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

@@ -31,12 +31,14 @@ export class NgCliWebpackConfig {
     sourcemap = true,
     vendorChunk = false,
     verbose = false,
-    progress = true
+    progress = true,
+    deployUrl?: string
   ) {
     const config: CliConfig = CliConfig.fromProject();
     const appConfig = config.config.apps[0];
 
     appConfig.outDir = outputDir || appConfig.outDir;
+    appConfig.deployUrl = deployUrl || appConfig.deployUrl;
 
     let baseConfig = getWebpackCommonConfig(
       this.ngCliProject.root,

packages/angular-cli/tasks/build-webpack-watch.ts

@@ -15,6 +15,8 @@ export default Task.extend({
     const project = this.cliProject;
 
     const outputDir = runTaskOptions.outputPath || CliConfig.fromProject().config.apps[0].outDir;
+    const deployUrl = runTaskOptions.deployUrl ||
+                       CliConfig.fromProject().config.apps[0].deployUrl;
     rimraf.sync(path.resolve(project.root, outputDir));
 
     const config = new NgCliWebpackConfig(
@@ -30,7 +32,8 @@ export default Task.extend({
       runTaskOptions.sourcemap,
       runTaskOptions.vendorChunk,
       runTaskOptions.verbose,
-      runTaskOptions.progress
+      runTaskOptions.progress,
+      deployUrl
     ).config;
     const webpackCompiler: any = webpack(config);
 

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

@@ -17,6 +17,8 @@ export default <any>Task.extend({
     const project = this.cliProject;
 
     const outputDir = runTaskOptions.outputPath || CliConfig.fromProject().config.apps[0].outDir;
+    const deployUrl = runTaskOptions.deployUrl ||
+                       CliConfig.fromProject().config.apps[0].deployUrl;
     rimraf.sync(path.resolve(project.root, outputDir));
     const config = new NgCliWebpackConfig(
       project,
@@ -31,7 +33,8 @@ export default <any>Task.extend({
       runTaskOptions.sourcemap,
       runTaskOptions.vendorChunk,
       runTaskOptions.verbose,
-      runTaskOptions.progress
+      runTaskOptions.progress,
+      deployUrl
     ).config;
 
     const webpackCompiler: any = webpack(config);

tests/e2e/tests/build/deploy-url.ts

@@ -0,0 +1,15 @@
+import {ng} from '../../utils/process';
+import {expectFileToMatch} from '../../utils/fs';
+import {updateJsonFile} from '../../utils/project';
+
+
+export default function() {
+  return ng('build', '-d', 'deployUrl/')
+    .then(() => expectFileToMatch('dist/index.html', 'deployUrl/main.bundle.js'))
+    .then(() => updateJsonFile('angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      app['deployUrl'] = 'config-deployUrl/';
+    }))
+    .then(() => ng('build'))
+    .then(() => expectFileToMatch('dist/index.html', 'config-deployUrl/main.bundle.js'));
+}