I’ve been able to migrate the tabs starter to standalone components but trying to bootstrap a standalone appComponent using bootstrapApplication causes an error. Repo ‘bootstrap’ branch shows error.
Error:
Cannot read properties of undefined (reading ‘ɵcmp’)
TypeError: Cannot read properties of undefined (reading ‘ɵcmp’)
at getComponentDef (core.mjs:1133:16)
at ViewContainerRef.createComponent (core.mjs:23536:31)
at IonRouterOutlet.activateWith (ionic-angular.js:3437:57)
at ActivateRoutes.activateRoutes (router.mjs:2749:40)
at router.mjs:2698:18
at Array.forEach ()
at ActivateRoutes.activateChildRoutes (router.mjs:2697:29)
at ActivateRoutes.activate (router.mjs:2611:14)
at MapSubscriber.project (router.mjs:2596:10)
at MapSubscriber._next (map.js:29:35)
at resolvePromise (zone.js:1262:35)
at resolvePromise (zone.js:1216:21)
at zone.js:1329:21
at _ZoneDelegate.invokeTask (zone.js:443:35)
at Object.onInvokeTask (core.mjs:26501:33)
at _ZoneDelegate.invokeTask (zone.js:442:64)
at Zone.runTask (zone.js:214:51)
at drainMicroTaskQueue (zone.js:632:39)
I am trying to understand what you are saying
When you say: migrate to standalone, you mean into a webcompoment using Angular Elements?
And when you say bootstrapp a standalone component, do you that earlier component?
apologies. I’m using Angular 14 and Ionic 6.1.9. I’ve updated the tab pages in the starter to use angular standalone components. the repos main branch shows this working.
normally in main.ts you would call something like this…
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
what i’m trying to do is use boostrapApplication and pass it a standalone app component instead. such as…
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(
IonicModule.forRoot(),
RouterModule.forRoot([
{
path: ‘’,
loadComponent: () =>
import(’./app/tabs/tabs.page’).then((m) => m.TabsPage),
loadChildren: () =>
import(’./app/tabs/tabs.routing’).then((m) => m.routes),
},
]),
HttpClientModule
),
],
}).catch((err) => console.error(err));
Ok
So I cannot tell from experience as this is cutting edge tech
Have you tried with a more simple component as you are now using tabs which consists typically of other stuff
So a simple hello-world standalone component?
Ps I am not sure if ionic and angular 14 have been checked ?