CODEWITHSUNDEEP
angularcordovaionic-frameworkionic2
Nunna Suma
Nunna Suma

Reputation: 499

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

Upvotes: 8

Views: 10984

Answers (4)

Abdullah
Abdullah

Reputation: 2943

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

  • Step 1:

ionic init

enter image description here

  • Step2

ng add @ionic/angular

enter image description here

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

enter image description here

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 enter image description here

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;
}

Upvotes: 1

MadMac
MadMac

Reputation: 4871

To use Ionic components in an existing Angular project. Two easy steps:

Add schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to your module (app.module.ts) Like so:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ],
  schemas:      [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

Add a link to the CDN in your index.html

<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>

Source: https://medium.com/lacolaco-blog/use-ionic-components-as-web-components-in-angular-2eee2178d5be

Upvotes: 0

Eliran Eliassy
Eliran Eliassy

Reputation: 1600

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

ng add @ionic/angular

Upvotes: 14

stack247
stack247

Reputation: 5747

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

Upvotes: 11

Related Questions