Ioni c html компонента не отображается

Question

Я разработал одно приложение angular ("@ angular / core": "~ 9.0.2"), а затем клиент только что спросил, может ли оно быть доступно и для мобильного приложения, поэтому я создал новое приложение ionic5. Установил все необходимые пакеты в нем и все ошибки пакета исчезли.

Все модули загружены с отложенной загрузкой.

app.routing.ts

const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  {
    path: 'pages',
    canActivate: [AuthGuard],
    // canActivateChild: [AuthGuard],
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
  },
  {
    path: 'auth',
    canActivateChild: [AuthGuard],
    loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthModule)
  },
  { path: '**', redirectTo: 'auth' },
];

Auth-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'register',
    component: RegisterComponent,
  },
  {
    path: '',
    redirectTo: 'login'
  },
];

Login.component.ts

import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';
import { Router } from '@angular/router';
import { SocialUser } from 'angularx-social-login';
import { CommanService } from 'src/app/core/services/comman.service';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, OnDestroy {
  public loginForm: FormGroup;
  showFilters = false;

  user: SocialUser;
  loggedIn: boolean;
  authErrorMsg: any;
  submitted: boolean;
  authError: any;

  constructor(
    private renderer: Renderer2,
    private commerservice: CommanService,
    private router: Router
  ) {
    console.log('hi');

  }

  ngOnInit() {
    console.log('hellp');

    // this.renderer.addClass(document.body, 'login-page');
    this.loginForm = new FormGroup({
      email: new FormControl(null, Validators.required),
      password: new FormControl(null, Validators.required)
    });
  }

  logIn() {
    this.submitted = true;
    if (this.loginForm.valid) {
      // this.appService.login();
      localStorage.setItem('token', 'tokenset');
      this.router.navigate(['pages']);
    } else {
      // this.toastr.error('Hello world!', 'Toastr fun!');
    }
  }

  get email(): AbstractControl {
    return this.loginForm.get('email');
  }
  get f() {
    return this.loginForm.controls;
  }
  toggleFilters() {
    this.showFilters = !this.showFilters;
    console.log(this.showFilters);

  }

  ngOnDestroy() {
    this.renderer.removeClass(document.body, 'login-page');
  }
}

Constructor log и ngOnInit log вызывается в консоли, но отображается только белый экран без ошибок.

Требуется помощь.

Answer 1

Я заменил файл app.module.ts файла проекта angular, поэтому приложение, как предполагается, не зарегистрировано как строка ioni c.

 IonicModule.forRoot(),

и отсутствует

в приложении .component.ts

заменить

template: '<router-outlet></router-outlet>'

на

template : '<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>'

Answer 2

URL вашего шаблона кажется неправильным, вы должны сделать это следующим образом, templateUrl: 'login.component. html'

    import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
    import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';
    import { Router } from '@angular/router';
    import { SocialUser } from 'angularx-social-login';
    import { CommanService } from 'src/app/core/services/comman.service';
    @Component({
      selector: 'app-login',
      templateUrl: 'login.component.html',
      styleUrls: ['./login.component.scss']
    })
    export class LoginComponent implements OnInit, OnDestroy {
      public loginForm: FormGroup;
      showFilters = false;

      user: SocialUser;
      loggedIn: boolean;
      authErrorMsg: any;
      submitted: boolean;
      authError: any;

      constructor(
        private renderer: Renderer2,
        private commerservice: CommanService,
        private router: Router
      ) {
        console.log('hi');

      }

      ngOnInit() {
        console.log('hellp');

        // this.renderer.addClass(document.body, 'login-page');
        this.loginForm = new FormGroup({
          email: new FormControl(null, Validators.required),
          password: new FormControl(null, Validators.required)
        });
      }

      logIn() {
        this.submitted = true;
        if (this.loginForm.valid) {
          // this.appService.login();
          localStorage.setItem('token', 'tokenset');
          this.router.navigate(['pages']);
        } else {
          // this.toastr.error('Hello world!', 'Toastr fun!');
        }
      }

      get email(): AbstractControl {
        return this.loginForm.get('email');
      }
      get f() {
        return this.loginForm.controls;
      }
      toggleFilters() {
        this.showFilters = !this.showFilters;
        console.log(this.showFilters);

      }

          ngOnDestroy() {
            this.renderer.removeClass(document.body, 'login-page');
          }
        }