<a name="14.0.0-next.1"></a>

14.0.0-next.1 (2022-02-02)

Deprecations

common

• The ngModuleFactory input of the NgComponentOutlet directive is deprecated in favor of a newly added ngModule input. The ngModule input accepts references to the NgModule class directly, without the need to resolve module factory first. ### animations | Commit | Description | | -- | -- | | | Remove generic objects in favor of Maps (#44482) | | | remove no longer needed CssKeyframes classes (#44903) | ### common | Commit | Description | | -- | -- | | | support NgModule as an input to the NgComponentOutlet (#44815) | | | include query parameters for open HTTP requests in verify (#44917) | ### compiler-cli | Commit | Description | | -- | -- | | | accept nullish coalescing operator for any and unknown types (#44862) | | | enable nullish coalescing check only with strictNullChecks (#44862) | | | ensure casing of logical paths is preserved (#44798) | ### core | Commit | Description | | -- | -- | | | Add back support for namespace URIs in createElement of dom renderer (#44914) | | | flush delayed scoping queue while setting up TestBed (#44814) | ### devtools | Commit | Description | | -- | -- | | | add a demo pipe with ngOnDestroy | | | add animations in the bar chart | | | add dark mode styling to flame graph rectangle strokes | | | add demo app which does not use zones | | | add detected application angular version to top right next to tabs (rangle/angular-devtools#4) | | | add duration field to the ProfilerFrame | | | add extra information to popups | | | add filtering functionality in the profiler | | | add functionality for visualizing change detection | | | add ivy check | | | Add margin to tree nodes so that they are not stacked on each other directly | | | add MIT license (rangle/angular-devtools#65) | | | add multiple frame selection pointers | | | add opening instructions | | | add overflow-x auto to breadcrumbs tab | | | add selection of multiple frames with shift | | | add support for Angular elements | | | add tooltip in bar chart | | | add top-level element to allow zoom out with multi roots | | | add versioning to import/export functionality | | | add view source button to properties view tab (rangle/angular-devtools#42) | | | added cypress to run e2e tests (rangle/angular-devtools#45) | | | added prettier for formatting code on pre-commit (rangle/angular-devtools#50) | | | adding bar chart for timeline | | | adding bar graph details section | | | adding bargraph formatter | | | adding bargraph visualization to timeline | | | adding bargraph visualizer | | | adding icon popups displaying app status (rangle/angular-devtools#70) | | | adding info popup (rangle/angular-devtools#739) | | | adding material toolbar | | | adding parent hierarchy list view | | | adding parent hierarchy to bar graph formater | | | Adding parent nodes for selected component (rangle/angular-devtools#34) | | | adding piechart for profiler | | | adding router tree | | | adding theme service | | | adding theme toggle button | | | adding tooltips for icons | | | Allow ctrl/meta click to select/deselect multiple frames | | | allow user to click on component properties of type HTMLElement to inspect the element in the browser | | | allow user to click on function properties to inspect that function in the chrome devtools (rangle/angular-devtools#234) | | | allow user to edit props | | | allow user to view change detection strategy and view encapsulation of a component in the property explorer (rangle/angular-devtools#257) | | | apply style to console reference keys displayed on nodes | | | Applying consistent styling | | | change background colour to align with chrome devtools | | | change flamegraph component input to have it be responsive by default | | | change trimComponents name; always include nativeElement in buildDirectiveForest | | | clicking on element with component inspector enabled will select that component in the directive explorer | | | create ConsoleReferenceNode interface to fix typing issues in selected-component.ts | | | create copy to clipboard button for properties view wrapper (rangle/angular-devtools#38) | | | create message bus event for component selection | | | create scroll buttons for breadcrumb feature | | | create seperate property data sources for inputs/outputs/state | | | create shared-utils project library to house functions and classes that can be used by any other project | | | create webtree graph formatter and pass the formatted data through to the web tree graph visualizer | | | decrease width of split pane to match the rest of the application | | | detect directives added to non-elements | | | disable devtools for production applications | | | display latest commit SHA in application (rangle/angular-devtools#243) | | | don't show comment nodes by default | | | expand node ancestors on component inspection | | | fix component styling for tooltip; add overflow to tree wrapper; truncate long tree labels | | | focus search input when icon is clicked | | | hide router tree if router config isn't found | | | highlight element when hovering the breadcrumbs | | | implement "force refresh" when the user presses the refresh button | | | Implement basic configuration UI and use it to toggle Timing API | | | implement component selection functionality for $ng0 - $ng4 similarly to how chrome devtools does with html elements | | | Implement Component/Directive Search (rangle/angular-devtools#25) | | | implement dark mode styling for loading screen | | | implement drag to scroll functionality to improve frame navigation (rangle/angular-devtools#716) | | | implement import/export json functionality for profiler | | | implement input/output/state preview functionality with the reworked property explorer | | | implement invisible gutter technique from chrome devtools | | | implement material expansion panel with drag functionality for each property tree | | | implement negation in the filtering query language | | | implement output profiling | | | implement profiler with new framework APIs | | | implement proper diffing in the explorer | | | implement reload message bus event that calls window.location.reload inside of the dev tools | | | Implement selected component shortcut similar to Augury to select the component host | | | implement split pane so that user can resize properties view tab (rangle/angular-devtools#60) | | | implement time travel player functionality (rangle/angular-devtools#46) | | | improve output formatting | | | increase gutter width to 2.5px | | | inform user that devtools has limited functionality in production mode | | | install webtree graph library | | | introduce directive records | | | introduce streamed visualization of the profiling data | | | introduce timing API support | | | introduce virtual scrolling in directive explorer | | | keep unique index for all components and directives | | | make devtools fail elegantly for view engine apps | | | make tab menu action button icons smaller | | | making small frames clickable | | | merge frames in the range | | | migrate devtools and demo app to scss for styling | | | move highlighter placement - no more overlap (rangle/angular-devtools#451) | | | new icon & active status | | | only show console reference for the currently selected element to reduce noise | | | open expansion panels by default; apply styling to expansion header | | | optionally show change detection duration only when run | | | pass each datasource through to it's own material tree component | | | pass input/output data through from application to devtools UI | | | patch life cycle hooks | | | remove timeout and add new loading/error state message (rangle/angular-devtools#291) | | | renaming app component to app todo component (rangle/angular-devtools#195) | | | renaming timeline graph options | | | reorient split pane when screen width goes under 500 px | | | rerender tree on resize to keep tree within view | | | scroll profiler frame info tab independently of active visualizer | | | select dom element on double click of node (rangle/angular-devtools#51) | | | set showNode option to show most nodes in the treegraph (rangle/angular-devtools#219) | | | setting bar graph as default option | | | show frame drop in the timeline (rangle/angular-devtools#62) | | | show the console reference key on each selected element | | | show timeline bars color dependant on the framerate | | | simplify component styling for tabs component | | | sort directive properties by name | | | split apart visualizing views; create new components for each visualizer component | | | support trusted types for script injection | | | synchronizing highlight between source application and component in presentation tree (rangle/angular-devtools#35) | | | themeing breadcrums | | | update to latest flamegraph | | | updating bargraph formatter | | | updating record formatter to get directive values | | | updating to karma-coverage | | | updating to karma-coverage and setting clear context to true | | | use flamechart with a better layout | | | use flamegraph in timeline and aggregated view | | | use flamegraph in timeline and aggregated view | | | use tag names | | | use the user preferred color scheme | | | use window object instead of getWindow method for setting a console reference | | | wrap entire row in div and bind click event to the div (rangle/angular-devtools#2) | | | add back css that removed after a rebase | | | add d3 and semver dsl umd modules to karma tests for ng-devtools and ng-devtools-backend | | | added more padding to treegraph | | | adding coverage reportor to gitignore | | | align theme to other Chrome DevTools | | | align with latest changes and keep consistent frame tree | | | alignment issue in idle profiler | | | allow arrow key events to fire when focusing on an input | | | allow deleting property when editing | | | breadcrumb algorithm when there is no parent available | | | broken virtual scroll layout on resize | | | bump up the split pane gutter size for the profiler split pane and hide the icon | | | bump webpack version and fix breaking change | | | call change tab helper when tab changes as a result of the inspector being selected | | | catch selection edge cases for selecting the same node and selecting a node already in the array | | | change colors (rangle/angular-devtools#453) | | | change the isIvy detection | | | check if node.children is undefined before trying to convert it into an array (ex. node is a text node) | | | check if node.nativeelement is an instance of an HTMLElement before calling ng.getComponent on it (rangle/angular-devtools#93) | | | color and font sizes and other visuals | | | compatibility issues with google3 | | | consider change detection completed after a microtask | | | consistent console reference hint styles with chrome devtools | | | consistent styles across shell dev and chrome | | | contrast on labels and links (rangle/angular-devtools#708) | | | debounce dirty notifications and ignore vendorChunk (rangle/angular-devtools#264) | | | delayed angular detection with app_initializer (rangle/angular-devtools#827) | | | disable animations when running e2e testing to fix flaky tests | | | disable critical css inlining because of csp | | | disable router tree tab | | | distinguish between items with and without children | | | do not attempt to initialize devtools if not ivy | | | do not expand HTML Comments and preserve state for selected nodes | | | do not highlight nodes during initial rendering | | | do not refresh the ui unless there are updates | | | doc links icon (rangle/angular-devtools#742) | | | don't access service prop unnecessarily | | | don't collide with the default runtime function (rangle/angular-devtools#6) | | | dont leak once subscriptions | | | dont leak flat and indexed nodes | | | drag and drop when selecting input; fix: console warning on update state error (rangle/angular-devtools#205) | | | enable the profiler even without zone available | | | ensure compatibility with angular v10.0.0+ | | | ensure that the dark mode toggle button reflects the current theme on load | | | fix all remaining component tab color issues (rangle/angular-devtools#458) | | | fix bug in component tree observer that prevented nested added nodes from having their ids set properly | | | fix case where the state of the change detection checkbox in the flamegraph is lost when the component is destroyed | | | fix constrast on navigation tabs; make light mode icons the same colour as the text (rangle/angular-devtools#667) | | | fix edge case where only one item is profiled and where no items are profiled | | | fix ExpressionChangedAfterItHasBeenCheckedError by manually triggering change detection when parents are set in directive explorer | | | fix initialization of non-supported applications (rangle/angular-devtools#43) | | | fix issue that prevented booleans from being parsed properly | | | fix issue where last node would be hidden behind breadcrumbs | | | fix issues in message bus and watch | | | fix regression that broke assignment of selected node to $ng0 variable (rangle/angular-devtools#89) | | | fix regression that broke node expansion (rangle/angular-devtools#88) | | | fix tests and leave todo related to possible typing refactor | | | fix typo in file names (rangle/angular-devtools#91) | | | fixed height for controls on flame graph and save button (rangle/angular-devtools#470) | | | fixing code review comments | | | fixing the bar graph height issue | | | flicker properties when update selected node | | | frame colors indicate framerate good vs. bad | | | get all the property names including getters | | | get ng debug object whenever it is required through a function to prevent an issue where it would be set to undefined on page refresh | | | get proper change detection trigger | | | get the lifecycle hook name using a more robust approach | | | get the lview from the instance context | | | give breadcrumb container a z-index higher than 1 to prevent an issue where scrolling on the x-axis may inadvertently scroll the properties view tab | | | handle corner cases when a component aims to replace an existing one | | | handle lifecycle hooks of only components & directives | | | handle ngFor and ngIf contexts in the profiler | | | highlighter should only show the hovered component's name (#44863) | | | highlighting of newly added nodes | | | implement shutdown event to prevent memory leak when reopening devtools (rangle/angular-devtools#53) | | | improve dark mode styles when no ivy detected | | | improve the styles in the meta popup | | | incorrect input names | | | increase the width of the filter | | | index new nodes before firing callbacks to fix issue where some callbacks rely on the newly indexed nodes | | | initialization and popup logic | | | layout when visualizing the profiling data | | | links to docs in property view tab | | | linting errors to prevent ci failing (rangle/angular-devtools#469) | | | lview parsing when trying to get data from an option | | | make edit functionality compatible with new getDirectiveForest api | | | make flamegraph scrollable | | | make sure we are not reference dependant | | | make sure we dont access position of an undefined parent | | | make sure we dont fail on null elements | | | make sure we invoke getComponent with an element | | | make sure we update the property explorer on state change (rangle/angular-devtools#821) | | | make the bar chart scrollable | | | names of the tiles in the profiler graph | | | node selection with collapsed nodes | | | nowrap for the material tree items | | | pass in root element ng context as an LView instead of as a context object | | | pass property updates to the correct data sources | | | preserve proper nesting in flattened node lists | | | preserve the expansion status of moved items | | | prevent circular dependency between directive-property-resolver and property-data-source | | | prevent default behaviour before calculating new scroll position to fix bug when traversing directive forest with arrow keys (rangle/angular-devtools#213) | | | prevent directive forest hooks from being initiated in production applications | | | prevent link in property view body from closing panel header when clicked (rangle/angular-devtools#714) | | | prevent mat button css from leaking out of property view header (rangle/angular-devtools#856) | | | prevent ng-deep component styling from leaking to child components | | | prevent node overwriting | | | prevent race condition between getting nested props and refresh | | | proper alignment of non-expandable props | | | proper calculation of the lifecycle hook duration | | | proper dev mode detection when app compiled with closure | | | proper diffing and expansion of new items | | | proper diffing with unique ids | | | proper timing for operations | | | proper tracking without overwriting previous refs | | | proper typings in shell-chrome for strictNullChecks | | | properly emit shutdown event on cleanup and call change detector ref to update ui into loading state | | | recognize app after reopening devtools | | | refresh & reinitialize on navigation | | | remove forgotten markers causing slowdown | | | remove jumping when adding nodes | | | remove obsolete hover css that is causing contrast issues in dark mode and set the header height to match the new search filter height for consistency | | | remove redundant scrollbar | | | remove relative positioning from profiler content; makes split pane gutter full height for profile details | | | remove runOutsideAngular wrapper on mouse move event | | | remove tree node highlight when a component is selected from the highlighter | | | remove tree wrapper height css to let the height default to how many nodes are being displayed (rangle/angular-devtools#244) | | | remove useless scrollbar from the demo app | | | rename state to properties (rangle/angular-devtools#682) | | | renaming master to main | | | reselect node if it changes position after change detection | | | reset the timeline component when discarding a recording | | | resize dark mode and cursor | | | set a min width for the property view split tab to prevents styling issues when tab is too small | | | set extension icon and popup only on DevTools background message | | | set more accurate search label | | | set production flag to false in dev environment | | | set proper directive item and explorer height | | | set proper height of the tree nodes | | | set proper icon sizes | | | set proper types of the props in the clipboard copy feature | | | setting default page for extension | | | setting min width for input editor and allowing for rendering space | | | show date type property value in preview (#44864) | | | show elements nested in app elements | | | show new items using a class | | | show not-angular popup for non-angular apps | | | show proper lifecycle hook names | | | show properly dynamically inserted content with DOM APIs (rangle/angular-devtools#828) | | | show report for replaced nodes in the same tile and get lifecycle hook name | | | skip node if there is no associated TViewData (rangle/angular-devtools#804) | | | small improvements to Properties Details view (rangle/angular-devtools#455) | | | sort array indexes in ascending order | | | stop filter input from scrolling with the component forest (rangle/angular-devtools#87) | | | Style Changes to Profiler, general color scheme, controls & responsiveness (rangle/angular-devtools#468) | | | style of editor input | | | Support Electron (rangle/angular-devtools#849) | | | theming of profiler tab | | | time label on profiler | | | treemap hover colors highlight selection | | | ui flicker bug (rangle/angular-devtools#49) | | | unsubscribe from file upload Subscription instead of Subject | | | update the prod mode detection to also consider VE apps | | | update typing of differ objects to fit the new contract of TrackByFunction (rangle/angular-devtools#862) | | | updating page design | | | use cascading view child/children to fix regression caused by refactor (rangle/angular-devtools#92) | | | use the aio docs link rather than github | | | use theming in chrome extension | | | use visible gutter size in calculation for split area flex basis' (rangle/angular-devtools#857) | | | wait 500ms before checking the tree for a new node | | | webtree sizing (rangle/angular-devtools#203) | | | wrong label in the profiler | | | cache timeline frames so that the timetraveler doesn't have to process the same frame multiple times | | | disable flame graph animations | | | do not index on mutation of inspector | | | don't reformat the same record multiple times | | | faster bar chart formatting | | | prevent directive forest from building twice every time a node is selected in the directive explorer | | | prevent highlighter from rebuilding the directive forest every time a node is hovered over in the directive forest | | | stream records incrementally so that they do not get sent all at once | | | switch to on push change detection to optimize profiler; rename variable for readability; null coalesce profileRecords to fix bug when profile profiles no changes (rangle/angular-devtools#3) | | | use WeakMap to reduce memory usage when memoizing | ### devtools tabs | Commit | Description | | -- | -- | | | stop scroll occuring at tabs level | ### forms | Commit | Description | | -- | -- | | | support negative indices in FormArray methods. (#44848) | | | ensure OnPush ancestors are marked dirty when the promise resolves (#44886) | | | Update the typed forms migration schematic to find all files. (#44881) | | | Update the typed forms migration to use FormArray<T> instead of FormArray<T[]>. (#44933) | ### router | Commit | Description | | -- | -- | | | Add Route.title with a configurable TitleStrategy (#43307) | ## Special Thanks Alan, Alan Agius, AleksanderBodurri, Amir Rustamzadeh, Andrew Kushnir, Andrew Scott, Aristeidis Bampakos, Arjen, Daan De Smedt, Daniel Díaz, David Shevitz, Doug Parker, Dylan Hunn, Emma Twersky, Esteban Gehring, George Kalpakas, Jessica Janiuk, JimMorrison723, JoostK, Juri Strumpflohner, Lee Robinson, Maarten Tibau, Mark Whitfeld, Minko Gechev, Paul Gschwendtner, Ricardo Mattiazzi Baumgartner, Sumit Arora, Theodore Brown, arturovt, dario-piotrowicz, fru2, kamikopi, markostanimirovic, markwhitfeld, mgechev, renovate[bot] and twerske