Registry / web-framework / ionic-angular

ionic-angular

library3.9.10jsnpmunverified

Ionic Angular, specifically version 3.9.10, represents the final major release of the Ionic Framework that was directly built and tightly coupled with Angular's architecture predominant at the time (primarily Angular 4 and 5). This package delivered a comprehensive suite of UI components and tooling for constructing hybrid mobile and progressive web applications leveraging standard web technologies like HTML, CSS, and JavaScript. It featured deep integration with Angular's service, component, and routing systems, alongside its bespoke navigation mechanism centered around `NavController`. Ionic 3 employed JIT compilation for Angular components and extensively utilized the `@IonicPage` decorator for implementing lazy loading of pages. This version of `ionic-angular` is now considered deprecated and receives no further maintenance or feature updates. It has been effectively superseded by Ionic Framework v4 and subsequent versions (e.g., v8.x), which are consumed via the `@ionic/angular` package. The contemporary Ionic Framework (currently at v8.x, as indicated by recent release notes) has evolved to offer a more framework-agnostic core, built on Web Components, providing specific integrations for Angular, React, and Vue, and fully supporting AOT compilation. The modern framework exhibits a rapid release cadence, with bug fixes often delivered bi-weekly and minor feature updates typically released monthly.

web-framework

npm install ionic-angular

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · IONIC-ANGULAR

ionic-angular

web-frameworkjavascriptv3.9.10

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

IonicModule

✓ import { IonicModule } from 'ionic-angular';

✗ import { IonicModule } from '@ionic/angular'; // Incorrect for Ionic 3

`IonicModule.forRoot(MyApp)` was used in the root `AppModule` to configure the Ionic app in v3.

NavController

✓ import { NavController } from 'ionic-angular';

✗ import { NavController } from '@ionic/angular'; // Incorrect for Ionic 3, uses Angular Router directly in v4+

The primary service for imperative navigation in Ionic 3, managing the navigation stack.

IonicPage

✓ import { IonicPage } from 'ionic-angular';

✗ import { Component } from '@angular/core'; // `@IonicPage` is a specific Ionic decorator, not standard Angular

Decorator used in Ionic 3 to enable lazy loading for pages and configure deep linking. It requires a corresponding page module.

Demonstrates a basic Ionic 3 page component using `NavController` for navigation and the `IonicPage` decorator for lazy loading, typical of Ionic v3 application structure.

import { Component } from '@angular/core'; import { NavController, IonicPage } from 'ionic-angular'; @IonicPage({ segment: 'home-page' }) @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) {} // Example of navigating to another lazy-loaded page by its string name goToAboutPage() { this.navCtrl.push('AboutPage', { param1: 'value1' }); } // Example of setting a new root page goToRootPage() { this.navCtrl.setRoot('WelcomePage'); } // An example of Ionic 3 lifecycle hook ionViewDidLoad() { console.log('HomePage did load!'); } } // In app.module.ts (simplified) // import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; // @NgModule({ // declarations: [MyApp], // imports: [IonicModule.forRoot(MyApp)], // bootstrap: [IonicApp], // entryComponents: [MyApp], // providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] // }) // export class AppModule {} // For a lazy-loaded page 'AboutPage', it would have its own about.module.ts: // import { NgModule } from '@angular/core'; // import { IonicPageModule } from 'ionic-angular'; // import { AboutPage } from './about'; // @NgModule({ // declarations: [AboutPage], // imports: [IonicPageModule.forChild(AboutPage)], // exports: [AboutPage] // }) // export class AboutPageModule {}

Debug

Known issues

breakingThe `ionic-angular` package (Ionic v3) is deprecated and has been entirely replaced by `@ionic/angular` (Ionic v4+). This transition involved a fundamental architectural shift from tightly-coupled Angular components to framework-agnostic Web Components, necessitating significant refactoring for migration.

fix

Migrate your project to the modern Ionic Framework (v4+) using the `@ionic/angular` package. This typically involves generating a new Ionic v4+ project and gradually migrating components, services, and styling. Key changes include switching from `NavController` to Angular Router, replacing `@IonicPage` lazy loading with standard Angular lazy loading, and updating component markup.

affects: >=3.9.10

breakingIonic 3's navigation system, based on `NavController`, is incompatible with Ionic 4+ which fully embraces the Angular Router. This means `navCtrl.push()` and `navCtrl.setRoot()` patterns are deprecated in the modern framework.

fix

For Ionic 4+ applications, use the Angular Router for all navigation, leveraging `ion-router-outlet` for Ionic-specific animations and stack management. Refactor `NavController` calls to `router.navigate()` or `navController.navigateForward()` (from `@ionic/angular`).

affects: >=3.9.10

breakingThe `@IonicPage` decorator, central to Ionic 3's lazy loading and deep linking, was removed in Ionic 4. Ionic 4+ adopts standard Angular routing and module-based lazy loading.

fix

Remove `@IonicPage` decorators and ensure all pages/components are imported via standard Angular modules (`NgModule`) and lazy-loaded via the Angular Router's `loadChildren` property. Each lazy-loaded page in Ionic 3 typically had its own `page.module.ts` file; in Ionic 4+, this is aligned with standard Angular module bundling.

affects: >=3.9.10

gotchaIonic 3 applications are tightly coupled with older Angular versions (typically 4 or 5) and specific TypeScript versions. Attempting to upgrade Angular or TypeScript dependencies independently can lead to compilation errors (e.g., 'Module has no exported member Renderer') due to API incompatibilities.

fix

Maintain the specific Angular, TypeScript, and `@ionic/app-scripts` versions recommended for Ionic 3.9.10 projects. If modern Angular features are required, a full migration to Ionic 4+ is necessary.

affects: >=3.9.10

gotchaIonic 3 projects often relied on Cordova for native device features. While Cordova is still supported, the Ionic team actively promotes Capacitor as the modern native runtime, offering better integration with web standards and broader framework support.

fix

When migrating or starting new projects, consider using Capacitor instead of Cordova for native functionality. Capacitor provides a more future-proof and integrated solution within the Ionic ecosystem.

affects: >=3.9.10

Errors

Common errors & fixes

ERROR Error: Uncaught (in promise): No provider for NavController!

Attempting to use `NavController` in a component or service without proper injection, or in an Ionic v4+ project where it's no longer the primary navigation mechanism.

fix

In Ionic 3, ensure `NavController` is injected in the constructor of your page components. In Ionic 4+, replace `NavController` usage with the Angular Router (`RouterModule`, `Router`, `ActivatedRoute`) for navigation, and `ion-router-outlet` for stack-based navigation.

Error: Template parse errors: 'my-custom-component' is not a known element:

This error in Ionic 3 typically means a custom component is used in a page's template but is not declared in the corresponding page's `NgModule` or the `AppModule`, especially problematic with lazy loading.

fix

Ensure that any custom components are correctly declared in an `NgModule` (e.g., a shared `ComponentsModule`) and that this module is imported into the `NgModule` of any page that uses these components. For lazy-loaded pages with `@IonicPage`, their `page.module.ts` must import modules containing shared components.

ERROR in src/app/app.module.ts(XX,YY): error TS2307: Cannot find module 'ionic-angular'

This error occurs if the `ionic-angular` package is not installed or incorrectly referenced in an Ionic 3 project. It can also appear if attempting to import from `ionic-angular` in an Ionic 4+ project, which uses `@ionic/angular` instead.

fix

For Ionic 3 projects, run `npm install ionic-angular@3.9.10 --save`. For Ionic 4+ projects, update all imports from `ionic-angular` to `@ionic/angular` and ensure `@ionic/angular` is installed.

Page has a @IonicPage decorator, but it does not have a corresponding "NgModule"

In Ionic 3, the `@IonicPage()` decorator for lazy loading requires that the page also has its own dedicated Angular module file (e.g., `home.module.ts`) which imports `IonicPageModule.forChild(HomePage)`.

fix

Ensure that every page decorated with `@IonicPage()` has an accompanying `page.module.ts` file with a properly configured `@NgModule` that imports `IonicPageModule.forChild(YourPage)`. Alternatively, if lazy loading is not desired, remove the `@IonicPage()` decorator and import the page directly into `AppModule`.

Upgrade

Version history

3.9.10latest on npm

Audit

Dependencies

@angular/corerequiredPeer dependency for Angular integration (compatible with Angular 4/5 for Ionic 3).

rxjsrequiredCommon dependency for reactive programming with Angular (RxJS v5 was common for Ionic 3).

cordova-plugin-ionic-webviewoptionalUsed for improved performance in hybrid applications on iOS and Android.

cordova-plugin-whitelistoptionalEssential Cordova plugin for enforcing a whitelist policy for navigating web pages and opening external links in hybrid apps.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/ionic-team/ionic ↗

packagehttps://www.npmjs.com/package/ionic-angular ↗

homepagehttps://ionicframework.com ↗