0

I am updating my Angular app from 9/10 to 13 and I've been following the official documentation here. I rewrote my old code accordingly to fit the new convention:

<mat-progress-spinner
    [color]="primary"
    [mode]="indeterminate">
  </mat-progress-spinner>

But apparently this does not compile... The error I get is:

error TS2339: Property 'indeterminate' does not exist on type 'ComponentNameHere'.

Yes, I've imported the Mat-Progress-Spinner already in module.ts

UPDATE

If I remove the brackets from color and mode I get the following error:

error NG8001: 'mat-progress-spinner' is not a known element:
1. If 'mat-progress-spinner' is an Angular component, then verify that it is part of this module.
2. If 'mat-progress-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

UPDATE 2

My module.ts looks like the following:

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
...
 imports: [
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule,
        FormsModule,
        MDBBootstrapModule.forRoot(),
        Ng2SearchPipeModule,
        NgMatSearchBarModule,
        BrowserAnimationsModule,
        MatInputModule,
        WavesModule,
        InputsModule,
        ButtonsModule,
        HttpClientModule,
        MatIconModule,
        MatTableModule,
        MatCheckboxModule,
        MatSortModule,
        MatTabsModule,
        MatSelectModule,
        MatCheckboxModule,
        MatInputModule,
        MatTreeModule,
        MatButtonModule,
        MatDialogModule,
        MatProgressBarModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatTooltipModule,
        MatRadioModule,
        MatDividerModule,
        ModalModule,
        MatPaginatorModule,
        // Mat-Slide-Toggle
        MatProgressSpinnerModule,
        ...
Munchkin
  • 857
  • 5
  • 24
  • 51
  • 1
    It's `mode="indeterminate"`, not `[mode]="indeterminate"`. – jabaa May 10 '22 at 13:13
  • @jabaa then it doesn't recognize the component at all... – Munchkin May 10 '22 at 13:17
  • What does _"I rewrote my old code accordingly to fit the new convention"_ mean? What was the old convention and what is the new convention? – jabaa May 10 '22 at 13:18
  • I can't reproduce your statements. The code from my first comments works: https://stackblitz.com/run?file=src%2Fapp%2Fprogress-spinner-overview-example.html – jabaa May 10 '22 at 13:23
  • I think I only added the brackets and that's about it. The StackBlitz link is invalid btw. – Munchkin May 10 '22 at 13:34
  • Why did you add the brackets? It's not a convention. It has nothing to do with new and old. The brackets have a function and a meaning and they had the same meaning 2017 in Angular 2. `mode="indeterminate"` is not `[mode]="indeterminate"`. A new link: https://stackblitz.com/edit/angular-2ibsiu?file=src/app/progress-spinner-overview-example.html – jabaa May 10 '22 at 13:36
  • This is not a real duplicate but it explains the difference: [Angular property binding](https://stackoverflow.com/questions/46368382/angular-property-binding), [What is the difference between parentheses, brackets and asterisks in Angular2?](https://stackoverflow.com/questions/35944749/what-is-the-difference-between-parentheses-brackets-and-asterisks-in-angular2) The second link is from 2016 and still valid. It's also explained in https://angular.io/guide/binding-syntax – jabaa May 10 '22 at 14:03
  • You're right, I don't need the brackets. How do I fix the error then? – Munchkin May 10 '22 at 14:06
  • What error? The error should be gone after you remove the brackets. You can see the code in my Stackblitz link. It works and there is no error. – jabaa May 10 '22 at 14:07
  • 1
    The error message means you didn't import the module. The code in your question is correct except the brackets. Currently, it's impossible to help you. – jabaa May 10 '22 at 14:16
  • @jabaa that what I understood too, but clearly I did import the module. You can check out my updated question to see that – Munchkin May 10 '22 at 14:23
  • A [mcve] in form of a Stackblitz would be helpful. Maybe you need to rebuild the dependencies. – jabaa May 10 '22 at 14:24
  • @jabaa I've made this https://stackblitz.com/edit/angular-ivy-vgd7sl but my predefined themes for @angular/material seem to throw `Error in src/styles.scss Missing "./fesm2015/material.mjs" export in "@angular/material" package` and I seem to fail to fix it. – Munchkin May 10 '22 at 14:43
  • Stack Overflow is a question and answer platform for specific programming questions. It doesn't work well with interactive debugging. There are other platforms with screen and file sharing and live chat. – jabaa May 10 '22 at 14:45
  • I commented out the content of `style.scss` and it works. This question already asks about Angular property-binding, Angular module imports and SCSS. That's not a specific programming question. – jabaa May 10 '22 at 14:46
  • Ok, I tried commenting `styles.scss` out but no loading animation appears to me. Weird. Also if it does work, the MRE is identical to the original code I'm having so this is super weird... – Munchkin May 10 '22 at 14:48
  • How could someone help you as long as you can't provide a [mcve]? There seems to be something weird going on on your system and the code is correct. – jabaa May 10 '22 at 14:55
  • I did provide a MRE here in the comments. Maybe I messed something up by forcing updates when updating with `ng` and `npm`? Any idea how to further debug this? – Munchkin May 10 '22 at 15:12
  • You have a working example. Download it and compare the working example with your actual code. Find the difference that causes the problem. – jabaa May 10 '22 at 15:37

1 Answers1

1

Figured it out, I needed to remove the [] brackets from the bindings and it seems that some removed packages (due to no longer being maintained for newer versions of Angular) caused the issue. Commented out their imports and the app seems to magically work.

I removed (by commenting out) the ng-docx, angular-bootstrap-md and ng-mat-search-bar packages.

Munchkin
  • 857
  • 5
  • 24
  • 51
  • This answer isn't really useful or at least I can't see how this could help future users solve their problem. – jabaa May 11 '22 at 09:56
  • @jabaa the solution is to remove package imports for packages that got removed when upgrading the Angular version, what's not clear about it and how come it's not useful? If I formulated it badly so that it's hard to comprehend, feel free to edit my answer. – Munchkin May 11 '22 at 10:52
  • You could list the packages, but this answer isn't useful, because the packages aren't listed in the question. That makes the useless, too, because it's not answerable. – jabaa May 11 '22 at 10:54
  • What are the chances that the people that stumbled upon this question have the very same packages?! Also it applies to EVERY package that is no longer maintained and not supported by newer versions of Angular making such information completely useless – Munchkin May 11 '22 at 10:55
  • IMO the question and answer are useless because the question doesn't contain enough details to be answerable. – jabaa May 11 '22 at 10:58
  • I named the packages anyways, but it's not like it matters. – Munchkin May 11 '22 at 10:58
  • 1
    @jabaa saying what exactly is lacking in the question would be more useful than just vaguely saying that it "doesn't contain enough details" – Munchkin May 11 '22 at 10:59
  • I only wanted to explain downvotes. There is probably not much you could do to improve it. You were not able to create a [mcve]. The problem is outdated packages, but the packages aren't listed in the question. The question title mentions the spinner. How is this answer related to the spinner or to property binding? – jabaa May 11 '22 at 11:00
  • Because the error, among others, contains the spinner. – Munchkin May 11 '22 at 11:44
  • This answer has nothing to do with the original question and the error message `error TS2339: Property 'indeterminate' does not exist on type 'ComponentNameHere'.` The original question was a duplicate and the problem was wrong property binding. Now, you're trying to recycle the question and that's also not recommended. The best thing is to rollback the updates or delete this question and ask a new one. This answer doesn't answer the question in the title and it doesn't solve the problem in the top of the description. – jabaa May 11 '22 at 11:46
  • 1
    Edited the answer, is this sufficient now? – Munchkin May 11 '22 at 14:53
  • The question contains 2 or even 3 unrelated problems. The first part is a 6 year old duplicate. Missing research effort is a downvote reason for questions. The problem(s) in the first and second update aren't reproducible. I don't see any worth in this answer. The first part is answered multiple times in a much better way. That's a downvote reason for answers. – jabaa May 11 '22 at 15:05