ionic 4 - кажется, приложение-компонент загружается дважды - PullRequest
0 голосов
/ 09 июля 2019

кажется, что приложение-компонент загружается дважды.Я вижу это в DOM, а также при печати на консоль console.log("insode constructor of app.component.ts");

Есть идеи, что может сделать это?

app.module.ts constain bootstrap: [AppComponent]

в index.html у меня есть только <app-root></app-root> enter image description here

app.module:

import { NgModule, APP_INITIALIZER } from '@angular/core';

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

import { HttpClient, HttpClientModule } from '@angular/common/http';


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

import { AppInitializer } from './initializers/app.initializer';


import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { SharedModule } from './shared.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { EmailComposer } from '@ionic-native/email-composer/ngx';


import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/database';

import { appConfig } from '../environments/appConfig';
import { AdMobFree } from '@ionic-native/admob-free/ngx'; 
import { OneSignal } from '@ionic-native/onesignal/ngx';

import { OldUsersMigrateService } from './services/old-users-migrate/old-users-migrate.service';

import { NotificationsListPopoverComponent } from './component/global-notifications-display/notifications-list-popover/notifications-list-popover.component';
import { NotificationPopoverComponent} from './component/global-notifications-display/notification-popover/notification-popover.component';
import { AppRate } from '@ionic-native/app-rate/ngx';

import { Camera } from '@ionic-native/camera/ngx';
import { SafeHtmlPipe } from './pipes/safe-html/safe-html';

import { GlobalScoresDisplayComponent } from './component/global-scores-display/global-scores-display.component';
import { GlobalNotificationsDisplayComponent } from './component/global-notifications-display/global-notifications-display.component';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export function initApp(appInitializer: AppInitializer) {
    return () => appInitializer.initialize();
}

@NgModule({
  declarations: [ NotificationsListPopoverComponent, NotificationPopoverComponent, AppComponent, GlobalScoresDisplayComponent, GlobalNotificationsDisplayComponent],
  entryComponents: [NotificationsListPopoverComponent, NotificationPopoverComponent],
  imports: [BrowserModule, 
    HttpClientModule,
    SharedModule,
    AngularFireModule.initializeApp(appConfig.firebase.firebaseApps.globalLangbrain),
    AngularFireDatabaseModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(), 
    AppRoutingModule],
  providers: [
    Camera,
    AppRate,
    SafeHtmlPipe,
    AdMobFree,
    OneSignal,
    OldUsersMigrateService,
    EmailComposer,
    SharedModule,
    StatusBar,
    AngularFireDatabase,
    {
            provide: APP_INITIALIZER,
            useFactory: initApp,
      deps: [AppInitializer],
            multi: true
    },
    AppInitializer,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component:

import { Component } from '@angular/core';

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

import { Router } from '@angular/router';


import { I18nService } from './services/i18n/i18n.service';
import { Renderer2 } from '@angular/core';

import { AppConfigService } from './services/app-config/app-config.service';
import { CurrentUserService } from "./services/current-user/current-user.service";
import { OneSignalService } from "./services/onesignal/onesignal.service";
import { AdsService } from './services/ads/ads.service';
import { PresenceService } from './services/presence/presence.service';

import { LocalStorageService } from './services/local-storage/local-storage.service';
import { OldUsersMigrateService } from './services/old-users-migrate/old-users-migrate.service';

import { ChatService } from "./services/chat/chat.service";
import { AppRate } from '@ionic-native/app-rate/ngx';


import * as M from './app.models';
import * as E from './app.enums';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  menuItems: M.MenuItem[];
  appName: string;
  private config: M.AppConfig;
  currentUserPublicInfo: M.UserData;

  unseenMessagesUsers: number;
  pageTypes = E.PageType;

  constructor(
    private router: Router,
    private localStorageService: LocalStorageService,
    private oldUsersMigrateService: OldUsersMigrateService,
    private i18nService: I18nService,
    private oneSignalService: OneSignalService,
    private platform: Platform,
    private splashScreen: SplashScreen,
    private appRate: AppRate,
    private statusBar: StatusBar,
    private adsService: AdsService,
    private presenceService: PresenceService,
    private render: Renderer2,
    private currentUserService: CurrentUserService,
    private appConfigService: AppConfigService,
    private chatService: ChatService,

  ) {
    console.log("insode constructor of app.component.ts");
    this.initializeApp();
    this.setAppLanguageCssClasses();

    this.config = this.appConfigService.getAppConfig();
    this.appName = this.config.appName;
    this.initMenu();
    this.initUserMenuData();
    this.presenceService.init();
    this.initPersonalMessages();
  }




  initializeApp() {
    this.oldUsersMigrateService.handleBackup();

    this.localStorageService.initUserGuid();
    this.localStorageService.initUserData();


    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.initOneSignal();

      this.adsService.initBannerAd();
      this.adsService.initInterstitial();

    });
  }
}

app-routing.module:

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

import { AppComponent } from './app.component';
import { ChatPageModule } from './pages/chat/chat.module';
import  { ChampionsPageModule } from './pages/champions/champions.module';
import { ProfilePageModule } from './pages/profile/profile.module'



const routes: Routes = [
  {
    path: '',
    redirectTo: '/vocabulary/main',
    pathMatch: 'full'
  },
  {
    path: '',
    component: AppComponent,
    children: [


     {
        path: 'vocabulary',
        loadChildren: './pages/vocabulary/vocabulary-root/vocabulary-root.module#VocabularyPageModule'
      },
      {
        path: 'grammar',
        loadChildren: './pages/grammar/grammar-root/grammar-root.module#GrammarPageModule'
      },
      {
        path: 'letters',
        loadChildren: './pages/letters/letters-root/letters-root.module#LettersPageModule'
      },
      {
        path: 'contactUs',
        loadChildren: './pages/contact-us/contact-us.module#ContactUsPageModule'
      },
      {
        path: 'settings',
        loadChildren: './pages/settings/settings.module#SettingsPageModule'
      },
      {
        path: 'tips',
        loadChildren: './pages/tips/tips.module#TipsPageModule'
      },
      {
        path: 'home',
        loadChildren: './pages/home/home.module#HomePageModule'
      },
      {
        path: 'champions',
        loadChildren: () =>ChampionsPageModule
      },
      {
        path: 'word/:wordId',
        loadChildren: './pages/word/word.module#WordPageModule'
      },
      {
        path: 'user/:partnerGuid',
        loadChildren: './pages/user/user.module#UserPageModule'
      },
      {
        path: 'friends',
        loadChildren: './pages/users/users.module#UsersPageModule'
      },
      {
        path: 'chat/:type',
        loadChildren: () => ChatPageModule
      },
      {
        path: 'profile',
        loadChildren: () => ProfilePageModule
      },
    ]
  }
];



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

1 Ответ

1 голос
/ 09 июля 2019

Вам не нужно иметь маршрут для AppComponent.

Компонент приложения - это ваш корневой компонент, он не должен быть в маршруте.

Ваши маршруты должны быть примерно такими:

const routes: Routes = [
  {
    path: '',
    redirectTo: '/vocabulary/main',
    pathMatch: 'full'
  },
  {
    path: 'vocabulary',
    loadChildren: './pages/vocabulary/vocabulary-root/vocabulary-root.module#VocabularyPageModule'
  },
  {
    path: 'grammar',
    loadChildren: './pages/grammar/grammar-root/grammar-root.module#GrammarPageModule'
  },
  {
    path: 'letters',
    loadChildren: './pages/letters/letters-root/letters-root.module#LettersPageModule'
  },
  {
    path: 'contactUs',
    loadChildren: './pages/contact-us/contact-us.module#ContactUsPageModule'
  },
  {
    path: 'settings',
    loadChildren: './pages/settings/settings.module#SettingsPageModule'
  },
  {
    path: 'tips',
    loadChildren: './pages/tips/tips.module#TipsPageModule'
  },
  {
    path: 'home',
    loadChildren: './pages/home/home.module#HomePageModule'
  },
  {
    path: 'champions',
    loadChildren: () =>ChampionsPageModule
  },
  {
    path: 'word/:wordId',
    loadChildren: './pages/word/word.module#WordPageModule'
  },
  {
    path: 'user/:partnerGuid',
    loadChildren: './pages/user/user.module#UserPageModule'
  },
  {
    path: 'friends',
    loadChildren: './pages/users/users.module#UsersPageModule'
  },
  {
    path: 'chat/:type',
    loadChildren: () => ChatPageModule
  },
  {
    path: 'profile',
    loadChildren: () => ProfilePageModule
  }
];
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...