Using Custom Components on Multiple Pages in Ionic

[@nirliptgaur]

Just another Thank You message among the above millions. I am teaching ionic 4 to some interns and your videos give them clarity. I just love the way you first take a normal approach, and then when the error pops up, like it does for us, you show the actual way things need to be coded. Excellent Effort. Hope Ionic Team hires you :P

[@gianlucacau5907]

You just saved me a lot of time that would have been wasted! Thanks man, speaking of Ionic you sure are the best!

[@simonsutherland15]

I was going around in circles, reading and re-reading documentation & examples (mostly of non-lazy loaded components) No i not only know what to do, but _why_ This was a life saver!

[@muhammadshahrez2130]

Thank God I found you at the right time. I was banging my head figuring out what was wrong with my component and you litterally saved me from a nightmare.

[@denisgarcia01]

Thanks. The main fix for me was the explanation about the lazy loading not loading components. That made my day. Thank you!

[@sergijonama1748]

Nice tutorial thanks! In Ionic 4 you should add some extra imports to avoid template parse errors. import { SyncIconComponent } from './sync-icon/sync-icon.component'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; @NgModule({ imports: [CommonModule, IonicModule],

[@acarolsfs]

Thanks man! You saved my life

[@oswaldkit]

Thanks man! You saved my life too.

[@buraksimsek2471]

Thanks man! You saved my life too. By the way, I encountered this in Ionic 6.

[@f1234411231]

Thanks man! You saved my life too.

[@tendaikatsande7578]

You saved my life, I had to also add other modules, like ionicModule, RoutingMoudle to the shared module

[@Iam_AndersonP]

Grat tutorial. Another thing in cosideration is that the ionic cli has a more easy way to crete a shared module. You just hast to run the command ionic g module shared (or wharever name you want) and it will create the module with the necesary structure you need

[@MurilloVieira]

Man, you're just awesome. I've spent a lot of time trying to figure out how normal angular components should work for ionic 4 and you've just lit my way. Thanks a lot!!

[@olumideayeni143]

Josh!!!..... Thank you, you really saved my day with this... I am so glad that i found this at the right now.

[@sapsapproductivity]

Thanks Joshua, Well explained.

[@doronsayar1587]

Thanks man, you saved me from a mental breakdown!

[@muzz88]

Nice one, I was convinced I was never going to use shared components in ionic until this. Thanks

[@shaunbrassell68]

Great video - taking one through the failure process was key to me learning, excellent job!

[@zsearthas]

from 7:09 solution starts, skip before

[@izzatullokanoatov370]

I will take off my hat in front of your tutorials. Best of the best.

[@AcquahEmmanuelBaiden]

Thanks Joshua. This was very useful

[@Arudion]

Additional: - If you want to use nested components, you have to add them to the entryComponents of the ComponentsModule - If you want to use Ionic Components, you have to add IonicModule to the imports of the ComponentsModule

[@babyamg]

Example: const tmpModule = NgModule({ declarations: [tmpCmp], imports:[IonicModule], entryComponents: [tmpCmp], })(class {});

[@MarioShtika]

​and also if you want to use things like `*ngIf` you should import `BrowserModule`, but because this is already imported on app.module.ts you should import `CommonModule` instead `imports: [IonicModule, CommonModule],`

[@karlzone2]

I should have read your comment @Mario, god damn. But yeah, if you wanna use NgFor, NgIf, then do :import { CommonModule } from '@angular/common';

[@mohammadhadiemami2670]

you saved 2 hours of my time!! THANKS

[@allan9537]

Thank you so much! Saved my day!!

[@sathvikakopalli2574]

That was really a great explanation you have helped me a lot bro 🙌🙌 Hope you continue doing lectures like these 🥺

[@DavidHodges47]

This really solved my problem. Most of the other results from Google searching were wrong about this, possibly due to changes in versions of ionic or angular. I do wish that you could make the source code for this one example available on github or something similar. Also, when you use "ionic generate module", it generates a "spec" file, which throws errors unless you delete it.

[@rodrigomgsys]

Great tutorial, It has worked perfectly for me. I was facing this error when tried to load a custom component in a PageModule. Thank you very much for sharing. :-)

[@zhoobinjalili5946]

Great, helped me a lot! Thanks Joshua!

[@grab0wski]

Thank you Joshua Morony, you saved my day, I spended amount of time this morning to resolv this issue =))

[@crassProgrammer]

This was what exactly I wanted. Thankyou very much!!

[@kyatar]

you just made my day, thanks for the awesome explanation

[@rudikatzer1606]

Amazing. Works for me in 2022

[@lesetjalese7462]

Thanks this really saved my day.

[@emyprinso]

./src/app/home/home.module.ts 19:31-39 "export 'HomePage' was not found in './home.page' that is the error I am getting, if I can get your source code and use it as a boilerplate for my app I will appreciate it

[@mekbeb]

Thanks Josh, nice quick and easy explanation. God bless!

[@Garciia]

Hey still useful, I've been trying to get into it and this clear my head around the subject, ty

[@yorlandIII]

Amazing!! thank you for the detailed explanation!!

[@ThukuWakogi]

You saved a life sir

[@argieabedejos760]

Thanks man. This saves my day.

[@vp3275]

Great quality, you deserve mor views :) Thanks !

[@VinayKumar-bl2ob]

Thanks a lot, you are great at explaining👍👍👍

[@jamesdavidwyers9110]

1:01 Glad I'm not the only one with this problem....😅

[@jacobsultd]

Thank you Joshua. Saved me..

[@Sandeep-vr8ri]

nice and simple , thanks bro.

Great tutorial! If you're thinking about a new one, can you please make a tutorial about importing JavaScript or npm packages to Ionic 4? The other day I needed to import Bson to my Ionic 4 project but I had a bunch of errors and I quit.

[@videodr.9402]

Thanks, Joshua Morony, you saved my day :)

[@youngwise14]

Thanks man! This was right on time.

[@taha5049]

Thanks Good Lad you Saved my day!!

[@sebasA]

Hi thanks for the video, Im using the Ionic side-bar template and in a page I desided to add a component just like you with a module, the problem is the sidebar cant be slide if mi finger pass trough the component. For fix it I just reduced the component area to slide the sidebar but the sidebar looks lagy (just happen in the page where I added the component).

[@aliciajanssen6548]

Thank you! The instructions are fantastic!

[@magicalkunal]

Thanks. it helped me a lot.

[@bankoleemmanuel1088]

Thanks Joshua

[@jeffcordova]

Josh! Thank you for this! Thank you for saving me again. :)

[@fcsalmeida]

Thank you! You are the man! It saved me from a big problem !!

Thanks for the video!

[@psv6009]

Thanks too much your video, you solved ' 2 modules' for me.

[@joeporsche1767]

You just save my day. Thank!!!

[@sarath9077]

Thank you so much Joshua. I have one question though. System throws error when I use ion elements like ion-item etc inside my custom component. How do we solve that issue?

[@sarath9077]

Update: It got fixed by adding CUSTOM_ELEMENTS_SCHEMA in the schema of component.module.ts. schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

[@karlzone2]

Sorry, I know this is five months late, but do you know why this happens? I used loads of ion elements, but didn't get this error, though I saw someone on a forum suggesting your solution. What does CUSTOM_ELEMENTS_SCHEMA do? It's clearly important (or at least it used to be?)?!

[@RahulYadav-hs2un]

Nice Video

[@chularansifernando5]

Thank you, I also need to know how to use one page on multiple pages in ionic 4? Could you please add another video for that.

[@walaazahran29]

thanks you helped me so much !

[@rStudius]

Thanks a lot! Helped me so muuuch

[@ginil]

in the ionic 4 conference app, there aren't any components, just pages. Is it possible to include a page in another page, just like a component?

[@WajahathKhan04]

Thanks Man, 1000 Likes :) You just give me the result of my struggling 5 hrs

[@jesusdcg7583]

Well explained, thank you

[@sukdipkar8876]

how can use the component.css file in the page?

[@yccodei]

Thanks a lot for your help

[@tpamarasekera]

Great tutorial! !!!!!

[@Hicham_SaAh]

thank you , i have one question please , if i have 2 folders one called example same what you made and the second called example_2 but i want to show example_2 in the home page and example into detail page . is it possible ? and how it will be ! thanks in advance ...

[@JoshuaMorony]

So you want two separate components, one goes on the home page one goes on the detail page? You could do a variety of things. If you are only using the components on one page each you could just add them as a declaration to that pages module and ignore creating a components module altogether. You could create a single shared component module (like in the video) that includes both of the components, and then include that shared components module in both of your page modules. Or, you could create a separate module for each of your two components (same as the video except instead of components.module.ts you would have example-one.module.ts and example-two.module.ts), and then import the appropriate module into the module for the page you want to use it on.

[@Hicham_SaAh]

@@JoshuaMorony thank you so much

[@Karthik1516]

I had the exact same error. Thank you.

[@nileshupadhyay7248]

Hey Josh thanks a lot buddy, you saved my time.... Yes I really enjoyed the tutorial.. :)

[@wealth_developer_researcher]

Thanks!!! It helped me :)

[@joseduvanrubianoperalta1632]

Good tutorial, thanks.

[@erna3477]

Saved my night... Thank you!

[@devinvail67]

As always, love your tutorials. In this one you added background music, not sure why. I found it distracting. Following your voice and the code is enough data to handle for my brain :-)

[@carlosgaleanohn]

Is more easy than Ionic 3... TY for the explaining it!

[@daveycrockettjr]

When using a custom component on multiple pages I notice that the component is created again (or at least ngInit() fires again). Is there a way to make a component that is at the root level and is not re-created if used on two pages?

[@philipvandrunen3728]

Thank you, thank you, thank you. I still don't completely understand, but at least my code is working again!

[@emartosgomez]

Thank you so much! Really useful!

[@javierandresfernandez6373]

Sorry if this is a trivial question but, what if I have defined a method inside a custom component, and I want to call it from an ion-button in a particular page. Supposing I had already done what it is told in this tutorial, how can I call that method?

[@JoshuaMorony]

You would just need a reference to the component you are calling the method on (e.g. grabbing it through @ViewChild), then with the reference you just call it like this.myComponent.myMethod();

[@vidalroland]

Great ! I have a problem with custom components. When I create a header component, it goes over the pages (no margin at the top of the page). You can see it there : ipassed.it Does someone have any idea on how to solve it ?

[@comformarkwebsite8833]

Did you fix it, I can't see a problem?

[@mojinzhang2250]

super helpful thanks!

[@jluis859]

saved my life

[@thellexacademy]

Nice One

[@luisdonis2147]

Thank you sooooo much!!!

[@muhammadhussainn4389]

Thank you for this video!

[@MOHAMMEDSOKAILY]

Thank you, you saved my day

[@JosephAli93]

I think i follow tutorial step by step, but got ERROR Error: "Uncaught (in promise): Error: Unexpected module 'TestComponentPageModule' declared by the module 'TestComponentPageModule'. Please add a @Pipe/@Directive/@Component annotation.

[@ericarnaud4314]

I using Ionic 4 and can't doing this. I get an error : "Unexpected value 'DecoratorFactory' declared by the module 'ComponentsModule'. Please add a @Pipe/@Directive/@Component annotation." I create a post on Stack Overflow with the code but no response yet. Please help me !! stackoverflow.com/questions/58343712/unexpected-value-decoratorfactory-declared-by-the-module-componentsmodule

[@27brenner]

THANK YOU

[@SajalSuraj]

This helped :)

[@serhiyhrabovy510]

thank you!

[@elmergarcia.a5536]

thank you!!

[@manarmohammad8232]

thank you

[@DieDie-us4oo]

Thank you man!!

[@andriyzhuk8830]

Thanks!

[@calina9939]

pretty Josh thks x)

[@developpeuranonyme9428]

Thank you very much, that helped me a lot :)

[@noursidaoui8278]

I tried importing IonicModule to my components.module in order to use Ionic elements but my page refreshes for a couple of minutes and throws a "Maximum call stack size exceeded" error. I tried adding CUSTOM_ELEMENTS_SCHEMA in the schema of component.module.ts and the same error happens Please help, I've been stuck on this for a day now :s

[@snaidher5]

I have the same error, and in my component I put this @NgModule( { imports:[IonicModule], declarations: [ProductoComponent], exports: [ProductoComponent] } )

[@israelnunesoriente7722]

VOCE É Incrivellll

[@harundiwan3213]

Thanks alot for this solution

[@mehdi907]

when I created the component it wasn't declared automatclly on module.ts why?

[@Dxpress_]

Yep, same here. Been spending hours wondering why generated components don't just work.

[@cdevidal]

Appreciate it! I should have checked your video first :-)

[@HOW-bt3et]

thanks man