升级到 angular5 时出错

Question

我正在尝试使用 npm-check-updates 将我的 angular4 应用程序升级到 angular 5。 我运行了以下三个命令：

npm install -g npm-check-updates
ncu -u
npm update

之后我尝试使用我的命令运行应用程序： npm 运行服务

我的 package.json 看起来像这样：

"scripts": {
"ng": "ng",
"start-ng": "ng serve",
"start": "node src/server/index.js",
"build": "ng build",
"build-dev": "ng build -dev",
"build-local": "ng build -dev -e local",
"build-test": "ng build -prod -e test",
"build-prod": "ng build -prod -e prod",
"serve": "ng serve -dev -e local -o",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"sme": "./node_modules/.bin/source-map-explorer"

},

我无法启动应用程序，因为我遇到了以下提到的错误：

An asset cannot be written to a location outside of the output path.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-client-app@0.0.0 serve: `ng serve -dev -e local -o`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-client-app@0.0.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional 
 logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mack\AppData\Roaming\npm-cache\_logs\2017-11-
03T12_15_23_604Z-debug.log

Answer 1

尝试运行此命令

npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-b​​rowser@next @angular/platform-b​​rowser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

Answer 2

这不是将应用程序从 Angular 2.x 或 4.x 升级到 Angular 5 的正确方法。您应该按照Angular Blog 中所述的可用步骤at this link 进行操作。在您的应用程序有多复杂？上，只需选择高级。

如果您使用angular/cli，请确保将其升级到最新版本（目前为1.5），然后，我建议您使用ng new angular5test 用它搭建一个新项目，看看它的配置文件(package.json, ...) 并将它们与您的进行比较。

我还建议您使用 meld 之类的差异工具打开当前项目和测试项目，以便快速检查配置文件中的不同之处。

在此之后，只需删除您的 node_modules 并执行 npm install。

Answer 3

可能重复：Update to Angular 5

截至目前，Angular 5 已于 2017 年 11 月 1 日正式发布， 所以对于那些想要将旧的 Angular 应用程序更新到 Angular 5 的人：

1) Angular 团队还提供了handy tool 以尽可能简单地从任何版本升级到 Angular 5。

2) 您必须将所有 Angular 包升级到 5.0 版，运行以下命令：

$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0 
---for those who are using yarn.
$ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0  

3) Angular 5 现在还依赖于 TypeScript 2.4.2 和 RxJS 5.5.2，因此您还必须升级这些包。

npm install typescript@2.4.2 --save-exact 

4) 如果您依赖日期、货币、小数或百分比管道，在 5 中您会看到格式的细微变化。对于使用除 en-us 以外的语言环境的应用程序，您需要从 @angular/common/i18n_data/locale_fr 和 registerLocaleData(local) 导入它以及可选的 locale_extended_fr。 有关管道破坏更改的更多信息： https://stackoverflow.com/a/47263949/2810015

5) 使用实现而不是对任何生命周期事件进行扩展：确保您不使用扩展 OnInit，或对任何生命周期事件使用扩展。而是使用工具。

6) 从 HttpModule 和 Http 服务切换到 HttpClientModule 和 HttpClient 服务。 HttpClient 简化了默认的人体工程学（您不再需要映射到 json），现在支持类型化的返回值和拦截器。

我试图在这里解释更多。 https://onlyforcoder.blogspot.in/2017/11/angular-5-upgrade-your-project-To-Angular5.html