Angular-cli 6 and base-href no longer supported?

Versions

Angular CLI: 6.0.0-rc.5
Node: 9.11.1
OS: win32 x64
Angular: 6.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.7
@angular-devkit/build-angular     0.5.7
@angular-devkit/build-optimizer   0.5.7
@angular-devkit/core              0.5.7
@angular-devkit/schematics        0.5.7
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.5
@schematics/angular               0.5.7
@schematics/update                0.5.7
rxjs                              6.0.0-uncanny-rc.7
typescript                        2.7.2
webpack                           4.5.0

Repro steps

• change index.html e.g. to base href="/v2"
• ng serve -bh /v2/ or ng serve --base-href /v2/
• in angular.json: "styles": ["node_modules/[at]fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss",....

Observed behavior

option -bh or --base-href is no longer supported
without this option e.g. fonts will not be loaded correctly if a link including the base-href is loaded in the browser:
GET http://localhost:4200/v2/fa-solid-900.woff net::ERR_ABORTED
if i type just "http://localhost:4200" without any base-href it will redirect to /v2 but the ressources will be loaded.

Desired behavior

What is the alternative implementation in angular6?

[dirkluijk]

As far as I know, the number of options has been reduced. You should pass a configuration (e.g. --configuration v2) and add this configuration with its options to your angular.json:

{
  "serve": {
    "configurations": {
      "v2": {
        "servePath": "/v2"
      }
    }
  }
}

The schemas can be found in the @angular/devkit repo, e.g. https://github.com/angular/devkit/tree/master/packages/angular_devkit/build_angular/src/dev-server for ng serve.

hi thanks for you hint. the servepath doesn't helped here but i found now a way to fix the problem by adding this to angular.json:

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref" : "/v2/",
            "deployUrl": "/v2/",

i had to add baseHref and deployUrl instead of just base-href like in angular5

[davidenke]

Note that you have to escape the path if you want to set this options programatically:

 ng config projects.demo.architect.build.options.baseHref "'/base/'"

Otherwise the /base/ slug will be interpreted as path.

[Jun711]

@DaveXCS @dirkluijk
Is this angular.json the one in the angular cli folder?
Changing the option would affect all projects when we use angular cli?

Edit:
I realized this used to be called angular-cli.json?
So, this proposed fix by DaveXCS is probably not gonna work as there is no architect in my angular-cli.json

[yangxiaolin]

@DaveXCS it's not work for me
this is angular.json

and this is bundle index.html file

[Cromies]

Is anyone checking this ticket? I'm having the same issues as @yangxiaolin

[clydin]

@yangxiaolin The angular.json file code section shows the e2e target not the build target. Those settings shown have no effect on an ng build

[yangxiaolin]

@clydin thank you

[rafkos83]

I'm adding to builder options base href like this:

   "architect": {
        "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
       "outputPath": "eagle-app/dist/mMonitor-app",
       "baseHref": "/dist/",
            "deployUrl": "/dist/",

And I still having the error

 Cannot read property 'startTag' of null
 TypeError: Cannot read property 'startTag' of null
    at IndexHtmlWebpackPlugin.<anonymous> 

Anyway using the --base-href argument is also returning this error. Funny thing is that that in the docs of angular cli still exists this option, even in help but what I read here is not supported anymore? how can I use this base href. Withouy that my font files are not loading

[clydin]

Please provide the contents of the project's index.html file.

[rafkos83]

This is a quite complicated situation at least I see it like that. Just a small intro.

I have a MVC 5 appliaction with Areas. In all Areas that we have now we have Angular 1.x. Now we want to implement in the new area Angular 2+ with the help of Angular CLi as this is a prefered tool by angular, at least this is what is written there. Although it's inconsistent because they are saying let's say in VS configuration to use quickstart with system.js but on the page of quicstart they say it's depricated. ANYWAY, back to the subject. We focused on an idea to create an sepearte application per area. The general concept is in this stackoverflow threar: https://stackoverflow.com/questions/52519187/cannot-match-any-routes-url-segmentangular-main

Now I've managed to fix the problem with the error. I've added an empty index.html file to the application and then the error disapeared. I've tired to change the base href but still this does not help with loading fonts. In this case I'm using prime ng. Refering to your question my index file of the app is actually (at least I think so) is the Index.cshtml (razor view) file not the index.html file. I've only added this to not have the error. Anyway the problem with not loading the fonts still exists. If this what I have written is understandable, then I would be more then happy to get any help :)

[WizardPC]

Someone can tell the real solution ?

1. APP_BASE_HREF with some "environment" variable

2. ng build --prod --base-href /my/app/

3. angular.json with baseHref and deployUrl

Wich is it ?

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided.
Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue.
Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[WizardPC]

Can you respond to questions at least...