Skip to content

Moving to standalone components and "uncommon" package
Compare
Choose a tag to compare
@uatisdeproblem uatisdeproblem released this 24 Oct 08:39
· 55 commits to main since this release
v8.2.9
411fd35

Standalone components vs modules

In preparation for Angular 19, we separated the repository into two branches.

  1. The main one (rif. v8.2.x — in the future v9.x.x) mainly works with standalone components and the new Angular compiler; for this reason, when updating, most of the imports will change from modules to components; Agenda and Auth0 are the only packages that will continue working with modules. This newer version is faster, lighter and follows the latest Angular standards. You can use this version also in applications organized in modules, but we suggest refactoring to use standalone components to get the most out of it in terms of performance. HERE you can find an upgrade guide.
  2. The modules branch (rif. v8.1.x) will continue working with modules; today, there are no differences in features compared with the main branch.

What's new

  • Common. App Status can now be used via asset (to avoid complex back-end infrastructures); this is the new default and suggested method, though upgrading is optional. Follow this document for all the information and the upgrade guide.

General breaking changes

  • Common. App Status has a new default method via asset (vs via API); to continue working with the API method, operate the following change in the init.guard: 
    // before
await _appStatus.check();
// after
await _appStatus.check({ viaApi: true });
  • Common. The Ionic custom colours: dark, white, ideaToolbar and transparent now have a default value from @idea-ionic/common's global stylesheet (both for dark and light appearances). The same goes for the --ion-text-color-step-NNN and --ion-background-color-step-NNN. If the default values match your project's, you can (and should) safely remove their definition from the variables global stylesheet.

Breaking changes in moving to standalone components (v8.2.x)

To modernize and lighten @idea-ionic/common, we removed the least used/obsolete modules (not used in recent projects); to preserve the latter for compatibility with old projects, we created the @idea-ionic/uncommon, where they have been moved the following pieces:

  • General. Add to the project's AppComponent: 
    import { addIcons } from 'ionicons';
import * as icons from 'ionicons/icons';

// ...
constructor() {
  addIcons({ ...icons });
}
  • General. If you still use modules (otherwise you've done this step already), add the following provider to the list in the app.module.ts: 
    providers: [
  provideIonicAngular({ mode: 'md' }),
  //...
  • Uncommon. If your project needs components from the uncommon package, remember to install it and import translations and CSS. You will have to fix the imports of those components from @idea-ionic/common to @idea-ionic/uncommon. Finally, if you directly use in your project's code the "IDEA_COMMON" translations of components that have been moved to the uncommon package, you should rename the translation prefix to "IDEA_UNCOMMON".
  • Common. IDEAActionSheetModule must be removed from any import (especially in the app.module.ts), as it's no longer needed; you can continue using the IDEAActionSheetController as you do today (the component and service are now standalone and don't need a module).
  • Common. IDEATranslationsModule is now deprecated since its internal pipes and service are now standalone and don't need a module. You should import directly the pipes that you use (no need to import the service): label, translate, dateLocale. Nevertheless, since the module is used in every other module in our apps, we didn't remove it right away but kept it for backward compatibility.
  • Every package. All the IDEAXYZModule (except for Agenda and Auth0) must be removed from any import, and the components (or pipes) IDEAXYZComponent must be imported instead.
  • Every package. Importing the routes for IDEAXYZModule becomes (except for Agenda and Auth0): 
    // before:
loadChildren: (): Promise<any> => import('@idea-ionic/package').then(m => m.IDEAXYZModule),
// after:
loadChildren: (): Promise<any> => import('@idea-ionic/package').then(m => m.ideaXYZRoutes),
Assets 2
Loading