Angular импорт компонента перезаписывает загрузочный компонент?

Question

это мой первый вопрос здесь, поэтому, пожалуйста, прости меня за то, что я недостаточно хорошо описал мою проблему. Я просто в отчаянии, потому что понятия не имею, что здесь происходит ...

Я работаю в проекте angular и хочу повторно использовать компонент из другого модуля. Но в тот момент, когда я импортирую компонент, angular решает использовать его в качестве загрузочного компонента, поэтому, когда я перехожу на данную страницу, он просто показывает импортированный компонент, а не мою исходную страницу (в которую я хочу просто вставить импортированную компонент).

Аннотация : Модуль A: объявляет компоненты a и b и экспортирует только b

Модуль B: объявляет c и импортирует модуль A

-> При переходе к модулю B он показывает компонент Aa, даже не запуская компонент B. c -> намерение: я хочу использовать компонент Ab внутри компонента B. c и просто ссылаться на него с помощью селектора

Мой проект: компонент b (тот, который я хочу использовать повторно) называется "Welcome-Card"

Модуль A

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { LoginPage } from './login.page';
import { WelcomeCard } from "./welcome-card.component";

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LoginPage, WelcomeCard],
  exports: [WelcomeCard]
})
export class LoginPageModule {}

Модуль B

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { SettingsPage } from './settings.page';
import { LoginPageModule } from "../login/login.module";

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    LoginPageModule
  ],
  declarations: [SettingsPage],

})
export class SettingsPageModule {}

Модуль для маршрутизации

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  { 
    path: 'login', loadChildren: './login/login.module#LoginPageModule' 
  },
  { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' }

];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Модуль B> Компонент c> html

<ion-header>
  <ion-toolbar>
    <ion-title>Settings</ion-title>

    <ion-buttons slot="start">
      <ion-button (click)="back()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
  <ion-progress-bar *ngIf="loading" type="indeterminate"></ion-progress-bar>

</ion-header>

<ion-content>

  <welcome-card></welcome-card>
</ion-content>

Модуль B> Компонент c> ts * 1 045 *

import { Component, OnInit } from '@angular/core';
import {Location} from '@angular/common';
import { ApiService } from "../api.service";
import { CommonService } from "../common.service";

import * as firebase from 'firebase/app';
import 'firebase/auth';


@Component({
  selector: 'app-settings',
  templateUrl: './settings.page.html',
  styleUrls: ['./settings.page.scss'],
})
export class SettingsPage implements OnInit {

  constructor(
    private location: Location,
    private api: ApiService,
    private functions: CommonService,
  ) { 
    console.log("contructor")
  }

  loading = false;

  auth = firebase.auth();


  ngOnInit() {
  }



  back(){
    this.location.back();
  }


}

Мой проект (если вам нужны файлы, которые могут быть важны, не стесняйтесь)

app
├── api.service.spec.ts
├── api.service.ts
├── app-routing.module.ts
├── app.component.html
├── app.component.scss
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── calendar.service.spec.ts
├── calendar.service.ts
├── common.scss
├── common.service.spec.ts
├── common.service.ts
├── create-challenge
│   ├── create-challenge.module.ts
│   ├── create-challenge.page.html
│   ├── create-challenge.page.scss
│   ├── create-challenge.page.spec.ts
│   └── create-challenge.page.ts
├── current
│   ├── set-success-month
│   │   ├── set-success-month.component.html
│   │   ├── set-success-month.component.scss
│   │   ├── set-success-month.component.spec.ts
│   │   └── set-success-month.component.ts
│   ├── tab2.module.ts
│   ├── tab2.page.html
│   ├── tab2.page.scss
│   ├── tab2.page.spec.ts
│   └── tab2.page.ts
├── current-unset
│   ├── current-unset.module.ts
│   ├── current-unset.page.html
│   ├── current-unset.page.scss
│   ├── current-unset.page.spec.ts
│   └── current-unset.page.ts
├── login
│   ├── login.module.ts
│   ├── login.page.html
│   ├── login.page.scss
│   ├── login.page.spec.ts
│   ├── login.page.ts
│   ├── welcome-card.component.html
│   └── welcome-card.component.ts
├── next
│   ├── tab3.module.ts
│   ├── tab3.page.html
│   ├── tab3.page.scss
│   ├── tab3.page.spec.ts
│   └── tab3.page.ts
├── previous
│   ├── tab1.module.ts
│   ├── tab1.page.html
│   ├── tab1.page.scss
│   ├── tab1.page.spec.ts
│   └── tab1.page.ts
├── settings
│   ├── settings.module.ts
│   ├── settings.page.html
│   ├── settings.page.scss
│   ├── settings.page.spec.ts
│   └── settings.page.ts
├── tabs
│   ├── tabs-routing.module.ts
│   ├── tabs.module.ts
│   ├── tabs.page.html
│   ├── tabs.page.scss
│   ├── tabs.page.spec.ts
│   └── tabs.page.ts
└── types.ts