1

I am going to use Sing App - Web & Angular 2.0 Dashboard template for our assignment but this app is not based on Angular CLI project. I have to bring this app on Angular CLI.I have tried some option but not succeeds. Please suggest the best way bring this app over Angular CLI.

Torreto
  • 61
  • 1
  • 9

1 Answers1

0

UPDATE 08/07/2017: If you are looking how to upgrade angular cli breaking changes when you migrating to a newer version check this answer

  1. Run npm uninstall -g angular-cli thennpm cache clean
  2. Run npm install -g angular-cli more details here
  3. Backup your app
  4. Go to your app folder
  5. Run ng init - this command will initialize the angular-cli app by writing some files in to your existing app. Be careful with overriding the existing files, skip the ones you are not sure, however you always can refer to your backup.
  6. Run ng new simple-app - this one you will be using as a angular-cli source of truth app.
  7. Compare files produced/required by angular-cli in your app with simple-app to see if anything gets missed during step 4.
  8. Make sure that all requited angular-cli npm modules gets installed in to your app (compare package.json files)
  9. Run npm start it might give you an errors you have to fix. You might need to go back to steps 7. and 8. here. If you mess up the packages you might need to remove node_modules folder and run npm install.
  10. You can access your app at http://localhost:4200
angularrocks.com
  • 26,767
  • 13
  • 87
  • 104
  • Following your step but CLI is hanged after "70% building modules 763/763 modules 0 active" – Torreto Feb 01 '17 at 10:19
  • it might be an issue with some of your `npm packages`, check that all your packages are compatiable with your current `angular 2.x.x` version, also check your typescript version, make sure it is `2.0.10`. You might have some of your packages verisons prefixed with `^`, so just go to `npm_modules` and check the `pakage.json` of a particular package to manually to check it's the exact version. Also you can disable packages manually one-by-one by putting comments in `app.module.ts` just to find out which is failing during the build. – angularrocks.com Feb 01 '17 at 22:32
  • Thanks ...Working Now – Torreto Feb 02 '17 at 10:22
  • Hi im trying to do the same but unable to, can u please elaborate on which files to replace and which not to? – Pratik Kelwalkar May 28 '17 at 04:33
  • @Kuncevic i tried the steps above, but i guess the cli version has changed drastically, could you provide the steps. One way i tried is using all there css and JS from ajax version of Sing App, but not everything works as required. Please do help! – Pratik Kelwalkar May 28 '17 at 04:49
  • @PratikKelwalkar did you still have an issue? If so please create a new question with all the details, errors you are getting, etc. – angularrocks.com May 29 '17 at 04:24