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

…ngular#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 angular#3136 Fixes angular#2960 Fixes angular#2276 Fixes angular#2241 Fixes angular#3344
MRHarrison · Feb 9, 2017 · 26ecde7 · 26ecde7
1 parent 4352a22
commit 26ecde7
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 5 deletions.
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'));
+}