fix(progress-bar): not taking current path after first initialization (#13628)

Author: crisbeto

src/lib/progress-bar/progress-bar.spec.ts

@@ -8,16 +8,18 @@ import {MatProgressBar} from './progress-bar';
 
 
 describe('MatProgressBar', () => {
-  let fakePath = '/fake-path';
+  let fakePath: string;
 
   function createComponent<T>(componentType: Type<T>,
                               imports?: Array<Type<{}>>): ComponentFixture<T> {
+    fakePath = '/fake-path';
+
     TestBed.configureTestingModule({
       imports: imports || [MatProgressBarModule],
       declarations: [componentType],
       providers: [{
         provide: MAT_PROGRESS_BAR_LOCATION,
-        useValue: {pathname: fakePath}
+        useValue: {getPathname: () => fakePath}
       }]
     }).compileComponents();
 
@@ -122,6 +124,23 @@ describe('MatProgressBar', () => {
         const svg = fixture.debugElement.query(By.css('svg')).nativeElement;
         expect(svg.getAttribute('focusable')).toBe('false');
       });
+
+      it('should use latest path when prefixing the SVG references', () => {
+        let fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
+
+        let rect = fixture.debugElement.query(By.css('rect')).nativeElement;
+        expect(rect.getAttribute('fill')).toMatch(/^url\(['"]?\/fake-path#.*['"]?\)$/);
+
+        fixture.destroy();
+        fakePath = '/another-fake-path';
+
+        fixture = TestBed.createComponent(BasicProgressBar);
+        fixture.detectChanges();
+        rect = fixture.debugElement.query(By.css('rect')).nativeElement;
+
+        expect(rect.getAttribute('fill')).toMatch(/^url\(['"]?\/another-fake-path#.*['"]?\)$/);
+      });
     });
 
     describe('animation trigger on determinate setting', () => {

src/lib/progress-bar/progress-bar.ts

@@ -60,14 +60,18 @@ export const MAT_PROGRESS_BAR_LOCATION = new InjectionToken<MatProgressBarLocati
  * @docs-private
  */
 export interface MatProgressBarLocation {
-  pathname: string;
+  getPathname: () => string;
 }
 
 /** @docs-private */
 export function MAT_PROGRESS_BAR_LOCATION_FACTORY(): MatProgressBarLocation {
   const _document = inject(DOCUMENT);
-  const pathname = (_document && _document.location && _document.location.pathname) || '';
-  return {pathname};
+
+  return {
+    // Note that this needs to be a function, because Angular will only instantiate
+    // this provider once, but we want the current location on each call.
+    getPathname: () => (_document && _document.location && _document.location.pathname) || ''
+  };
 }
 
 
@@ -114,7 +118,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
     // we can't tell the difference between whether
     // the consumer is using the hash location strategy or not, because `Location` normalizes
     // both `/#/foo/bar` and `/foo/bar` to the same thing.
-    const path = location && location.pathname ? location.pathname.split('#')[0] : '';
+    const path = location ? location.getPathname().split('#')[0] : '';
     this._rectangleFillValue = `url('${path}#${this.progressbarId}')`;
     this._isNoopAnimation = _animationMode === 'NoopAnimations';
   }