No provider for MdcLinearProgress

[rlanga]

To Reproduce Module import as follows:

import { MdcLinearProgressModule } from '@angular-mdc/web/linear-progress';

Component imported as follows:

import {MdcLinearProgress} from '@angular-mdc/web/linear-progress';

Constructor is as follows:

constructor(private titleService: TitleService, private progressBar: MdcLinearProgress, private dialog: MdcDialog)

Expected behavior

core.js:6228 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[MdcLinearProgress -> MdcLinearProgress -> MdcLinearProgress]: 
  NullInjectorError: No provider for MdcLinearProgress!
NullInjectorError: R3InjectorError(AppModule)[MdcLinearProgress -> MdcLinearProgress -> MdcLinearProgress]: 
  NullInjectorError: No provider for MdcLinearProgress!
    at NullInjector.get (core.js:1085)
    at R3Injector.get (core.js:16955)
    at R3Injector.get (core.js:16955)
    at R3Injector.get (core.js:16955)
    at NgModuleRef$1.get (core.js:36329)
    at Object.get (core.js:33972)
    at getOrCreateInjectable (core.js:5848)
    at ɵɵdirectiveInject (core.js:21103)
    at NodeInjectorFactory.SelectComponent_Factory [as factory] (ɵfac.js? [sm]:1)
    at getNodeInjectable (core.js:5993)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41632)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

What Angular MDC version are you using? 6.0.0-canary.9

What OS are you using?: Ubuntu 16.04

What browser(s) is this bug affecting?: All

Additional context This issue is similar to #2123 in that I'm running Angular 9 but the error for me is being thrown for MdcLinearProgress. I've upgraded to 6.0.0-canary.9 as recommended in that post but I'm still getting the error. It was mentioned that Ivy is enabled by default and even when I added enableIvy: true to my tsconfig.json, nothing changes. I tried importing MdcLinearProgress in an empty stackblitz template and it gave me the same error in the Console.

[guilhermetod]

Any specific reason you're injecting it on the constructor? How's your HTML file?

[rlanga]

I used to be able to do one-way binding on an [open] property to vary when the progress bar opens like so:

<mdc-linear-progress [open]="showProgressBar"></mdc-linear-progress>

But I got errors in more recent versions of the mdc library about that not being possible. All I saw in the most recent linear progress bar documentation was two methods in the API: open() and close() but no example on how to use them. So I thought injecting into the constructor and initialising MdcLinearProgress with a reference to the html is how one calls these methods.

Is there another way to call those methods to change the open and close state?

[guilhermetod]

I think the problem is that the bar is open by default and we usually don't want that.

I use the progress bar but I'm really a bit confused on how we should do it as there's really no real-case example in the documentation. Right now, I'm doing pretty much what you were trying to do, but instead of an [open] I just use an *ngIf, like so:

<mdc-linear-progress *ngIf="showProgressBar"></mdc-linear-progress>

If you want to use the API, you can try somethin like this:

HTML:

<mdc-linear-progress #progressbar></mdc-linear-progress>

TS:

import { Component, OnInit, ViewChild } from '@angular/core';
import {MdcLinearProgress} from '@angular-mdc/web/linear-progress';

@Component({
  selector: 'app-progress-bar',
  templateUrl: './progress-bar.component.html',
  styleUrls: ['./prograss-bar.component.scss'],
})
export class ProgressBarComponent implements OnInit {
  @ViewChild('progressBar') progressBar: MdcLinearProgress;
  ...

  constructor() { } // No need to inject it here

  ngOnInit() {
    this.progressBar.close();

   /* Example: Use it with a fetchservice
    this.dataFetchService.getFetchStatus()
    .subscribe((status) => {
      status === 'fetching' ? this.progressBar.open() : this.progressBar.close()
    }) */

  }

}

@trimox I think we need a way to set the default state of the progress bar. Is there any current way for doing this? If not, may we get one?

[rlanga]

Awesome! I can now access the linearProgress element. For some reason my styles aren't working at all so it's not visible but when I log the object to the console it shows up. I'm just having one issue after another.... Thank you for the code snippet above though!

[guilhermetod]

You're welcome. About your styles, try setting this in your angular.json:

{
  ...
 "projects": {
    "your-project-name": {
      ...
      "architect": {
        ...
            "styles": ["src/styles.scss"], // May change the path, but it's your root stylestheet
            "stylePreprocessorOptions": {
              "includePaths": ["node_modules/"]
            },
            ...
          }
      ...
    }
}

If that doesn't work, go the the "root stylesheet" (e.g "src/styles.scss") and add the following (be careful with global styles):

@use './app/components/progress-bar.component.scss';

[rlanga]

Thanks for the tip! I realised I had to do the @use style imports for each component I use. I've done global imports for some of them and it's working. Cheers for all the help @guilhermetod

Also @trimox maybe it might be worth adding a pointer in the documentation for the components to use ViewChild() referencing if people want to access the component methods? Idk, it might be an obvious thing to do... But I had also noticed that someone had a similar error #2123 . Please and thank you! :)