Angular DevTools install suggestion pop-up

[sumitarora]

trafficstars

🚀 Feature request

Angular CLI should show install devtools suggestion pop-up when running ng serve

Command (mark with an x)

• [ ] new
• [ ] build
• [x] serve
• [ ] test
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] lint
• [ ] extract-i18n
• [ ] run
• [x] config
• [ ] help
• [ ] version
• [ ] doc

Description

When a user executes ng serve on their application running in development mode, the CLI should inject a script which checks if Angular DevTools is available. If it’s not available, the script should show a pop up asking if the user wants to install the extension or never see the pop up again.

Clicking on “Install” should redirect the user to the Chrome Web Store page of Angular DevTools.

New configuration option disableDevtoolsPopup should be added to disable the functionality.

Describe the solution you'd like

Document describing the proposed solution. https://docs.google.com/document/d/e/2PACX-1vQiWzu6eqD_Ep4-Yt0yGjfY8o7n3jmYz0pC6lwceO6SR3Jz7EDLxjGkrSbCinav7ceWyk13qguGRA9Z/pub

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[sorin-davidoi]

Browser sniffing will be needed to not spam Firefox and Safari users that can't install the extension:

• https://github.com/rangle/angular-devtools/issues/785
• https://github.com/rangle/angular-devtools/issues/895

[mgechev]

@sorin-davidoi good point! We should have Firefox support soon.

[alan-agius4]

Some points to consider:

• As mentioned above this should only be done for Chrome desktop, therefore there needs to be some browser detection logic.
• When the Close button is clicked, likely a state needs to be persisted in local storage to avoid the pop-up to re-appear when the page is refresh when there are code changes due to live-reloading.
• For browser to node communication we'd can probably add a dev-server middleware to modify the angular.json. (This is actually quite involved).
• From the builder there is no easy way to access the global configuration, therefore a builder level option would be a better alternative.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[alan-agius4]

@mgechev is this something that we want to do and keep tracking on Github?