App Start is very slow

[zornic84]

Hi Guys,

i've create an angular 5 app with Style Serenity under Visual Studio 2017(.Net Framework 4.7.1, ASP MVC and WebAPI) and now by starting the app is very slow. On fast PC with Intel Core i7 needed the app to start 12-14 seconds. Have anybody an idea by the start is so slow? I hope anyonw have an tipp or an idea.

I call this Method "enableProdMode();" in main.ts

systemjs: `function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder 'app': 'ClientApp/app',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
        '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
        '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
        'primeng': 'npm:primeng',
        'jquery': 'npm:jquery/dist/jquery.js',
        'fullcalendar': 'npm:fullcalendar/dist/fullcalendar.min.js',
        'moment': 'npm:moment/moment.js',
        'tslib': 'npm:tslib/tslib.js',
        'quill': 'npm:quill/dist/quill.js',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        //app: {
        //    defaultExtension: 'js',
        //    meta: {
        //        './main.js': {
        //            loader: 'ClientApp/systemjs-angular-loader.js'
        //        }
        //    }
        //},
        rxjs: {
            defaultExtension: 'js'
        },
        primeng: {
            defaultExtension: 'js'
        },
        quill: {
            defaultExtension: 'js'
        }
    }
});

})(this);`

app.module.ts

`import { NgModule, enableProdMode } from '@angular/core'; //enableProdMode(); import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { registerLocaleData } from '@angular/common'; import { RouterModule, Routes } from '@angular/router'; import { HttpModule } from '@angular/http'; import { HttpClientModule } from '@angular/common/http'; import 'rxjs/add/operator/toPromise'; import 'rxjs/add/operator/switchMap';

//### Routing zu anderen Forms ### import { AppRoutingModule } from './app.routing.module';

//### Controls ### import { AccordionModule } from 'primeng/accordion'; //import { AutoCompleteModule } from 'primeng/primeng'; import { BreadcrumbModule } from 'primeng/primeng'; import { ButtonModule } from 'primeng/primeng'; import { CalendarModule } from 'primeng/primeng'; //import { CarouselModule } from 'primeng/primeng'; import { ChartModule } from 'primeng/primeng'; import { CheckboxModule } from 'primeng/primeng'; import { ChipsModule } from 'primeng/primeng'; //import { CodeHighlighterModule } from 'primeng/primeng'; import { ConfirmDialogModule } from 'primeng/confirmdialog'; import { ColorPickerModule } from 'primeng/primeng'; //import { SharedModule } from 'primeng/primeng'; import { ContextMenuModule } from 'primeng/contextmenu'; //import { DataGridModule } from 'primeng/primeng'; import { DataListModule } from 'primeng/primeng'; //import { DataScrollerModule } from 'primeng/primeng'; import { DataTableModule } from 'primeng/primeng'; import { DialogModule } from 'primeng/primeng'; //import { DragDropModule } from 'primeng/primeng'; import { DropdownModule } from 'primeng/primeng'; import { EditorModule } from 'primeng/primeng'; import { FieldsetModule } from 'primeng/primeng'; import { FileUploadModule } from 'primeng/primeng'; //import { GalleriaModule } from 'primeng/primeng'; //import { GMapModule } from 'primeng/primeng'; import { GrowlModule } from 'primeng/primeng'; //import { InputMaskModule } from 'primeng/primeng'; //import { InputSwitchModule } from 'primeng/primeng'; //import { InputTextModule } from 'primeng/primeng'; import { InputTextareaModule } from 'primeng/inputtextarea'; //import { LightboxModule } from 'primeng/primeng'; //import { ListboxModule } from 'primeng/primeng'; //import { MegaMenuModule } from 'primeng/primeng'; import { MenuModule } from 'primeng/primeng'; import { MenubarModule } from 'primeng/primeng'; import { MessagesModule } from 'primeng/primeng'; //import { MultiSelectModule } from 'primeng/primeng'; //import { OrderListModule } from 'primeng/primeng'; //import { OrganizationChartModule } from 'primeng/primeng'; import { OverlayPanelModule } from 'primeng/primeng'; import { PaginatorModule } from 'primeng/primeng'; import { PanelModule } from 'primeng/primeng'; import { PanelMenuModule } from 'primeng/primeng'; import { PasswordModule } from 'primeng/primeng'; //import { PickListModule } from 'primeng/primeng'; //import { ProgressBarModule } from 'primeng/primeng'; //import { RadioButtonModule } from 'primeng/primeng'; import { RatingModule } from 'primeng/rating'; import { ScheduleModule } from 'primeng/primeng'; import { SelectButtonModule } from 'primeng/primeng'; //import { SlideMenuModule } from 'primeng/primeng'; import { SliderModule } from 'primeng/slider'; import { SpinnerModule } from 'primeng/primeng'; import { SplitButtonModule } from 'primeng/splitbutton'; import { StepsModule } from 'primeng/primeng'; import { TabMenuModule } from 'primeng/primeng'; import { TabViewModule } from 'primeng/primeng'; //import { TerminalModule } from 'primeng/primeng'; //import { TieredMenuModule } from 'primeng/primeng'; //import { ToggleButtonModule } from 'primeng/primeng'; import { ToolbarModule } from 'primeng/primeng'; import { TooltipModule } from 'primeng/primeng'; //import { TreeModule } from 'primeng/primeng'; import { TreeTableModule } from 'primeng/primeng'; //import { BlockUIModule } from 'primeng/primeng'; import { TableModule } from 'primeng/table';

import as jQuery from 'jquery'; (window as any).jQuery = (window as any).$ = jQuery; enableProdMode(); //import as nanoScroller from 'nanoscroller';

//### Eigene Froms/Controls ### import { AppComponent } from './Views/Home/app.component'; import { AppTopBarComponent } from './Views/Home/app.topbar.component'; import { AppBreadcrumbComponent } from './Views/Home/app.breadcrumb.component'; import { AppMenuComponent, AppSubMenuComponent } from './Views/Home/app.Menu.component'; import { AppFooterComponent } from './Views/Home/app.footer.component';

import { MyAccountComponent } from './Views/Account/MyAccount.component'; import { MyDocumentsComponent } from './Views/Account/MyDocuments.component'; import { MyToDosComponent } from './Views/Account/MyToDos.component'; import { MyToDoComponent } from './Views/Account/MyToDo.component'; import { MyCalendarComponent } from './Views/Account/MyCalendar.component'; import { SharedDocumentsComponent } from './Views/Account/SharedDocuments.component';

import { SelectionListComponent } from './Views/MasterData/Common/SelectionList.component';

import { BusinessPartnerComponent } from './Views/MasterData/BusinessPartner.component'; import { EmployeeComponent } from './Views/MasterData/Employee.component'; import { PhoneListItemComponent } from './Views/MasterData/PhoneListItem.component'; import { OperationCalendarComponent } from './Views/MasterData/OperationCalendar.component'; import { ComputerComponent } from './Views/MasterData/Common/Computer.component'; import { DepartmentComponent } from './Views/MasterData/Common/Department.component';

import { CategoryComponent } from './Views/MasterData/Common/Category.component'; import { PriorityComponent } from './Views/MasterData/Common/Priority.component'; import { StatusComponent } from './Views/MasterData/Common/Status.component'; import { CalendarComponent } from './Views/MasterData/Common/Calendar.component'; import { TeamComponent } from './Views/MasterData/Common/Team.component';

import { IdentityCardComponent } from './Views/MasterData/VisitPlanning/IdentityCard.component'; import { TrainingTypeComponent } from './Views/MasterData/VisitPlanning/TrainingType.component'; import { VisitorTypeComponent } from './Views/MasterData/VisitPlanning/VisitorType.component'; import { VisitCalendarsComponent } from './Views/VisitPlanning/Calendards.component';

import { TransportTypeComponent } from './Views/MasterData/LoadingScheduling/TransportType.component'; import { LoadingStateComponent } from './Views/MasterData/LoadingScheduling/LoadingState.component';

import { TriggerComponent } from './Views/MasterData/TaskScheduler/Trigger.component'; import { ActionComponent } from './Views/MasterData/TaskScheduler/Action.component'; import { JobComponent } from './Views/MasterData/TaskScheduler/Job.component';

import { PPActionComponent } from './Views/MasterData/ProjectPlanning/Action.component'; import { ProjectComponent } from './Views/MasterData/ProjectPlanning/Project.component';

import { VisitComponent } from './Views/VisitPlanning/Visit.component'; import { VisitCalendarComponent } from './Views/VisitPlanning/Calendar.component';

import { LoadingComponent } from './Views/LoadingScheduling/Loading.component'; import { LoadingCalendarComponent } from './Views/LoadingScheduling/Calendar.component';

import { DashboardTasksComponent } from './Views/ProjectPlanning/Tasks.component'; import { TaskComponent } from './Views/ProjectPlanning/Task.component'; import { ProjectDashboardComponent } from './Views/ProjectPlanning/ProjectDashboard.component'; import { ProjectCalendarComponent } from './Views/ProjectPlanning/ProjectCalendar.component'; import { ProjectTasksComponent } from './Views/ProjectPlanning/ProjectTasks.component'; import { ProjectListComponent } from './Views/ProjectPlanning/ProjectList.component';

import { DashboardComponent } from './Views/Home/Dashboard.component'; import { DashboardVisitplanningComponent } from './Views/Home/DashboardVisitplanning.component'; import { DashboardUsherComponent } from './Views/Home/DashboardUsher.component'; import { DashboardHospitalityComponent } from './Views/Home/DashboardHospitality.component'; import { DashboardLoadingComponent } from './Views/Home/DashboardLoadings.component';

import { DashboardTicketsystemComponent } from './Views/Ticketsystem/Dashboard.component'; import { TicketComponent } from './Views/Ticketsystem/Ticket.component';

import { ReportVisitsNextWeekComponent } from './Views/Reports/VisitPlanning/VisitsNextWeek.component'; import { CurrentlyPresentComponent } from './Views/Reports/VisitPlanning/CurrentlyPresent.component'; import { AllVisitsComponent } from './Views/Reports/VisitPlanning/AllVisits.component';

import { GeneralSettingsComponent } from './Views/Settings/GeneralSettings.component'; import { ServiceSettingsComponent } from './Views/Settings/ServiceSettings.component'; import { VisitPlanningSettingsComponent } from './Views/Settings/VisitPlanning/VisitPlanningSettings.component'; import { LoadingSchedulingSettingsComponent } from './Views/Settings/LoadingScheduling/LoadingSchedulingSettings'; import { TaskSchedulerSettingsComponent } from './Views/Settings/TaskScheduler/TaskSchedulerSettings.component'; import { ProjectPlanningSettingsComponent } from './Views/Settings/ProjectPlanning/ProjectPlanningSettings.component'; import { TicketsystemSettingsComponent } from './Views/Settings/Ticketsystem/TicketsystemSettings.component'; import { EmailSettingsComponent } from './Views/Settings/EmailSettings.component'; import { CustomMessagesComponent } from './Views/Settings/CustomMessages.component'; import { ChangelogComponent } from './Views/Settings/Changelog.component'; import { InfosComponent } from './Views/Settings/Info.component';

//### Services ### import { BreadcrumbService } from './Services/Home/breadcrumb.service';

@NgModule({ imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, HttpModule, HttpClientModule, AppRoutingModule,

    AccordionModule,
    //AutoCompleteModule,
    BreadcrumbModule,
    ButtonModule,
    CalendarModule,
    //CarouselModule,
    ChartModule,
    CheckboxModule,
    ChipsModule,
    //CodeHighlighterModule,
    ConfirmDialogModule,
    ColorPickerModule,
    //SharedModule,
    ContextMenuModule,
    //DataGridModule,
    DataListModule,
    //DataScrollerModule,
    DataTableModule,
    DialogModule,
    //DragDropModule,
    DropdownModule,
    EditorModule,
    FieldsetModule,
    FileUploadModule,
    //GalleriaModule,
    //GMapModule,
    GrowlModule,
    //InputMaskModule,
    //InputSwitchModule,
    //InputTextModule,
    InputTextareaModule,
    //LightboxModule,
    //ListboxModule,
    //MegaMenuModule,
    MenuModule,
    MenubarModule,
    MessagesModule,
    //MultiSelectModule,
    //OrderListModule,
    //OrganizationChartModule,
    OverlayPanelModule,
    PaginatorModule,
    PanelModule,
    PanelMenuModule,
    PasswordModule,
    //PickListModule,
    //ProgressBarModule,
    //RadioButtonModule,
    RatingModule,
    ScheduleModule,
    SelectButtonModule,
    //SlideMenuModule,
    SliderModule,
    SpinnerModule,
    SplitButtonModule,
    StepsModule,
    TabMenuModule,
    TabViewModule,
    //TerminalModule,
    //TieredMenuModule,
    //ToggleButtonModule,
    ToolbarModule,
    TooltipModule,
    //TreeModule,
    TreeTableModule,
    //BlockUIModule,
    TableModule,
],
declarations: [
    AppComponent,
    AppTopBarComponent,
    AppBreadcrumbComponent,
    AppMenuComponent,
    AppSubMenuComponent,
    AppFooterComponent,

    MyAccountComponent,
    MyDocumentsComponent,
    MyToDosComponent,
    MyToDoComponent,
    MyCalendarComponent,
    SharedDocumentsComponent,

    SelectionListComponent,

    BusinessPartnerComponent,
    EmployeeComponent,
    PhoneListItemComponent,
    OperationCalendarComponent,
    ComputerComponent,
    DepartmentComponent,

    CategoryComponent,
    PriorityComponent,
    StatusComponent,
    CalendarComponent,
    TeamComponent,

    IdentityCardComponent,
    ProjectComponent,
    TrainingTypeComponent,
    VisitorTypeComponent,
    VisitCalendarsComponent,

    TransportTypeComponent,
    LoadingStateComponent,

    TriggerComponent,
    ActionComponent,
    JobComponent,

    PPActionComponent,

    VisitComponent,
    VisitCalendarComponent,

    LoadingComponent,
    LoadingCalendarComponent,

    DashboardTasksComponent,
    TaskComponent,
    ProjectDashboardComponent,
    ProjectCalendarComponent,
    ProjectTasksComponent,
    ProjectListComponent,

    DashboardComponent,
    DashboardVisitplanningComponent,
    DashboardUsherComponent,
    DashboardHospitalityComponent,
    DashboardLoadingComponent,

    DashboardTicketsystemComponent,
    TicketComponent,

    ReportVisitsNextWeekComponent,
    CurrentlyPresentComponent,
    AllVisitsComponent,

    GeneralSettingsComponent,
    ServiceSettingsComponent,
    VisitPlanningSettingsComponent,
    LoadingSchedulingSettingsComponent,
    TaskSchedulerSettingsComponent,
    ProjectPlanningSettingsComponent,
    TicketsystemSettingsComponent,
    EmailSettingsComponent,
    CustomMessagesComponent,
    ChangelogComponent,
    InfosComponent,
],
providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    BreadcrumbService,
],
bootstrap: [
    AppComponent,
]

}) export class AppModule {

constructor() {
}

} `

[cagataycivici]

Please use forum for support requests, I think you need to use lazy loading as you load a lot of components on load. Lazy loading will fix it.