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

changLiuUNSW · hansl · commit 0ce64a48a4b4 · 2016-12-29T11:11:02.000-08:00
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 angular#3136 Fixes angular#2960 Fixes angular#2276 Fixes angular#2241 Fixes angular#3344
diff --git a/packages/angular-cli/commands/build.ts b/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) {
diff --git a/packages/angular-cli/lib/config/schema.d.ts b/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;
diff --git a/packages/angular-cli/lib/config/schema.json b/packages/angular-cli/lib/config/schema.json
@@ -45,6 +45,9 @@
             ],
             "default": []
           },
+          "deployUrl": {
+            "type": "string"
+          },
           "index": {
             "type": "string",
             "default": "index.html"
diff --git a/packages/angular-cli/models/webpack-build-common.ts b/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: [
diff --git a/packages/angular-cli/models/webpack-config.ts b/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,
diff --git a/packages/angular-cli/tasks/build-webpack-watch.ts b/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);
 
diff --git a/packages/angular-cli/tasks/build-webpack.ts b/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);
diff --git a/tests/e2e/tests/build/deploy-url.ts b/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'));
+}
