Question

我正在尝试使用npm-check-updates将angular4应用程序升级为角度5。我跑了三个命令：

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

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

我的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-browser @ next @ angular / platform-browser-dynamic @ next @ angular / platform-server @ next @ angular / router @ next @ angular / animations @ next --save

Answer 2

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

如果您正在使用angular/cli，请确保以最新版本（当前1.5）升级它，然后，我建议您使用ng new angular5test使用它来构建一个新项目，看看在其配置文件（package.json，...）并与您的比较。

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

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

Answer 3

可能重复：Update to Angular 5

As Now，angular 5已于2017年第一季度正式发布，因此对于那些想要将旧的角度应用程序更新为角度5的人来说：

1）Angular团队还使用handy tool从任何版本升级到角度5，尽可能简单。

2）您必须将所有角度包升级到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）如果您依赖日期，货币，小数或百分比管道，您将看到格式的微小更改。对于使用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

升级到angular5

3 个答案: