Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[router/testing] No base href set errors in tests appear with router when using Debug Mode #19116

Closed
1 of 15 tasks
IxquitilisSaid opened this issue Oct 19, 2020 · 1 comment · Fixed by #19119
Closed
1 of 15 tasks

[router/testing] No base href set errors in tests appear with router when using Debug Mode #19116

IxquitilisSaid opened this issue Oct 19, 2020 · 1 comment · Fixed by #19119
Labels
area: @angular-devkit/build-angular devkit/build-angular:karma freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Milestone
Backlog

Comments

@IxquitilisSaid
Copy link
Contributor

🐞 Bug report

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • xi18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

No. Seems to me that it's a pretty old issue.

Description

In short, when testing an app with routing, tests will run fine unless you toggle Karma's debug mode. There all components with routing will throw the aforementioned "No base href set" error.

🔬 Minimal Reproduction

I've made a demo repo for it here

npm i
ng test

Initially, all the tests will be green and succeed but if you click the Debug button above, you'll see the error being thrown

🔥 Exception or Error


Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
    at new PathLocationStrategy (http://localhost:9876/_karma_webpack_/node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js:378:1)
    at Object.provideLocationStrategy [as useFactory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:5520:1)
    at Object.factory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11338:1)
    at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11249:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11071:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:801:1)
    at Module.ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:805:1)
    at Object.Location_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js:695:90)
    at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11249:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11071:1)

🌍 Your Environment


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.0.8
Node: 10.16.0
OS: darwin x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cli                      10.0.8
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0
@IxquitilisSaid IxquitilisSaid mentioned this issue Oct 19, 2020
Merged
@ngbot ngbot bot modified the milestone: Backlog Oct 19, 2020
IxquitilisSaid added a commit to IxquitilisSaid/angular-cli that referenced this issue Oct 19, 2020
@IxquitilisSaid
fix(@angular-devkit/build-angular): add a base href to karma debug co…
24854df 
…ntext

This commits adds a base href value in the karma context iframe used to run unit tests where a unit test throws:
No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
Even if the application is fine.
This is because the index.html from Angular CLI contains a base href value, but not the Karma context iframe.
So when adding a unit test with a testing module that imports a NgModule, for example AppModule,
which itself imports RouterModule, the unit test used to throw an error (regression appeared in router 3.1).
That could be solved by either adding `RouterTestingModule` to the testing module,
or by adding a provider `{ provide: APP_BASE_HREF, useValue: '/' }`, but required to understand the issue.
This solves the issue in a transparent way: developers won't even encounter the problem anymore.

Closes angular#19116
alan-agius4 pushed a commit that referenced this issue Oct 19, 2020
@IxquitilisSaid @alan-agius4
fix(@angular-devkit/build-angular): add a base href to karma debug co…
f25c5d7 
…ntext

This commits adds a base href value in the karma context iframe used to run unit tests where a unit test throws:
No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
Even if the application is fine.
This is because the index.html from Angular CLI contains a base href value, but not the Karma context iframe.
So when adding a unit test with a testing module that imports a NgModule, for example AppModule,
which itself imports RouterModule, the unit test used to throw an error (regression appeared in router 3.1).
That could be solved by either adding `RouterTestingModule` to the testing module,
or by adding a provider `{ provide: APP_BASE_HREF, useValue: '/' }`, but required to understand the issue.
This solves the issue in a transparent way: developers won't even encounter the problem anymore.

Closes #19116

(cherry picked from commit ae94245)
alan-agius4 pushed a commit that referenced this issue Oct 19, 2020
@IxquitilisSaid @alan-agius4
fix(@angular-devkit/build-angular): add a base href to karma debug co…
8b1ed41 
…ntext

This commits adds a base href value in the karma context iframe used to run unit tests where a unit test throws:
No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
Even if the application is fine.
This is because the index.html from Angular CLI contains a base href value, but not the Karma context iframe.
So when adding a unit test with a testing module that imports a NgModule, for example AppModule,
which itself imports RouterModule, the unit test used to throw an error (regression appeared in router 3.1).
That could be solved by either adding `RouterTestingModule` to the testing module,
or by adding a provider `{ provide: APP_BASE_HREF, useValue: '/' }`, but required to understand the issue.
This solves the issue in a transparent way: developers won't even encounter the problem anymore.

Closes #19116

(cherry picked from commit ae94245)
@alan-agius4 alan-agius4 linked a pull request Oct 19, 2020 that will close this issue
fix(@angular-devkit/build-angular): add a base href to karma debug context #19119
Merged
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: @angular-devkit/build-angular devkit/build-angular:karma freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Projects
None yet
Milestone
Backlog
2 participants
@alan-agius4 @IxquitilisSaid