Ionic framework in existing Angular 4 project

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

回答1:

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