Issues after Upgrade Angular CLI 1.7.3 to 6.2.2

Question

I have upgraded Angular 5.2.0 project with CLI 1.7.3 to Angular 6.1.7 with CLI 6.2.2.

Now when I run ng build --prod, I am getting below error.

ERROR in Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read property 'replace' of undefined
    at normalizeBackSlashDirection (C:\workspace\appView\node_modules\webpack\lib\RequestShortener.js:16:17)
    at new RequestShortener (C:\workspace\appView\node_modules\webpack\lib\RequestShortener.js:26:15)
    at new Compiler (C:\workspace\appView\node_modules\webpack\lib\Compiler.js:189:27)
    at Compiler.createChildCompiler (C:\workspace\appView\node_modules\webpack\lib\Compiler.js:431:25)
    at Compilation.createChildCompiler (C:\workspace\appView\node_modules\webpack\lib\Compilation.js:2429:24)
    at Object.pitch (C:\workspace\appView\node_modules\mini-css-extract-plugin\dist\loader.js:78:43)

How could I fix this?

Answer 1

This happened because of a private variable declared in TS that you using in hTML

Cannot read property 'replace' of undefined

is this replace is private so not able to read in HTML file

---

Step to Update

Installing or Updating the Angular CLI to Version 6

Updating the Angular CLI is easy and it's a matter of installing the latest version from npm using the following command:

npm install -g @angular/cli 

You may need to add sudo depending on your npm configuration. Also it goes without saying that you need Node.js 8+ and NPM installed on your system to be able to install and run Angular CLI 6.

Updating Angular 5 CLI to Version 6 (Method 2) You can also uninstall the previous Angular CLI 5 version before you install the latest version using the following command:

npm uninstall -g angular-cli
npm cache clean

Next run the npm install command globally:

npm install -g @angular/cli 

Upgrading Angular 4|5 Projects

First, start by installing the Angular CLI 6 locally using the following command (Make sure you are inside your project's root folder):

npm install @angular/cli@latest

Updating Configuration Files There are many differences between Angular 4|5 and Angular 6 such as • Angular 6 uses angular.json instead of angular-cli.json. • Different versions of dependencies in package.json etc.

You can update different configuration files automatically by running the following command from the project's root folder:

ng update @angular/cli

Discovering Packages to Update Angular CLI has a new utility that allows you to automatcially analyze your project's package.json file and displays dependencies that need to be updated.

Using you terminal from the root folder of your Angular 5 project run the following command:

ng update

This is an example output from this command:

Upgrading Core Packages to Angular 6 Now you need to update the core packages/dependencies to Angular 6. Simply run the following command:

ng update @angular/core

Upgrading RxJS You can update RxJS using the ng update command:

ng update rxjs

First check your versions of installed Angular CLI and other dependencies with:

ng --version 

Answer 2

try yo change your webpack, hope this helps:

npm remove webpack

then:

npm install [email protected]

or Remove your node_modules and package-lock.json Update webpack version in package.json Run npm install again.