将Angular CLI 1.7.3升级到6.2.2之后的问题

时间:2018-09-17 09:51:06

标签: angular webpack angular6 production-environment angular-cli-v6

我已将使用CLI 5.2.0的Angular 1.7.3项目升级到使用CLI 6.1.7的Angular 6.2.2

现在,当我运行ng build --prod时,我遇到了错误。

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)

我该如何解决?

2 个答案:

答案 0 :(得分:0)

请尝试更改您的Webpack,希望这会有所帮助:

npm remove webpack

然后:

npm install webpack@4.11.1

或删除node_modules中的package-lock.jsonpackage.json更新Webpack版本 再次运行npm install

答案 1 :(得分:-1)

发生这种情况是因为您在hTML中使用了TS中声明的私有变量

无法读取未定义的属性“替换”

此替换是私有的,因此无法读取HTML文件


更新步骤

将Angular CLI安装或更新到版本6

更新Angular CLI很容易,这是使用以下命令从npm安装最新版本的问题:

npm install -g @angular/cli 

您可能需要添加sudo,具体取决于您的npm配置。 同样不用说,您需要在系统上安装Node.js 8+和NPM才能安装和运行Angular CLI 6。

将Angular 5 CLI更新到版本6(方法2) 您还可以使用以下命令在安装最新版本之前先卸载Angular CLI 5版本:

npm uninstall -g angular-cli
npm cache clean

下一步,全局运行npm install命令:

npm install -g @angular/cli 

升级Angular 4 | 5项目

首先,使用以下命令从本地安装Angular CLI 6(确保您位于项目的根文件夹中):

npm install @angular/cli@latest

更新配置文件 Angular 4 | 5和Angular 6之间有很多差异,例如 •Angular 6使用angular.json代替angular-cli.json。 •package.json等中的依赖关系的不同版本。

您可以通过从项目的根文件夹中运行以下命令来自动更新不同的配置文件:

ng update @angular/cli

发现要更新的软件包 Angular CLI具有一个新实用程序,可让您自动分析项目的package.json文件并显示需要更新的依赖项。

使用Angular 5项目的根文件夹中的终端,运行以下命令:

ng update

这是此命令的示例输出:

将核心软件包升级到Angular 6 现在,您需要将核心软件包/依赖项更新为Angular6。只需运行以下命令:

ng update @angular/core

升级RxJS 您可以使用ng update命令更新RxJS:

ng update rxjs

首先使用以下命令检查已安装的Angular CLI的版本和其他依赖项:

ng --version