error while upgrading to angular5

Question

I am trying to upgrade my angular4 app to angular 5 by using npm-check-updates. I ran below three commands:

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

After that i tried to run up the app using my command: npm run serve

My package.json looks like this:

"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"

},

I am unable to run up the app as i am getting below mentioned error:

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

score 0 · Answer 1 · answered Nov 03 '17 at 12:28

0

Try running this command

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

answered Nov 03 '17 at 12:28

Rahul Singh

19,030
11
64
86

what is the error as i have recently updated my app using this and it works fine – Rahul Singh Nov 03 '17 at 12:30
i have mentioned it in the question An asset cannot be written to a location outside of the output path. – pankaj Nov 03 '17 at 12:32
yes i get the same error. i guess its unable to understand the serve command as per error msg i got – pankaj Nov 03 '17 at 12:39
do a npm cache clean and then try and do the same – Rahul Singh Nov 03 '17 at 12:39
did try this too still same error An asset cannot be written to a location outside of the output path – pankaj Nov 03 '17 at 13:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158212/discussion-between-pankaj-and-rahul-singh). – pankaj Nov 04 '17 at 10:33

AndreaM16 · Answer 2 · 2017-11-03T12:42:44.630

This is not the correct way to upgrade your application from Angular 2.x or 4.x to Angular 5. You should follow the steps available at this link as stated in the Angular Blog. On How complex is your app? just select Advanced.

If you are using angular/cli make sure to upgrade it at its latest version (at the moment 1.5), then, I suggest you to scaffold a new project with it using ng new angular5test, take a look at its configuration files (package.json, ...) and compare them with yours.

I also suggest you to open your current project and the test one with a diff tool like meld in order to rapidly check what's different in the configuration files.

After this, just remove your node_modules and do npm install.

score 0 · Answer 3 · answered Nov 15 '17 at 08:23

Possible duplicate of : Update to Angular 5

As Now, angular 5 has been released officially on 1st Novemebr 2017, So for those who want to update your old angular applications to angular 5:

1) The Angular team has also put a handy tool to make upgrading from any version to angular 5, as simple as possible.

2) You will have to upgrade all of your angular packages to version 5.0, run the following command:

$ 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 now also depends on TypeScript 2.4.2 and RxJS 5.5.2, so you’ll have to upgrade those package as well.

npm install typescript@2.4.2 --save-exact

4) If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For applications using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local). For more information on pipes breaking changes: https://stackoverflow.com/a/47263949/2810015

5) Use of implements instead of extends withany lifecycle events : Ensure you don't use extends OnInit, or use extends with any lifecycle event. Instead use implements .

6) Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors.

I have tried to explain more here. https://onlyforcoder.blogspot.in/2017/11/angular-5-upgrade-your-project-To-Angular5.html

error while upgrading to angular5

3 Answers3