GeezerVison is showing github.com — feat(aio): lazy-load embedded components by gkalpak · Pull Request #18428 · angular/angular
Conversation
gkalpak
commented
Jul 31, 2017
•
edited
Loading
Uh oh!
There was an error while loading. Please reload this page.
This is a first rough version (but functional nonetheless 😃).
Shout-out to @filipesilva for useful pointers and insights.
TODO:
- Bring the size down.
- Add/update tests.
- Do not hide the progress bar while embedded components are being prepared (loaded, compiled, etc).
- Do not swap contents until embedded components are ready to avoid FOUC (Flash Of Uncompiled Components).
- Animate leaving/entering views.
Fixes #15629 and #16127.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
ruimserrano and eli007s reacted with thumbs up emoji
|
So there's good news and bad news.
👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.
😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that they're okay with their commits being contributed to this project. Please have them confirm that here in the pull request.
Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
Hi!
I'm really sorry to creep on your PR but I'm really interested in your embedded component lazy load approach.
I'm working on a library: https://github.com/josephliccini/ngx-lazy-view
I like your approach, especially with the list of components, where mine right now is just one entry per module.
Maybe we can work to build something standard for this pattern since I've seen this request often for this functionality.
Is the mechanism you are using (similar to mine) going to be compatible with future versions of angular and the cli? We need to be able to lazy load components using this kind of pattern but don't want to resort to anything too nonstandard that could break between angular or cli releases..
Maybe we can move this over to an issue if this is the wrong forum.
Thanks!
Joe
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
I haven't been able to figure out why, but the main bundle grew from 580KB to 720KB (with the lazyloaded bundle being 40KB). From looking at main.bundle.js and main.bundle.js.map, there seem to be extra stuff included - mostly material related - that shouldn't be (unless I am reading the files incorrectly).
For example, below are the differences for the sourcemaps' sources and names properties. sources looks reasonable (both removed and added entries are as expected). names includes more than 1000 new symbols 😳
main.bundle.js.map diff (sources)
-webpack:///angular/aio/src/$_gendir/app/embedded/api/api-list.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/code/code-example.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/code/code-tabs.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/code/code.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/contributor/contributor-list.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/contributor/contributor.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/current-location.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/live-example/live-example.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/resource/resource-list.component.ngfactory.ts
-webpack:///angular/aio/src/$_gendir/app/embedded/toc/toc.component.ngfactory.ts
-webpack:///angular/aio/src/app/embedded/api/api-list.component.ts
-webpack:///angular/aio/src/app/embedded/api/api.service.ts
-webpack:///angular/aio/src/app/embedded/code/code-example.component.ts
-webpack:///angular/aio/src/app/embedded/code/code-tabs.component.ts
-webpack:///angular/aio/src/app/embedded/code/code.component.ts
-webpack:///angular/aio/src/app/embedded/code/pretty-printer.service.ts
-webpack:///angular/aio/src/app/embedded/contributor/contributor-list.component.ts
-webpack:///angular/aio/src/app/embedded/contributor/contributor.component.ts
-webpack:///angular/aio/src/app/embedded/contributor/contributor.service.ts
-webpack:///angular/aio/src/app/embedded/current-location.component.ts
-webpack:///angular/aio/src/app/embedded/embedded.module.ts
-webpack:///angular/aio/src/app/embedded/live-example/live-example.component.ts
-webpack:///angular/aio/src/app/embedded/resource/resource-list.component.ts
-webpack:///angular/aio/src/app/embedded/resource/resource.service.ts
-webpack:///angular/aio/src/app/embedded/toc/toc.component.ts
-webpack:///angular/aio/src/app/shared/attribute-utils.ts
-webpack:///angular/aio/src/app/shared/copier.service.ts
-webpack:///main.XcbXeXbXfe.bundle.js
-webpack:///null?XaX
+webpack:///angular/aio/src/$_gendir/app/layout/toc/toc.component.ngfactory.ts
+webpack:///angular/aio/src/app/layout/toc/toc.component.ts
+webpack:///angular/aio/src/app/navigation/navigation.model.ts
+webpack:///angular/aio/src/app/shared/embedded-selectors.ts
+webpack:///angular/aio/src/app/shared/shared.module.ts
+webpack:///main.dXdXaXbXdXaXfbXc.bundle.js
+webpack:///null
main.bundle.js.map diff (names)
-ApiListComponent
-ApiListComponentNgFactory
-ApiService
-CodeComponent
-CodeExampleComponent
-CodeExampleComponentNgFactory
-CodeTabsComponent
-CodeTabsComponentNgFactory
-ContributorComponent
-ContributorListComponent
-ContributorListComponentNgFactory
-ContributorService
-CopierService
-CurrentLocationComponent
-CurrentLocationComponentNgFactory
-EmbeddedComponents
-EmbeddedModule
-EmbeddedPlunkerComponent
-LiveExampleComponent
-LiveExampleComponentNgFactory
-NaN
-PrettyPrinter
-RenderType_ApiListComponent
-RenderType_CodeComponent
-RenderType_CodeExampleComponent
-RenderType_CodeTabsComponent
-RenderType_ContributorComponent
-RenderType_ContributorListComponent
-RenderType_CurrentLocationComponent
-RenderType_EmbeddedPlunkerComponent
-RenderType_LiveExampleComponent
-RenderType_ResourceListComponent
-ResourceListComponent
-ResourceListComponentNgFactory
-ResourceService
-SearchCriteria
-View_ApiListComponent_X
-View_ApiListComponent_X
-View_ApiListComponent_X
-View_ApiListComponent_X
-View_ApiListComponent_Host_X
-View_CodeComponent_X
-View_CodeComponent_X
-View_CodeExampleComponent_X
-View_CodeExampleComponent_X
-View_CodeExampleComponent_Host_X
-View_CodeTabsComponent_X
-View_CodeTabsComponent_X
-View_CodeTabsComponent_X
-View_CodeTabsComponent_Host_X
-View_ContributorComponent_X
-View_ContributorComponent_X
-View_ContributorComponent_X
-View_ContributorComponent_X
-View_ContributorComponent_X
-View_ContributorListComponent_X
-View_ContributorListComponent_X
-View_ContributorListComponent_X
-View_ContributorListComponent_X
-View_ContributorListComponent_Host_X
-View_CurrentLocationComponent_X
-View_CurrentLocationComponent_Host_X
-View_EmbeddedPlunkerComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_X
-View_LiveExampleComponent_Host_X
-View_ResourceListComponent_X
-View_ResourceListComponent_X
-View_ResourceListComponent_X
-View_ResourceListComponent_X
-View_ResourceListComponent_X
-View_ResourceListComponent_Host_X
-_sections
-animations_esX_BrowserAnimationBuilder
-apiBase
-apiListJsonDefault
-apiService
-api_list_component_ApiListComponent
-api_list_component___WEBPACK_IMPORTED_MODULE_X_rxjs_observable_combineLatest__
-api_list_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-api_service_ApiService
-api_service___WEBPACK_IMPORTED_MODULE_X_rxjs_ReplaySubject__
-api_service___WEBPACK_IMPORTED_MODULE_X_rxjs_Subject__
-attrMap
-attribute_utils___WEBPACK_IMPORTED_MODULE_X__angular_core__
-bio
-boolFromValue
-border
-browser_esX_AnimationAstBuilderVisitor
-browser_esX_NoopAnimationDriver
-browser_esX_TimelineAnimationEngine
-browser_esX_TimelineBuilder
-browser_esX_TransitionAnimationEngine
-browser_esX_TransitionAnimationPlayer
-browser_esX_flattenStyles
-calcPlnkrLink
-cat
-catKey
-categories
-category
-categoryJson
-cats
-cdk_esX___WEBPACK_IMPORTED_MODULE_X_tslib__
-cdk_esX___WEBPACK_IMPORTED_MODULE_X__angular_core__
-cmap
-codeContainer
-codeExample
-codeExampleContent
-codeExamples
-codeTabsContent
-codeText
-code_component_CodeComponent
-code_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-code_example_component_CodeExampleComponent
-code_example_component___WEBPACK_IMPORTED_MODULE_X__angular_core__
-code_example_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-code_tabs_component___WEBPACK_IMPORTED_MODULE_X__angular_core__
-code_tabs_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-comm___WEBPACK_IMPORTED_MODULE_X_rxjs_Observable__
-compareCats
-compareContributors
-compareGroups
-compareTitles
-contribGroup
-contribMap
-contribs
-contributor
-contributorService
-contributor_component_ContributorComponent
-contributor_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-contributor_list_component_ContributorListComponent
-contributor_list_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-contributor_service_ContributorService
-contributor_service___WEBPACK_IMPORTED_MODULE_X_rxjs_add_operator_map__
-contributors
-contributorsPath
-copier
-copyText
-createFake
-criteria
-criteriaSubject
-current_location_component_CurrentLocationComponent
-current_location_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-custom_md_icon_registry_CustomMdIconRegistry
-custom_md_icon_registry___WEBPACK_IMPORTED_MODULE_X_tslib__
-custom_md_icon_registry___WEBPACK_IMPORTED_MODULE_X__angular_core__
-defaultPlnkrImg
-doCopy
-docType
-document_service_DocumentService
-document_service___WEBPACK_IMPORTED_MODULE_X_rxjs_Observable__
-dynamicHeight
-embedded
-embeddedStyle
-enableDownload
-exampleDir
-execCommand
-fakeElem
-fetchSections
-filterSection
-filteredSections
-firstTime
-flatStyle
-flipCard
-flipped
-fontSize
-formatCode
-formattedCode
-ga_service_GaService
-ga_service___WEBPACK_IMPORTED_MODULE_X__environments_environment__
-getAttrValue
-getAttrs
-getBoolFromAttribute
-getCategories
-getCodeText
-getContributors
-getLinenums
-getPrettyPrintOne
-groupName
-groupNames
-grps
-headed-code
-hideCopy
-http_esX_CookieXSRFStrategy
-http_esX___WEBPACK_IMPORTED_MODULE_X_tslib__
-iframe
-imageBase
-img
-indent
-index_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-initializeSearchCriteria
-isAvoid
-isEmbeddedStyle
-isFlatStyle
-isFlipped
-isRTL
-knownGroups
-language
-leftAlign
-lineIndent
-linenums
-linenumsDefault
-lines
-liveExampleBase
-liveExampleContent
-live_example_component_LiveExampleComponent
-live_example_component___WEBPACK_IMPORTED_MODULE_X__angular_core__
-live_example_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-location_service_LocationService
-makeId
-material_esX_MdButton
-material_esX_MdIcon
-material_esX_MdIconRegistry
-material_esX_MdSidenav
-material_esX_MdSidenavContainer
-material_esX_MdSnackBar
-material_esX_MdSnackBarContainer
-material_esX_MdTab
-material_esX_MdTabGroup
-material_esX_MdTabHeader
-material_esX_Overlay
-material_esX_ScrollDispatcher
-material_esX___WEBPACK_IMPORTED_MODULE_X_tslib__
-material_esX___WEBPACK_IMPORTED_MODULE_X__angular_core__
-mkCategories
-mkResources
-mkSubCategories
-narrowWidth
-navigation_service_NavigationService
-noPicture
-order
-padding
-person
-picture
-pictureBase
-platform_browser_esX_BrowserDomAdapter
-platform_browser_esX___WEBPACK_IMPORTED_MODULE_X_tslib__
-plnkr
-plnkrImg
-plnkrName
-plnkrStyle
-ppo
-pretty
-prettyPrintOne
-pretty_printer_service_PrettyPrinter
-processContent
-queryEl
-region
-removeFake
-resKey
-resourceJson
-resourceService
-resource_list_component_ResourceListComponent
-resource_list_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-resource_service_ResourceService
-resource_service___WEBPACK_IMPORTED_MODULE_X_rxjs_add_operator_map__
-resource_service___WEBPACK_IMPORTED_MODULE_X_rxjs_add_operator_publishLast__
-resources
-resourcesPath
-rev
-scrollPos
-scroll_service_ScrollService
-scroll_service___WEBPACK_IMPORTED_MODULE_X__angular_core__
-scroll_spy_service___WEBPACK_IMPORTED_MODULE_X_rxjs_Observable__
-searchCriteria
-search_box_component_SearchBoxComponent
-search_service___WEBPACK_IMPORTED_MODULE_X_rxjs_Observable__
-section
-sections
-sectionsSubject
-securityRisk
-selectGroup
-select_component___WEBPACK_IMPORTED_MODULE_X__angular_core__
-select_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_core__
-selectedGroup
-setCodeHtml
-setLocationSearch
-setQuery
-setSearchCriteria
-setSelectionRange
-setStatus
-setType
-showEmbedded
-showSection
-showStatusMenu
-showTypeMenu
-simple-code
-snackbar
-src
-stability
-statuses
-styles_ApiListComponent
-styles_CodeComponent
-styles_CodeExampleComponent
-styles_CodeTabsComponent
-styles_ContributorComponent
-styles_ContributorListComponent
-styles_CurrentLocationComponent
-styles_EmbeddedPlunkerComponent
-styles_LiveExampleComponent
-styles_ResourceListComponent
-subCategories
-subCategory
-subCategoryJson
-subKey
-toc_component___WEBPACK_IMPORTED_MODULE_X_rxjs_Subject__
-toggleEmbedded
-toggleStatusMenu
-toggleTypeMenu
-twitter
-types
-webpackEmptyAsyncContext
-website
-zip
-zipBase
-zipName
+ANALYZE_FOR_ENTRY_COMPONENTS
+AbstractControl
+AbstractControlDirective
+AbstractControlStatus
+AbstractFormGroupDirective
+AccordionItem
+ActiveDescendantKeyManager
+BUILTIN_ACCESSORS
+CPpX
+CdkAccordion
+CdkCell
+CdkCellOutlet
+CdkColumnDef
+CdkHeaderCell
+CdkHeaderRow
+CdkMonitorFocus
+CdkRow
+CdkTable
+CdkTableModule
+CheckboxControlValueAccessor
+Checked
+ConnectedOverlayDirective
+ControlContainer
+DEFAULT_CONFIG
+DEFAULT_DATE_NAMES
+DEFAULT_DAY_OF_WEEK_NAMES
+DEFAULT_MONTH_NAMES
+DEGREE_IN_RADIANS
+DOWN_ARROW
+DateAdapter
+DateTimeFormat
+DefaultValueAccessor
+DialogInjector
+EMAIL_REGEXP
+END
+ENTER
+ESCAPE
+EveryOperator
+EverySubscriber
+EyWH
+FitTileStyler
+FixedTileStyler
+FocusKeyManager
+FocusTrapDirective
+FormArray
+FormControl
+FormErrorExamples
+FormGroup
+GestureConfig
+HAS_RAF
+HOME
+HashLocationStrategy
+HeaderRowPlaceholder
+IXay
+ICON_REGISTRY_PROVIDER_FACTORY
+Indeterminate
+Init
+Intl
+JqQG
+LEFT_ARROW
+LOCATION_INITIALIZED
+LastOperator
+LastSubscriber
+ListKeyManager
+MAX_ANGLE
+MD_DATE_FORMATS
+MD_DIALOG_DATA
+MD_NATIVE_DATE_FORMATS
+MD_PLACEHOLDER_GLOBAL_OPTIONS
+MatPrefixRejector
+MaterialModule
+MdAccordion
+MdAnchor
+MdAutocomplete
+MdAutocompleteModule
+MdButtonToggle
+MdButtonToggleChange
+MdButtonToggleGroup
+MdButtonToggleGroupBase
+MdButtonToggleGroupMultiple
+MdButtonToggleModule
+MdCalendar
+MdCalendarBody
+MdCalendarCell
+MdCard
+MdCardHeader
+MdCardModule
+MdCardTitleGroup
+MdCheckbox
+MdCheckboxBase
+MdCheckboxChange
+MdCheckboxModule
+MdChipList
+MdChipsModule
+MdCoreModule
+MdDatepicker
+MdDatepickerContent
+MdDatepickerIntl
+MdDatepickerModule
+MdDatepickerToggle
+MdDialog
+MdDialogConfig
+MdDialogContainer
+MdDialogModule
+MdDialogRef
+MdExpansionModule
+MdExpansionPanel
+MdExpansionPanelHeader
+MdGridList
+MdGridListModule
+MdGridTile
+MdGridTileText
+MdHeaderRow
+MdIconButtonCssMatStyler
+MdInputContainer
+MdLineModule
+MdLineSetter
+MdList
+MdListItem
+MdListModule
+MdMenu
+MdMenuItem
+MdMenuItemBase
+MdMenuModule
+MdMonthView
+MdNativeDateModule
+MdNavListCssMatStyler
+MdOptgroup
+MdOptgroupBase
+MdOption
+MdOptionModule
+MdOptionSelectionChange
+MdPaginator
+MdPaginatorIntl
+MdPaginatorModule
+MdProgressSpinner
+MdProgressSpinnerBase
+MdProgressSpinnerModule
+MdPseudoCheckbox
+MdPseudoCheckboxBase
+MdRadioButton
+MdRadioButtonBase
+MdRadioChange
+MdRadioGroup
+MdRadioGroupBase
+MdRadioModule
+MdRow
+MdSelect
+MdSelectBase
+MdSelectChange
+MdSelectModule
+MdSelectionModule
+MdSlideToggle
+MdSlideToggleBase
+MdSlideToggleChange
+MdSlideToggleModule
+MdSlider
+MdSliderBase
+MdSliderChange
+MdSliderModule
+MdSort
+MdSortHeader
+MdSortHeaderIntl
+MdSortModule
+MdSpinner
+MdTabNav
+MdTable
+MdTableModule
+MdTooltip
+MdTooltipModule
+MdYearView
+MfbB
+NG_VALIDATORS
+NG_VALUE_ACCESSOR
+NativeDateAdapter
+NativeDateModule
+NgControl
+NgControlStatus
+NgForm
+NgModel
+NgModelGroup
+NgModuleFactoryLoader
+NoConflictStyleCompatibilityMode
+NumberValueAccessor
+OgBX
+OverlayOrigin
+PAGE_DOWN
+PAGE_UP
+PI
+PROGRESS_SPINNER_STROKE_WIDTH
+Pan
+Press
+RIGHT_ARROW
+ROUTES
+RXKU
+RadioControlValueAccessor
+RangeValueAccessor
+RatioTileStyler
+RowPlaceholder
+SELECT_ITEM_HEIGHT
+SELECT_MAX_OPTIONS_DISPLAYED
+SELECT_MULTIPLE_PANEL_PADDING_X
+SELECT_PANEL_PADDING_X
+SPACE
+SUPPORTS_INTL_API
+SelectControlValueAccessor
+SelectMultipleControlValueAccessor
+SelectionChange
+SelectionModel
+SlideToggleRenderer
+SliderRenderer
+Swipe
+SystemJsNgModuleLoader
+SystemJsNgModuleLoaderConfig
+TXAu
+THYR
+TemplateDrivenErrors
+TileCoordinator
+TilePosition
+TileStyler
+TooltipComponent
+TransitionCheckState
+UNIQUE_SELECTION_DISPATCHER_PROVIDER_FACTORY
+UP_ARROW
+Unchecked
+UniqueSelectionDispatcher
+Validators
+WSkQ
+ZXr
+_Xdigit
+_MdButtonToggleGroupMixinBase
+_MdCheckboxMixinBase
+_MdHeaderRow
+_MdMenuItemMixinBase
+_MdOptgroupMixinBase
+_MdProgressSpinnerMixinBase
+_MdPseudoCheckboxBase
+_MdRadioButtonMixinBase
+_MdRadioGroupMixinBase
+_MdRow
+_MdSelectMixinBase
+_MdSlideToggleMixinBase
+_MdSliderMixinBase
+_MdTable
+__WEBPACK_IMPORTED_MODULE_X__angular_common__
+__WEBPACK_IMPORTED_MODULE_X__angular_http__
+__WEBPACK_IMPORTED_MODULE_X__comm__
+__WEBPACK_IMPORTED_MODULE_X__angular_animations__
+__WEBPACK_IMPORTED_MODULE_X__angular_cdk__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_logger_service__
+__WEBPACK_IMPORTED_MODULE_X__angular_material__
+__WEBPACK_IMPORTED_MODULE_X_rxjs_operator_takeUntil__
+__WEBPACK_IMPORTED_MODULE_X__angular_common__
+__WEBPACK_IMPORTED_MODULE_X__angular_service_worker_companion_comm__
+__WEBPACK_IMPORTED_MODULE_X__angular_cdk__
+__WEBPACK_IMPORTED_MODULE_X__app_shared_logger_service__
+__WEBPACK_IMPORTED_MODULE_X__app_sw_updates_sw_updates_service__
+__WEBPACK_IMPORTED_MODULE_X__app_shared_ga_service__
+__WEBPACK_IMPORTED_MODULE_X__app_shared_location_service__
+__WEBPACK_IMPORTED_MODULE_X__app_documents_document_service__
+__WEBPACK_IMPORTED_MODULE_X__app_shared_location_service__
+__WEBPACK_IMPORTED_MODULE_X__angular_animations__
+__WEBPACK_IMPORTED_MODULE_X__angular_common__
+__WEBPACK_IMPORTED_MODULE_X__angular_material__
+__WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+__WEBPACK_IMPORTED_MODULE_X__gendir_node_modules_angular_material_typings_index_ngfactory__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_location_service__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_logger_service__
+__WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+__WEBPACK_IMPORTED_MODULE_X__shared_select_select_component_ngfactory__
+__WEBPACK_IMPORTED_MODULE_X__app_shared_select_select_component__
+__WEBPACK_IMPORTED_MODULE_X__angular_service_worker_companion_module__
+__WEBPACK_IMPORTED_MODULE_X__app_shared_logger_service__
+__WEBPACK_IMPORTED_MODULE_X__app_shared_shared_module__
+__WEBPACK_IMPORTED_MODULE_X__angular_cdk__
+__WEBPACK_IMPORTED_MODULE_X__angular_material__
+__WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+__WEBPACK_IMPORTED_MODULE_X__gendir_node_modules_angular_material_typings_index_ngfactory__
+__WEBPACK_IMPORTED_MODULE_X_app_documents_document_service__
+__WEBPACK_IMPORTED_MODULE_X__app_documents_document_service__
+__WEBPACK_IMPORTED_MODULE_X__angular_animations__
+__WEBPACK_IMPORTED_MODULE_X__angular_common__
+__WEBPACK_IMPORTED_MODULE_X__angular_material__
+__WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_ga_service__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_location_service__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_logger_service__
+__WEBPACK_IMPORTED_MODULE_X__angular_common__
+__WEBPACK_IMPORTED_MODULE_X__angular_http__
+__WEBPACK_IMPORTED_MODULE_X_app_sw_updates_sw_updates_service__
+__WEBPACK_IMPORTED_MODULE_X__angular_common__
+__WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_location_service__
+__WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+__WEBPACK_IMPORTED_MODULE_X_app_documents_document_service__
+__WEBPACK_IMPORTED_MODULE_X_rxjs_operator_filter__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_location_service__
+__WEBPACK_IMPORTED_MODULE_X__angular_http__
+__WEBPACK_IMPORTED_MODULE_X_app_shared_logger_service__
+__WEBPACK_IMPORTED_MODULE_X_rxjs_operator_switchMap__
+_active
+_activeDate
+_activeItem
+_activeItemIndex
+_activeLinkChanged
+_activeLinkElement
+_addChip
+_adjustPanelDown
+_adjustPanelUp
+_afterAllClosed
+_afterAllClosedAtThisLevel
+_afterOpen
+_afterOpenAtThisLevel
+_afterVisibilityAnimation
+_alignInkBar
+_allControlsDisabled
+_animateCircle
+_anyControls
+_anyControlsDirty
+_anyControlsHaveStatus
+_anyControlsTouched
+_applyConfigDefaults$X
+_applyFormState
+_ariaLabelledBy
+_asyncValidationSubscription
+_asyncValidators
+_attachDialogContainer
+_attachDialogContent
+_attachOverlay
+_backdropSubscription
+_boundKeydown
+_buildConfig
+_buildValueString
+_buttonToggleDispatcher
+_buttonToggles
+_calculateOverlayOffsetX
+_calculateOverlayOffsetY
+_calculateOverlayPosition
+_calculateOverlayScroll
+_calculatePercentage
+_calculateStatus
+_calculateValue
+_calendar
+_calendarPortal
+_cancelExistingSubscription
+_cd
+_cdkColumnDef
+_cellClicked
+_changeDetector
+_changeDetectorRef
+_changePageSize
+_changeSubscription
+_checkAllValuesPresent
+_checkCols
+_checkDisabled
+_checkForErrors
+_checkName
+_checkOverlayWithinViewport
+_checkParentType
+_checkRowHeight
+_checkSelectedRadioButton
+_checked
+_clamp
+_clampedActiveDate
+_classList
+_cleanupIndeterminateAnimation
+_clearChangeFns
+_clearSelection
+_closeOnInteraction
+_cols
+_colspan
+_columnDefinitions
+_columnDefinitionsByName
+_compareWith
+_compiler
+_composing
+_compositionEnd
+_compositionMode
+_compositionStart
+_containerInstance
+_controlValueAccessorChangeFn
+_createCellForMonth
+_createDateWithOverflow
+_createInjector
+_createPopup
+_createPopupPositionStrategy
+_createPositionStrategy
+_createRecognizer
+_createTooltip
+_createWeekCells
+_currentAnimationClass
+_currentCheckState
+_currentPeriodClicked
+_customTokens
+_dataDiffer
+_dataSource
+_dateAdapter
+_dateFilter
+_dateFilterForViews
+_dateFormats
+_dateSelected
+_datepickerInput
+_deselectedToEmit
+_destroyOverlay
+_detachOverlay
+_dialog
+_dialogRef
+_direction
+_disableClear
+_displayedPageSizeOptions
+_disposeTooltip
+_dropSubscriptions
+_elementFocusedBeforeDialogWasOpened
+_emitChangeEvent
+_emitChanges
+_emitCloseEvent
+_emitInputEvent
+_emitPageEvent
+_emitSelectionChangeEvent
+_emitValueIfChanged
+_errorChildren
+_errors
+_escapeListener
+_executeAsyncValidators
+_executeValidators
+_expanded
+_expansionDispatcher
+_extractId
+_extractId$X
+_find
+_findContainer
+_findGapEndIndex
+_findMatchingGap
+_firstRowOffset
+_firstWeekOffset
+_floatPlaceholder
+_floatPlaceholderState
+_fn
+_focusActiveCell
+_focusCorrectOption
+_focusInput
+_focusRipple
+_focusedElementBeforeOpen
+_forEachChild
+_getAnimationClassForCheckStateTransition
+_getCellTemplatesForRow
+_getClassList
+_getDateInCurrentMonth
+_getDisplayMode
+_getDisplayedMessages
+_getDragPercentage
+_getExpandedState
+_getHeaderCellTemplatesForRow
+_getHideToggle
+_getItemCount
+_getLabelCountBeforeOption
+_getMonthInCurrentYear
+_getOptionId
+_getOptionIndex
+_getOptionValue
+_getOrigin
+_getOriginBasedOnOption
+_getOverlayPosition
+_getOverlayState
+_getPanelId
+_getPlaceholderAnimationState
+_getPlaceholderOpacity
+_getPositionStrategy
+_getScrollTop
+_getTabIndex
+_getTriggerRect
+_gutter
+_gutterSize
+_haltDisabledEvents
+_hammer
+_handleArrowKey
+_handleBlur
+_handleBodyInteraction
+_handleCalendarBodyKeydown
+_handleCalendarBodyKeydownInMonthView
+_handleCalendarBodyKeydownInYearView
+_handleClosedKeydown
+_handleFocus
+_handleInput
+_handlePanelKeydown
+_handlePositionChanges
+_hasBackdrop
+_hasFocus
+_hasPlaceholder
+_hasSameMonthAndYear
+_headerDefinition
+_headerRowPlaceholder
+_hideRequiredMarker
+_hideTimeoutId
+_hideToggle
+_hintChildren
+_hintLabel
+_hintLabelId
+_idCounter
+_increment
+_indeterminate
+_initEscapeListener
+_initKeyManager
+_initObservables
+_inputElement
+_inputSubscription
+_insertRow
+_interdeterminateInterval
+_intl
+_invert
+_invertAxis
+_invertMouseCoords
+_isActive
+_isActiveCell
+_isAndroid
+_isBoxedValue
+_isCompatibilityMode
+_isErrorState
+_isExpanded
+_isMinValue
+_isMonthEnabled
+_isMulti
+_isNavList
+_isSameView
+_isSingleSelector
+_isSliding
+_isSorted
+_isStandalone
+_isTooltipVisible
+_isViewInitialized
+_items
+_keyManager
+_keydown
+_keyup
+_labelId
+_labelPosition
+_lastAnimationId
+_lastChangeValue
+_lastInputValue
+_layoutTiles
+_lineSetter
+_lines
+_list
+_listenToOptions
+_listeners
+_markForCheck
+_markRadiosForCheck
+_markSelected
+_markTilePosition
+_max
+_mdInputChild
+_mergeErrors
+_message
+_min
+_mode
+_monitorSubscription
+_monthLabel
+_monthSelected
+_monthView
+_months
+_multi
+_multiple
+_name
+_nextClicked
+_nextEnabled
+_nextMonthInSameCol
+_nextRow
+_ngControl
+_observeRenderChanges
+_onAnimationDone
+_onAnimationStateChange
+_onAttached
+_onChange
+_onChangeEvent
+_onClick
+_onCollectionChange
+_onDisabledChange
+_onDrag
+_onDragEnd
+_onDragStart
+_onFadeInDone
+_onHide
+_onInputChange
+_onInputClick
+_onInputFocusChange
+_onInteractionEvent
+_onKeydown
+_onKeyup
+_onLabelTextChange
+_onMouseenter
+_onPanelDone
+_onSelect
+_onSlide
+_onSlideEnd
+_onSlideStart
+_onTouched
+_openAsDialog
+_openAsPopup
+_openDialogs
+_openDialogsAtThisLevel
+_optionIds
+_optionMap
+_optionSubscription
+_pageSize
+_pageSizeOptions
+_panelDoneAnimating
+_panelOpen
+_parentDialog
+_parentInjector
+_parseRatio
+_path
+_percent
+_placeholder
+_placeholderChange
+_placeholderChild
+_placeholderOptions
+_placeholderState
+_popupRef
+_positionSubscription
+_positions
+_prevMonthInSameCol
+_previousChecked
+_previousClicked
+_previousEnabled
+_pristine
+_processHints
+_propagateChanges
+_radioDispatcher
+_radios
+_rawAsyncValidators
+_rawValidators
+_reduceChildren
+_reduceValue
+_registerControl
+_registerInput
+_registerOnCollectionChange
+_registerOption
+_registered
+_registry
+_removeFocusRipple
+_removeOpenDialog
+_removeUniqueSelectionListener
+_renderArc
+_renderChangeSubscription
+_renderHeaderRow
+_renderRowChanges
+_required
+_resetClasses
+_resetOptions
+_resizeSubscription
+_result
+_ripple
+_roundLabelTo
+_rowDefinitions
+_rowHeight
+_rowPlaceholder
+_rows
+_rowspan
+_runAsyncValidator
+_runValidator
+_savePreviouslyFocusedElement
+_scrollTop
+_selectAndClose
+_selectValue
+_selectViaInteraction
+_selectable
+_selected
+_selectedDate
+_selectedMonth
+_selectedToEmit
+_selectedValueWidth
+_selection
+_selectionModel
+_setActiveInDefaultMode
+_setActiveInWrapMode
+_setActiveItemByDelta
+_setActiveItemByIndex
+_setClass
+_setInitialStatus
+_setLineClass
+_setListStyle
+_setOptionIds
+_setOptionMultiple
+_setScrollTop
+_setSelected
+_setSelectionByValue
+_setTileStyler
+_setTooltipClass
+_setTooltipMessage
+_setTransformOrigin
+_setTriggerWidth
+_setUpControl
+_setUpControls
+_setUpStandalone
+_setValueWidth
+_setVisibility
+_shouldForward
+_showTimeoutId
+_slideRenderer
+_sliderDimensions
+_sliderElement
+_sort
+_sortValues
+_startAt
+_startIndeterminateAnimation
+_status
+_statusChanges
+_step
+_stripDirectionalityCharacters
+_submitted
+_subscribeChips
+_subscribed
+_subscriptAnimationState
+_switchDataSource
+_syncAriaDescribedby
+_tabIndex
+_tabOut
+_tabOutSubscription
+_tabSubscription
+_templatePortal
+_throwIfControlMissing
+_throwNameError
+_thumbBarEl
+_thumbBarWidth
+_thumbEl
+_thumbGap
+_thumbLabel
+_tickInterval
+_tickIntervalPercent
+_tileStyler
+_tiles
+_todayDate
+_todayMonth
+_toggle
+_toggleSelectOnFocusedChip
+_tooltipClass
+_tooltipInstance
+_touch
+_touched
+_trackTile
+_transformOrigin
+_transitionCheckState
+_trapFocus
+_triggerWidth
+_type
+_uniqueAutocompleteIdCounter
+_uniqueId
+_uniqueIdCounter
+_uniqueIdCounter$X
+_uniqueIdCounter$X
+_uniqueOptgroupIdCounter
+_uniqueSelectionDispatcher
+_unmarkAll
+_unmarkSelected
+_updateAncestors
+_updateButtonToggleNames
+_updateControlsErrors
+_updateDisabled
+_updateDisplayedPageSizeOptions
+_updatePristine
+_updateRadioButtonNames
+_updateRowContext
+_updateSelectedButtonToggleFromValue
+_updateSelectedRadioFromValue
+_updateTickIntervalPercent
+_updateTouched
+_updateTreeValidity
+_updateValue
+_updateValueFromPosition
+_validateHints
+_validateInputChild
+_validatePlaceholders
+_validators
+_valueChange
+_valueChanges
+_vertical
+_visibility
+_weekdays
+_weeks
+_wrap
+_xPosition
+_yPosition
+_yearLabel
+accordion
+accordionId
+activeCell
+activeDate
+actual
+actualLength
+actualValue
+addCalendarDays
+addCalendarMonths
+addCalendarYears
+addControl
+addFocus
+addFormGroup
+added
+afterAllClosed
+afterClosed
+afterHidden
+afterOpen
+allowDisabledSelection
+angleInDegrees
+angleInRadians
+animSuffix
+animate$$X
+animateFrom
+animateTo
+animation_X
+app/embedded/embedded.module.ngfactory
+app_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__gendir_node_modules_angular_material_typings_index_ngfactory__
+app_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_material__
+applyCssTransform
+arcSweep
+ariaDescribedby
+ariaLabelledby
+arrayOfErrors
+arrowPosition
+asyncValidator
+asyncValidators
+at
+avatar
+axis
+bZxO
+backgroundSize
+baseSize
+baseTileHeight
+baseTileWidth
+bmXB
+bottomSpaceAvailable
+builtinAccessor
+buttonToggle
+buttonToggleGroup
+buttonToggleGroupMultiple
+buttons
+calc
+calendarLabel
+canClose
+candidateInputTypes
+cdkFocusChange
+ceil
+cell
+cellNumber
+cells
+center
+changeFn
+changeInValue
+checkNotEmpty
+chip
+chipIndex
+chips
+clamp
+clampDate
+clampValue
+clearAsyncValidators
+clearValidators
+clientX
+clientY
+closeAll
+coerceNumberProperty
+coerceToAsyncValidator
+coerceToNumber
+coerceToString
+coerceToValidator
+col
+colIndex
+cols
+colspan
+column
+columnChangeEvents
+columnDef
+columnId
+columnIndex
+columns
+columnsChange
+compareDate
+componentInstance
+componentOrTemplateRef
+compose
+composeAsync
+composeAsyncValidators
+composeValidators
+concatAll
+consumed
+controlName
+controlPath
+controls
+correspondingOption
+cos
+createDate
+createMissingDateImplError
+ctrl
+currentActiveItem
+customAccessor
+dataSource
+date
+dateX
+dateX
+dateAXyLabel
+dateFilter
+dateInput
+dateNames
+datepicker
+datepickerUid
+day
+days
+daysInMonth
+defaultAccessor
+defaultPositionList
+defaultUrlMatcher
+delimiter
+delta
+deltaX
+deselect
+dialogConfig
+dialogContainer
+dialogRef
+dialogResult
+disableClear
+disabledValue
+displayFormat
+displayMode
+displayValue
+displayWith
+distance
+distanceAboveViewport
+distanceBelowViewport
+doc_viewer_component___WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+dragPercentage
+dragging
+dt_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_common__
+dtf_X
+dtf_X
+dtf_X
+ease
+elapsedTime
+email
+embeddedComponentInstances
+embeddedComponentsReady
+embeddedComponents_X
+embeddedModuleRef
+embeddedSelectors
+embeddedSelectorsToken
+embedded_selectors___WEBPACK_IMPORTED_MODULE_X__angular_core__
+emitEvent
+emitModelEvent
+emitModelToViewChange
+emitViewToModelChange
+endAngle
+endHint
+endHint_X
+errorCode
+eventData
+everyValueMatch
+exactValue
+exportName
+factoryClassSuffix
+factoryPathPrefix
+factoryPathSuffix
+fallbackDelta
+fallbackValue
+fc+i
+featureTestInput
+filter$X
+first$$X
+firstDayOfWeek
+firstDisplayedIndex
+firstOfMonth
+fixedRowHeight
+float
+floatPlaceholder
+focusFirstItem
+focusOrigin
+focusOriginMonitor
+focusTrap
+focusedChip
+focusedIndex
+footer_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_common__
+form
+formArrayName
+formControlName
+formDirective
+formGroupName
+formGroupNameException
+formState
+format
+gapEndIndex
+gapStartIndex
+getBaseTileSize
+getComputedHeight
+getControl
+getDate
+getDateNames
+getDay
+getDayOfWeek
+getDayOfWeekNames
+getError
+getFirstDayOfWeek
+getFormGroup
+getFullYear
+getGutterSpan
+getISODateString
+getMdInputContainerDuplicatedHintError
+getMdInputContainerMissingMdInputError
+getMdInputContainerPlaceholderConflictError
+getMdSelectDynamicMultipleError
+getMdSelectNonArrayValueError
+getMdSortDuplicateMdSortableIdError
+getMdSortHeaderMissingIdError
+getMdSortHeaderNotContainedWithinMdSortError
+getMdTooltipInvalidPositionError
+getMonth
+getMonthNames
+getNextSortDirection
+getNumDaysInMonth
+getPopupConnectionElementRef
+getRangeLabel
+getRawValue
+getSliderDimensions
+getSortDirectionCycle
+getSupportedInputTypes
+getSvgArc
+getTableUnknownColumnError
+getTilePosition
+getTileSize
+getTileSpan
+getUTCDate
+getUTCFullYear
+getUTCMonth
+getYear
+getYearName
+groupCounter
+groupValueChanged
+gutterFraction
+gutterHeightPerTile
+gutterSize
+gutterWidth
+gutterWidthFractionPerTile
+hasChildren
+hasNextPage
+hasPreviousPage
+headerCell
+headerDef
+hideDelay
+hideToggle
+hint
+hintLabel
+icX+
+ids
+ids_X
+indeterminate
+indeterminateChange
+inheritances
+initValue
+initiallySelectedValues
+injectionTokens
+interdeterminateInterval
+interval
+invalid
+invert
+isAlreadySelected
+isAttached
+isBuiltInAccessor
+isDirectionLtr
+isEmptyInputValue
+isFakeMousedownFromScreenReader
+isLtr
+isPresent
+isPropertyUpdated
+isRippleEnabled
+isRtl
+isUserInput
+itemsPerPageLabel
+kXoK
+lZbs
+labelPosition
+largeArcFlag
+lastRowMax
+linearEase
+load
+loadAndCompile
+loadChildren
+loadFactory
+long
+longWeekdays
+longpress
+main___WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+markAsDirty
+markAsPending
+markAsPristine
+markAsTouched
+markAsUntouched
+mat-autocomplete-hidden
+mat-autocomplete-panel-above
+mat-autocomplete-panel-below
+mat-autocomplete-visible
+matchingButtonToggle
+materialEase
+maxDate
+maxLength
+maxScroll
+maxlength
+mdSortChange
+messageEnd
+minDate
+minLength
+minlength
+missingNameException
+model
+modelGroupParentException
+modelParentException
+modulePath
+month
+monthName
+monthNames
+monthYearAXyLabel
+monthYearLabel
+months
+mostRecentCellOutlet
+multiple
+narrow
+narrowWeekdays
+navList
+nav_item_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_common__
+nav_item_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_material__
+nav_menu_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_common__
+newCheckedState
+newDate
+newState
+newValidator
+nextDirectionIndex
+nextMonthLabel
+nextPage
+nextPageLabel
+nextUniqueId$X
+nextYearLabel
+ngModelGroup
+ngModelWithFormGroup
+ngModuleFactory
+ngSubmit
+normalizeAsyncValidator
+normalizeUnits
+normalizeValidator
+nullValidator
+numCols
+numColumns
+numSteps
+odd
+oldActiveDate
+oldState
+onChange
+onKeydown
+onPositionChange
+onReset
+onSelectionChange
+onSubmit
+onTouched
+onlySelf
+openCalendarLabel
+opt
+optionGroups
+optionIndex
+optionOffsetFromPanelTop
+optionSelectedStateSetter
+optionSelectionChanges
+optionsArray
+overlapTrigger
+overlayConfig
+overlayDir
+overlayElement
+overlayState
+pXSk
+paddingWidth
+pageIndex
+pageSize
+pageSizeOptions
+panel
+panelHeight
+panelHeightBottom
+panelHeightTop
+panelOpen
+parentRegistry
+parseFormat
+part
+patchValue
+pathMatch
+pathRadius
+pattern
+percent
+percentHeightPerTile
+percentWidth
+percentWidthPerTile
+percentage
+pixelsPerStep
+pixelsPerTick
+placeholder
+placeholderOptions
+polarToCartesian
+posComponent
+posParams
+posX
+posY
+positionChange
+positionY
+positions
+prepareEmbeddedComponents
+presentValidators
+prevActiveItem
+prevMonthLabel
+prevYearLabel
+previousPage
+previousPageLabel
+pristine
+qOEX
+qbdv
+radio
+radioGroup
+range
+ratioParts
+recognizeWith
+recognizer
+regexStr
+registerControl
+registerOnChange
+registerOnDisabledChange
+registerOnTouched
+registerOnValidatorChange
+registered
+removeAt
+removeControl
+removeFormGroup
+removed
+required
+requiredLength
+requiredPattern
+requiredTrue
+resetForm
+resolvedPromise
+resolvedPromise$X
+role
+rotation
+rotationStartPoint
+route
+row
+rowCount
+rowData
+rowDef
+rowHeightRatio
+rowIndex
+rows
+rowspan
+sameDate
+scrollBuffer
+scrollContainerHeight
+search_results_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_common__
+second
+segment
+segmentGroup
+segments
+selectValueAccessor
+selectable
+selectedChange
+selectedChanged
+selectedDisplayIndex
+selectedOptionOffset
+selectedOptions
+selectedValueChange
+setActiveItem
+setActiveStyles
+setAsyncValidators
+setColStyles
+setControl
+setDisabledState
+setErrors
+setFirstItemActive
+setFullYear
+setInactiveStyles
+setLastItemActive
+setLocale
+setNextItemActive
+setParent
+setPositionClasses
+setPreviousItemActive
+setRowStyles
+setUpControl
+setUpFormContainer
+setValidators
+short
+showDelay
+showPanel
+sin
+sizePercent
+skip
+slide
+sortButtonLabel
+sortDescriptionLabel
+sortDirectionCycle
+sortOrder
+sortSubscription
+sortable
+sortables
+span
+standalone
+startAngle
+startAt
+startHint
+startHint_X
+startPoint
+startThumbDrag
+startValue
+stateChangeExpr
+statusChanges
+stepsPerTick
+stopImmediatePropagation
+stopThumbDrag
+strategy
+strokeWidth
+supportedInputTypes
+switchMap$X
+switchToMonthViewLabel
+switchToYearViewLabel
+tabOut
+takeUntil$X
+temp
+threshold
+throwMdDialogContentAlreadyAttachedError
+throwMdMenuInvalidPositionX
+throwMdMenuInvalidPositionY
+thumbLabel
+tickInterval
+tickSize
+tile
+tileCols
+tileHeight
+tiles
+timeCubed
+timeQuad
+timestamp
+toDateString
+toFocus
+toLocaleUpperCase
+toc_service___WEBPACK_IMPORTED_MODULE_X__angular_platform_browser__
+today
+toggleGroup
+toggleGroupMultiple
+toggleSelected
+tooltipClass
+topDialog
+topSpaceAvailable
+top_menu_component_ngfactory___WEBPACK_IMPORTED_MODULE_X__angular_common__
+totalPanelHeight
+touchUi
+touched
+trackSize
+tracker
+transformValue
+triggerRect
+unimplemented
+untouched
+update
+updateActiveItemIndex
+updateActiveLink
+updateModel
+updateThumbPosition
+updateValueAndValidity
+userInjector
+vXQ/
+valid
+validate
+validator
+validators
+valueAccessor
+valueAccessors
+valueChanges
+valueFunction
+valueString
+valueToEmit
+valuesArray
+vertical
+viewChange
+viewModel
+viewToModelUpdate
+viewValue
+wasSelected
+webkitTransform
+webpackAsyncContext
+weekday
+weekdays
+withWrap
+wrapperElement
+writeValue
+xPosition
+yPosition
+year
+years
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
gkalpak
commented
Aug 1, 2017
•
edited
Loading
Uh oh!
There was an error while loading. Please reload this page.
|
@josephliccini, I totally agree that lazy-loading modules/components should be more straightforward (and decoupled from the Router - see also angular/angular-cli#4541).
I like your approach, especially with the list of components, where mine right now is just one entry per module.
TBH, this approach is specific to the angular.io app. I doubt it is a good general design pattern. In any case, this is just a mechanism to detect when to load the lazy module. Each usecase will be different and (for a reusable library) it should be easy for people to plug their own logic.
Maybe we can work to build something standard for this pattern since I've seen this request often for this functionality.
I think there are still things to figure out before moving to a stable, reusable solution (but this is were we are heading 😃). The main issue at the moment (besides figuring out why the main bundle grew instead of shrinking 😁) is making it more straight forward to use the cli or ngtools/webpack for spliting and loading the code (again see angular/angular-cli#4541).
For example, atm we have to "trick" the cli by using dummy ROUTES to indicate lazy modules 🤢
Is the mechanism you are using (similar to mine) going to be compatible with future versions of angular and the cli?
I am only using public, documented APIs, but some of them are experimental (so subject to change in future versions).
cc @IgorMinar, @hansl
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
@gkalpak thanks for an excellent and thorough response!
If the angular.io app is using this mechanism, I feel it may be safe in the short term to 'trick' the CLI as is is the only way for now. But I'm happy to work towards a future solution with other folks who are already working on this. If there's any way I can contribute towards this please let me know.
Thanks!
|
gkalpak reacted with thumbs up emoji
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
Let's fix and land this first (I am sure there are useful insights to be gained down the road 😃)
|
josephliccini reacted with thumbs up emoji
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
Hey @gkalpak I have a hypothesis where your size gains are coming from. Is this branch you are using already using the angular-devkit/build-optimizer?
If so, it may be that a code split point will incur a scope-hoisting break (described here: https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5)
It seems that UglifyJS needs all the __PURE__ functions to be in the same scope in webpack's scope hoisting. @filipesilva what do you think?
I might be wrong, but I think I am running into the same issue with code-splitting and build-optimizer
Edit: adding @hansl who will know more than I do.
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
I was working with @filipesilva in the gitter.im room, but probably better to have this discussion out so the knowledge and findings are shared, so I will repeat what I mentioned in there so all can see.
When I went into my app, and hooked up build-optimizer, no noticeable gains were occurring.
After discussing, I turned off all code-splitting, and Angular dropped 200KB
I believe the build-optimizer also works with Material code, but if a split point is added that places angular/material into a separate scope, then that explains why the symbol analysis you did shows so much Material code being included.
Furthermore, I think it explains why you needed to set global: true, because that also is a scope hoisting 'break' point. Which is why: https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/models/webpack-configs/common.ts#L119-L131 is needed
Zone.js (and maybe other places in Angular?) do WEBPACK VAR INJECTION for webpack/buildin/global.js, which will break scope hoisting and (I think) break the most optimal gains from build-optimizer
Again just my findings so far... We can move this elsewhere for discussion if needed.
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
cc @IgorMinar who is currently investigating this.
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
Heya @josephliccini, great job looking into this! Very good insight on your post.
angular/devkit#89 would address this by making webpack itself drop these modules, but it's still a ways off.
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
@filipesilva no prob. we are super interested in both lazy loading outside router (initial reason I commented on this PR) and Tree Shaking / Build Optimizer with Code Splits so we are happy to help in any way. Feel free to mail or ping on gitter any time.
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
InjectionToken not used in this file
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
@gkalpak could you please resurrect this PR now that we are on v5? I'd love to get the size numbers for my AngularConnect presentation.
|
gkalpak reacted with thumbs up emoji
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Previously, the document was shown as soon as the HTML was received, but before
the embedded components were ready (e.g. downloaded and instantiated). This
caused FOUC (Flash Of Uninstantiated Components).
This commit fixes it by preparing the new document in an off-DOM node and
swapping the nodes when the embedded components are ready.
This commit adds a simple fade-in/out animation.
Fixes angular#15629
… scroll timing
- Fix embedded ToC:
Previously, the element was added too late and was never instantiated.
- Improve ToC update timing:
Previously, the ToC was updated after the entering animation was over, which
resulted in the ToC being outdated for the duration of the animation.
- Improve destroying components timing:
Previously, the old embedded components were destroyed as soon as a
new document was requested. Even if the transition ended up never
happening (e.g. due to error while preparing the new document), the
embedded components would have been destroyed and the displayed
document would not work as expected.
Now the old embedded components are destroyed only after the new
document has been fully prepared.
- Improve scroll-to-top timing:
Previously, the page was scrolled to top after the entering animation was
over, which resulted in "jumpi-ness". Now the scrolling happens after the
leaving document has been removed and before the entering document has been
inserted.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
|
All fixed up. Applying the merge label.
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good. As a followup items I suggest that we:
- reconfigure the cli to use named chunks so that it's easier to understand the lazy loaded filenames
- start tracking the size of all chunks
- reconfigure firebase to http2 push the lazy chunk otherwise we will make the full rendering time actually slower.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
jasonaden
pushed a commit
that referenced
this pull request
Dec 8, 2017
#18428)
Previously, the document was shown as soon as the HTML was received, but before
the embedded components were ready (e.g. downloaded and instantiated). This
caused FOUC (Flash Of Uninstantiated Components).
This commit fixes it by preparing the new document in an off-DOM node and
swapping the nodes when the embedded components are ready.
PR Close #18428
jasonaden
pushed a commit
that referenced
this pull request
Dec 8, 2017
… scroll timing (#18428)
- Fix embedded ToC:
Previously, the element was added too late and was never instantiated.
- Improve ToC update timing:
Previously, the ToC was updated after the entering animation was over, which
resulted in the ToC being outdated for the duration of the animation.
- Improve destroying components timing:
Previously, the old embedded components were destroyed as soon as a
new document was requested. Even if the transition ended up never
happening (e.g. due to error while preparing the new document), the
embedded components would have been destroyed and the displayed
document would not work as expected.
Now the old embedded components are destroyed only after the new
document has been fully prepared.
- Improve scroll-to-top timing:
Previously, the page was scrolled to top after the entering animation was
over, which resulted in "jumpi-ness". Now the scrolling happens after the
leaving document has been removed and before the entering document has been
inserted.
PR Close #18428
jasonaden
pushed a commit
that referenced
this pull request
Dec 8, 2017
#18428)
Previously, the document was shown as soon as the HTML was received, but before
the embedded components were ready (e.g. downloaded and instantiated). This
caused FOUC (Flash Of Uninstantiated Components).
This commit fixes it by preparing the new document in an off-DOM node and
swapping the nodes when the embedded components are ready.
PR Close #18428
jasonaden
pushed a commit
that referenced
this pull request
Dec 8, 2017
… scroll timing (#18428)
- Fix embedded ToC:
Previously, the element was added too late and was never instantiated.
- Improve ToC update timing:
Previously, the ToC was updated after the entering animation was over, which
resulted in the ToC being outdated for the duration of the animation.
- Improve destroying components timing:
Previously, the old embedded components were destroyed as soon as a
new document was requested. Even if the transition ended up never
happening (e.g. due to error while preparing the new document), the
embedded components would have been destroyed and the displayed
document would not work as expected.
Now the old embedded components are destroyed only after the new
document has been fully prepared.
- Improve scroll-to-top timing:
Previously, the page was scrolled to top after the entering animation was
over, which resulted in "jumpi-ness". Now the scrolling happens after the
leaving document has been removed and before the entering document has been
inserted.
PR Close #18428
|
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Reviewers
2 more reviewers
Reviewers whose approvals may not affect merge requirements
Uh oh!
There was an error while loading. Please reload this page.
Assignees
No one assigned
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
|
IgorMinar
left a comment