Add option to disable Webpack Dev Server overlay

[devoto13]

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.

1. ng new myproj
2. Add "noUnusedLocals": true to tsconfig.json.
3. ng serve
4. 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.

[rixlabs]

Hi, if you use TSlint you can implement the same rule there so you can have a non blocking warning.

[devoto13]

@rixlabs Thanks, this should work in the short term. But long term would be nice to have a way to ignore some TypeScript diagnostics anyway.

[rixlabs]

@devoto13 remember that noUnusedLocals is a compiler option so it is right to consider it a blocking error. TSlint in the other hand is a code analysis tool so it can be tweaked for not complaining that loud 😉

[devoto13]

I understand it. But IMO usability is more important here than technical correctness.

Ideally I would like to have 2 TS configs: one for development with this option disabled and one for type-checking/bundling with the option enabled. Than I still get safety from TS and don't suffer during development process :)

[filipesilva]

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 palantir/tslint#1861 (comment), you're not the only one having trouble with this scenario.

[devoto13]

This issue is no longer relevant as there is no annoying overlay anymore. Error still can be observed in the Webpack ng serve output.

[angular-automatic-lock-bot]

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