Add option to disable Webpack Dev Server overlay

Bug Report or Feature Request (mark with an `x`)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

@angular/cli: 1.3.2 node: 8.4.0 os: darwin x64 @angular/cli: 1.3.2 @angular/common: 4.3.6 @angular/compiler: 4.3.6 @angular/compiler-cli: 4.3.6 @angular/core: 4.3.6 @angular/forms: 4.3.6 @angular/http: 4.3.6 @angular/language-service: 4.3.6 @angular/platform-browser: 4.3.6 @angular/platform-browser-dynamic: 4.3.6 @angular/router: 4.3.6

Repro steps.

ng new myproj
Add "noUnusedLocals": true to tsconfig.json.
ng serve
Add unused local variable in the AppComponent.

Current functionality.

Webpack Dev Server overlay is covering whole screen yelling about an error, when there is no reason for this to happen (example). And it is impossible either disable it completely or disable for some specific diagnostic messages. It is always enabled in development target.

Desired functionality.

There should be an option to either disable overlay completely or a way to ignore some of the TypeScript diagnostics. For example awesome-typescript-loader allows to do it by adding ignoreDiagnostics in the tsconfig.json.

Mention any other details that might be useful.

This overlay is very annoying during development, when you remove a line of code and then have to go and remove import of declaration of the variable (which became unused) to see the result in the browser.

UPDATE

Just noticed that compilation fails completely in this case. Guess than there should be a way to either ignore some diagnostics in the development target or use custom tsconfig.json for development target.

Issue Analytics

State:
Created 6 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

filipesilvacommented, Oct 25, 2017

Like @rixlabs said noUnusedLocals really is meant to fail builds, so if you put it in your tsconfig then the build really should fail…

I agree using that using that flag can be awkward but it’s not something an error we’re going to specialcase/override because you are explicitly setting it. The solution I’ve used in other projects is to use tslint for those rules. You can also set a second app that uses the other tsconfig.

You can read more about this topic in https://github.com/palantir/tslint/issues/1861#issuecomment-280690456, you’re not the only one having trouble with this scenario.

0reactions

angular-automatic-lock-bot[bot]commented, Sep 9, 2019

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.}

Top Results From Across the Web

DevServer - webpack

Tell dev-server to enable/disable magic HTML routes (routes corresponding to your webpack output, for example /main for main.js ). webpack.config.js module.

Consider using webpack-dev-server overlay option ... - GitLab

Since we're already on the latest version, we can enable this with by simply adding this to our webpack.config.js : config.devServer = {...

How can I disable the overlay for warnings in a React app?

create -react-app generates a separate Webpack configuration for use with the dev server, so you need to use the devServer function, like so:...

webpack-dev-server - npm

--no-client-overlay-errors Disables the full-screen overlay in the browser when there are compiler errors.

DevServer - webpack

If you're using dev-server through the Node.js API, the options in devServer will be ignored. Pass the options as a second parameter instead:...