Ionic framework in existing Angular 4 project

Question

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

Answer 1

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

ng add @ionic/angular

Answer 2

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
  

Answer 3

Below Solution work for me: (I've added ionic in angular project with below steps)

• Step 1:

ionic init

• Step2

ng add @ionic/angular

• Step 3: (While build or run (ionic build/ ionic serve) your project you will see below error)

To resolve above error follow below steps:

1. Open angular.json file:

2. change below properties

   2.1 Before: outputPath: 'dist/<<project_name>>/browser' After: outputPath: 'www'

   2.2 Replace <<PROJECT_NAME>> with "app". For Example: Before: 'my_angular_project:build:production' AFTER: 'app:build:production'

output

In case if you are facing scrolling issue

In project_name>src>style.css add below css properties

html, body {
    overflow: auto !important;
}
body::-webkit-scrollbar {
    display: none !important;
}