Ionic framework in existing Angular 4 project

2020-02-29 05:24发布

I'm working in angular project with own CSS which is almost done now i want to use ionic framework with cordova in my project. I tried but it is not working .

Is there any way and step by step process to add ionic framework in my existing Angular 4 project.

can i have any link or guidance to reach my goal.

Thanks in advance

2条回答
劳资没心,怎么记你
2楼-- · 2020-02-29 06:15

I have documented my approach here:

https://stack247.wordpress.com/2019/03/11/integrate-ionic-in-existing-angular-project/

This applies to

  • Angular 7.
  • Ionic 5.

Essentially, these are the steps:

The step includes creating a new project using Ionic CLI, I'm going to refer it as Ionic project while my original Angular project as, well, Angular project.

  • In your Angular project, update all npm packages, to the latest major if you can. This is to avoid version conflict with Ionic project's npm packages.
  • Start a new Ionic blank project.
    ionic start project-name blank
    
  • Update all npm packages in the newly created Ionic project.
  • Copy ionic.config.json from Ionic project to Angular project.
  • Copy angular.json from Ionic project to Angular project.
    • If you have specifically changed anything in your angular.json, make that necessary changes in the Angular project after the copy.
    • Ionic uses SCSS for style sheet by default, so if you are not using SCSS, make sure to copy settings under projects/app/architect/**/options/styles from Angular project's angular.json prior to copy.
  • Copy package.json from Ionic project to Angular project.
    • If you have specifically changed anything in your package.json (npm scripts, etc), make that necessary changes in the Angular project after the copy.
    • Combine the npm packages from both projects setting under dependencies and devDependencies.
  • Combine .gitignore files from both projects, if you are using Git source control.
  • In Angular project, delete package-lock.json file and node_modules folder. These should be located in root of the project.
  • In Angular project, run npm install command.
    npm install
    
  • Test and make sure everything runs.
    // Test run with Ionic
    ionic serve
    // Test run with Angular
    ng serve --open
    
  • If you want to prepare your project for Cordova, runs the following command. Note that environment setup is required. Please refer to reference section for more details.
    // For Android
    ionic cordova prepare android
    // For iOS
    //ionic cordova prepare ios
    
查看更多
虎瘦雄心在
3楼-- · 2020-02-29 06:23

There is a schematic command for adding ionic to an existing angular project:

ng add @ionic/angular

查看更多
登录 后发表回答