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

[alexeagle]

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

[yosigolan]

Hey.
did anyone found any workaround for this?

[alan-agius4]

Hi, for the server builds, there is no baseHref, because the base-href would have been set when building the client build in the index.html.

When the application gets served by the server, the CSS gets inlined in the index.html and any relative paths for CSS resources will use the baseHref previously used in the client build.

Also, you could use the deployUrl option, as this option does exists in the server build.

If the problem persists, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[raghavgarg1257]

Hey, @alan-agius4

Can you please tell, where does this deployUrl option go? I have tried the following approach.

"server": {
    "options": {
        "deployUrl": "https://cdn.com/"
    }
}

but it gives me this error

Schema validation failed with the following errors:
Data path "" should NOT have additional properties(deployUrl).

[devbenzy]

Hey, @alan-agius4

Can you please tell, where does this deployUrl option go? I have tried the following approach.

"server": {
    "options": {
        "deployUrl": "https://cdn.com/"
    }
}

but it gives me this error

Schema validation failed with the following errors:
Data path "" should NOT have additional properties(deployUrl).

Me too wants to know this

[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"
      ...
    }
    ...
   },
  ...
}

[vikash5529]

ng run web:server:production --deploy-url yoururl is the only solution which worked for me

[angular-automatic-lock-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.}