Bug: WebPack compile warning became an error from 1.0.0 to 1.0.1

[johnpapa]

OS

Mac OSX Sierra 10.12.4

Versions

@angular/cli: 1.0.1
node: 6.9.1
os: darwin x64
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0

Repro steps.

When we have a javascript min file that lacks a map file, we get a warning in the console, but webpack blocks the rendering of the app in the browser with an error.

This behavior did not happen with angular cli v 1.0.0 but does now with 1.0.1

git clone https://github.com/johnpapa/angular-event-view-cli.git
cd angular-event-view-cli
npm i

Delete the file src/assets/material.min.js.map

Run ng s -o

The browser will show

It can be bypassed by adding a fake map file (which is what I have).

This can happen when legacy javascript files are inherited and used in an app. This js file was not available in npm as it was created from a custom style generator tool on a web site and handed to me.

cc // @filipesilva

[filipesilva]

This seems to be related with the upgrade from webpack-dev-server@2.3.0 (that we use in CLI 1.0.0) and webpack-dev-server@2.4.4 (used in 1.0.1). The original issue in the dev server tracker is webpack/webpack-dev-server#861.

[kulshekhar]

This seems like the cause of #6100 as well

[ahmed-musallam]

here is a hack that worked for me. Will be using it till the next version of the cli is released:

DISCLAIMERL: this is a hack and a temporary solution till a new version of angular cli is released

ONLY USE THIS IF YOU HAVE TO!

in my case, we use angular-cli index.html for development only:

add this script in index.html
this will use a mutation observer and detect when the overlay iframe is added to the page then immediately remove it.

<script>
    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var obs = new MutationObserver(function(mutations, observer) {
        for(var i=0; i<mutations.length; ++i) {
            for(var j=0; j<mutations[i].addedNodes.length; ++j) {
                // if the added node has the id "webpack-dev-server-client-overlay", reomove 
                if(mutations[i].addedNodes[j].id == "webpack-dev-server-client-overlay") {
                    mutations[i].addedNodes[j].remove();
                }
            }
        }
    });
    obs.observe(document.body, {
      childList: true
    });
  </script>

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