MatStepperModule in Ionic 5 Cannot GET

Viewed 1090

I am new to programming and my question might be very easy for you to answer.

I am using Visual Studio Code, Ionic 5, Angular 9

Now I want to add a Vertical Stepper to my project. So I first did npm install @angular/material

and then added MatStepperModule in app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {MatStepperModule} from '@angular/material/stepper';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, MatStepperModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and this is in my HTML file:

<form>
  <mat-vertical-stepper>

  <mat-step label="Step 1">
    Step 1 content
  </mat-step>

  <mat-step label="Step 2">
    Step 2 content
  </mat-step>

  <mat-step label="Step 3">
    You are now done.
  </mat-step>

</mat-vertical-stepper>
</form>

And in the routing.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CustomPage } from './custom.page';
import {MatStepperModule} from '@angular/material/stepper';

const routes: Routes = [
  {
    path: '',
    component: CustomPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes),MatStepperModule],
  exports: [RouterModule,MatStepperModule],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class CustomPageRoutingModule {}

So now there is no error message inside Visual Studio Code, but if I run ionic serve, I only get:

Cannot GET /

What am I missing? Why is this not working?

1 Answers

I got it! Had to npm install @angular/cdk as well as @angular/animations and then import BrowserAnimationsModule in app.module.ts Now it is working :) Sorry for bothering

Related