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

[DaveXCS]

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.

[DaveXCS]

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...

[nicky-lenaers]

@alan-agius4 The issue is obviously not understood properly. Please provide clear guidance on how to utilize configuration options and/or cli arguments for base/baseHref. If this is no longer supported, the answer to this issue would be very simple. There is no need to reproduce anything.

Thanks!

[BearandYoon]

I use ng build --prod --base-href=/administration/ command but it doesn't work correctly.
When I try with ng build --base-href=/administration/, it works well.
I am not sure why the production version doesn't work.
This is my package.json file.

{
  "name": "dsoadmin",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "production": "ng build --prod --base-href=/administration/"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.2",
    "@angular/cdk": "^7.0.2",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/material": "^7.0.2",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ant-design/icons": "^1.1.15",
    "@auth0/angular-jwt": "^2.0.0",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@tinymce/tinymce-angular": "^2.3.1",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "less": "^2.7.3",
    "ng-zorro-antd": "^1.8.0",
    "ngx-hm-carousel": "^1.3.0",
    "ngx-infinite-scroll": "^6.0.1",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.3",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

Thanks.

[alan-agius4]

@nicky-lenaers and @WizardPC, let me start by making this clear baseHref/ base-href is still supported, both from configuration and from the CLI command as per documentation https://angular.io/cli/serve.

We are unable to reproduce the issue reported here. However, let's not forget that the issue reported here was for an early RC release on version 6, so bugs might have got solved in the meantime.

The bug reported here is that ng serve with --base-href is throwing an error. This is not the case and hence the issue is closed.

@WizardP, I am sorry, but how can I provide a solution for something that we cannot reproduce.

@BearandYoon, if you are experiencing an issue kindly open a new issue with a minimal reproduction.

You can read here why this is needed. 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.

[fuguefoundation]

I encountered this issue while using @angular-builders/dev-server:generic instead of the default builder for ng serve. However, after reading the docs for this package, I saw that it has a peer dependency of "@angular-devkit/build-angular": ">=0.12.1", which was not up to date in package.json from when I initiated this project with ng new project. I changed the version, npm install, success! I did not have to add the baseHref option in angular.json to get it to compile after making this change.

More background reading here too.
https://medium.com/@GrandSchtroumpf/angular-cli-and-web3-e5cb90885741

[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._}