baseHref/deployUrl option for universal build in @angular-devkit/build-angular:server

From @nishesj on May 30, 2018 9:1

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Area

- [ x] devkit
- [ ] schematics

Versions

angular-devkit/architect 0.6.5

Repro steps

Cannot pass baseHref or deployUrl option when running ng run web:server:production which contains

 "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }

Which causes wrong assets path in css on the universal generated response. Where as when doing a browser build the baseHref is properly appended in postCss processing as expected. baseHref set to “https://cdn.example.com”

  .icon {
     background: url('/assets/icon.svg') no-repeat center center;
   }

angular-devkit/build-angular:browser-> postCss ->

 .icon {
    background: url('https://cdn.example.com/assets/icon.svg') no-repeat center center;
  }

angular-devkit/build-angular:server -> postCss -> no change which leads to wrong URL in first initial server rendered response in combination to html base href tag

Desired functionality

The postcss step in server build should append the path with baseUrl or deployUrl as in browserBuild so that the initial response generated by universal has correct path to assets if relative URL is used

Copied from original issue: angular/devkit#986

[alan-agius4]

Hi, deployUrl is an option which is available for the server and browser builders, and you can set it as shown below

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "deployUrl": "https://cdn.com"
    ...
  },
  ...
},
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "deployUrl": "https://cdn.com"
    ...
   },
  ...
}

It can also be a nested property inside a configuration example

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "configurations": {
    "production": {
      "deployUrl": "https://cdn.com"
      ...
    }
    ...
   },
  ...
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}