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
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!
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],
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.
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
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!!
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.
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. :-)
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.
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).
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?
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?)?!
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 :-)
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
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],`
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?
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?
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();
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.
./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
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 ?
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 ...
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.
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
I have the same error, and in my component I put this @NgModule( { imports:[IonicModule], declarations: [ProductoComponent], exports: [ProductoComponent] } )
Thanks Joshua, another excellent explanation! Can you perhaps create an additional video that explains how to use a component within a component? Or, how to add a component to a page that was created as a component - ie. Using a component as a page, so the router points to "component: MyPageComponent" - now MyPageComponent doesn't have a module, so how do I add custom components to it? (This process works in Angular 7, but "does my head in" using Ionic 4 ! )
What if I want to use Ionic elements in my custom component? I try to create a custom component for the application header and want use ion-header, ion-toolbar and so on. As long as I use normal HTML elements everything works. Using Ionic elements they are unknown. ERROR Error: Uncaught (in promise): Error: Template parse errors: 'ion-menu-button' is not a known element: 1. If 'ion-menu-button' is an Angular component, then verify that it is part of this module. 2. If 'ion-menu-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
![[IONIC 4] When & How to Use Services/Providers in Ionic #ionic #angular](/img/n.gif)
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
You just saved me a lot of time that would have been wasted! Thanks man, speaking of Ionic you sure are the best!
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!
Thanks. The main fix for me was the explanation about the lazy loading not loading components. That made my day. Thank you!
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],
Thanks man! You saved my life
Thanks man! You saved my life too.
Thanks man! You saved my life too. By the way, I encountered this in Ionic 6.
Thanks man! You saved my life too.
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.
You saved my life, I had to also add other modules, like ionicModule, RoutingMoudle to the shared module
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
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!!
Josh!!!..... Thank you, you really saved my day with this... I am so glad that i found this at the right now.
Great video - taking one through the failure process was key to me learning, excellent job!
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.
Thanks man, you saved me from a mental breakdown!
Thanks Joshua,
Well explained.
you saved 2 hours of my time!! THANKS
Nice one, I was convinced I was never going to use shared components in ionic until this. Thanks
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. :-)
That was really a great explanation you have helped me a lot bro 🙌🙌
Hope you continue doing lectures like these 🥺
Thanks Joshua. This was very useful
This was what exactly I wanted. Thankyou very much!!
Amazing. Works for me in 2022
Thank you so much! Saved my day!!
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.
I will take off my hat in front of your tutorials. Best of the best.
Thanks Josh, nice quick and easy explanation. God bless!
Thanks this really saved my day.
Great, helped me a lot! Thanks Joshua!
Thank you Joshua Morony, you saved my day, I spended amount of time this morning to resolv this issue =))
you just made my day, thanks for the awesome explanation
Hey still useful, I've been trying to get into it and this clear my head around the subject, ty
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).
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?
Update: It got fixed by adding CUSTOM_ELEMENTS_SCHEMA in the schema of component.module.ts.
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
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?)?!
Amazing!! thank you for the detailed explanation!!
You saved a life sir
Thanks a lot, you are great at explaining👍👍👍
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 :-)
Thanks man. This saves my day.
nice and simple , thanks bro.
Thank you Joshua. Saved me..
Very useful video, thanks
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.
Thank you! You are the man! It saved me from a big problem !!
Thanks too much your video, you solved ' 2 modules' for me.
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?
Thanks Joshua
Thank you! The instructions are fantastic!
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
Example: const tmpModule = NgModule({
declarations: [tmpCmp],
imports:[IonicModule],
entryComponents: [tmpCmp],
})(class {});
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],`
I should have read your comment @Mario, god damn. But yeah, if you wanna use NgFor, NgIf, then do :import { CommonModule } from '@angular/common';
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?
Well explained, thank you
Thanks, Joshua Morony, you saved my day :)
Nice Video
Josh! Thank you for this! Thank you for saving me again. :)
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?
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();
Thanks man! This was right on time.
Thanks. it helped me a lot.
You just save my day. Thank!!!
Thanks Good Lad you Saved my day!!
how can use the component.css file in the page?
Great quality, you deserve mor views :) Thanks !
Thanks Man, 1000 Likes :) You just give me the result of my struggling 5 hrs
Thanks for the video!
thanks you helped me so much !
I had the exact same error. Thank you.
Thanks a lot! Helped me so muuuch
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.
Thank you, thank you, thank you. I still don't completely understand, but at least my code is working again!
Thanks a lot for your help
Hey Josh thanks a lot buddy, you saved my time.... Yes I really enjoyed the tutorial.. :)
Thank you so much! Really useful!
Saved my night... Thank you!
Thank you !
./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
Great tutorial! !!!!!
Thanks alot for this solution
saved my life
Is more easy than Ionic 3... TY for the explaining it!
Thank you for this video!
super helpful thanks!
1:01 Glad I'm not the only one with this problem....😅
THANK YOU
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 ?
Did you fix it, I can't see a problem?
Appreciate it! I should have checked your video first :-)
Thanks!
thank you
Thank you sooooo much!!!
thank you!!
Thanks!!! It helped me :)
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 ...
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.
@@JoshuaMorony thank you so much
Nice One
Thank you very much, that helped me a lot :)
thanks man
Thank you man!!
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
I have the same error, and in my component I put this
@NgModule(
{
imports:[IonicModule],
declarations: [ProductoComponent],
exports: [ProductoComponent]
}
)
pretty Josh thks x)
Thank you, you saved my day
muchas gracias !!!
when I created the component it wasn't declared automatclly on module.ts why?
Yep, same here. Been spending hours wondering why generated components don't just work.
VOCE É Incrivellll
Thanks Joshua, another excellent explanation! Can you perhaps create an additional video that explains how to use a component within a component? Or, how to add a component to a page that was created as a component - ie. Using a component as a page, so the router points to "component: MyPageComponent" - now MyPageComponent doesn't have a module, so how do I add custom components to it? (This process works in Angular 7, but "does my head in" using Ionic 4 ! )
What if I want to use Ionic elements in my custom component? I try to create a custom component for the application header and want use ion-header, ion-toolbar and so on. As long as I use normal HTML elements everything works. Using Ionic elements they are unknown.
ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ion-menu-button' is not a known element:
1. If 'ion-menu-button' is an Angular component, then verify that it is part of this module.
2. If 'ion-menu-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Found the solution by myself: stackoverflow.com/questions/43425090/ionic-3-cant-use-ion-components-inside-my-custom-components