I’m new to Ionic and vscode so I started a new project of ionic in vscode. For testing purposes, I renamed HomePage to AccountPage - all references were changed as expected. I also renamed Home folder + 3 files (ts/html/css) to account and their references in the code.
The only error I see is in account.ts under @Component({
[Angular] Component ‘AccountPage’ is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration
and I’m not sure what to do with it because there are no more Home references anywhere in the code. Also, when running the app, it works with no error except for the fact that I still see Home in the app (browser) instead of Account. What am I missing? Thanks
Try to add AccountPage to your app module (see if the other pages are in the AppModule).
You can search the page references in your IDE/Editor (if you are using VSCode, right click on the page name and Find All references).
Compare where your other pages are imported (in which NgModule) and do the same with your AccountPage. If they are imported in AppModule (/src/app/app.module.ts), just add your AccountPage there too.
Thank you for your reply. This is taken from app.module.ts
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { AccountPage } from '../pages/account/account';
import { TabsPage } from '../pages/tabs/tabs';
As you can see, all 3 pages are there. Also, this is my account.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-account',
templateUrl: 'account.html'
})
export class AccountPage {
constructor(public navCtrl: NavController) {
}
}
In tabs.ts I also have import and I have the same for all 3 pages, including AccountPage as you can see above. All Import I don’t see any HomePage reference in the code and no Home. Also I wonder why I don’t get any error when running the application, maybe it is using a “previously built” version?
[Angular] Component ‘AccountPage’ is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration
Are you still receiving the error above? (you shouldn’t receive if the page is included in the AppModule)
Delete the www folder in the root of your project (where is your package.json and config.xml files).
In order to check it, I renamed About to something else just like I did with Home -> Account. I made all the changes from inside vscode itself.
I got the same problem. I then ran ionic serve and things worked (also from inside vscode) but the errors were still there in vscode. I closed vscode and re-open it. All errors are gone.
Shouldn’t it be more automatic? Am I missing something here?
@IAmos I don’t have the red line under component even if I don’t include it in a module . It won’t work, though, but no error in VSCode.
Are you using some plugin to check angular templates or something like that. I remember I had some similar errors about that when I installed a plugin to check variables in templates, it had some errors and took some time to update the errors (when there were no more errors).
You can check if you have specific angular plugins in VSCode, disable them and see if it solves the issue. I think that is not related to VSCode itself.
You can open an issue in the plugin github repository (assuming there is one) stating your problem.
Is the project not updated (the page that is shown in your browser) until you delete the folder and run again or just the errors in the editor? If it’s the 2nd then it must be a plugin like I said before. If the page in the browser is not updated I don’t know. Sometimes that happens to me when I change html files, but in most cases it works fine.
If the problem persists you could open an issue in the ionic-app-scripts or in the ionic-cli repository.
Even when the application runs ok with the new titles (after deleting www folder and running "ionic serve) the errors are still there. Only closing/opening vscode removes them. I didn’t try just closing/opening the specific file but I added my comment to the question you linked to. No one answered there so I hope someone will notice it eventually.
Btw, how can I know if the problem is related to ionic or vscode? I posted a question about it in vscode just now but I wonder if this was the right place.
First, I advise to disable all your plugins and see if it works.
If it works, try to enable the angular plugins one by one to see when the error happens (it seems it is because of a plugin, @Component() is not VSCode nor Typescript specific, but Angular specific).
Actually the errors I see, less bother me, I’m more concerned about the need to delete www folder and run ionic serve for any change I make. To which part this belongs?
I now added a card component.
I ran Simulate Android in browser, the browser opened up but I didn’t see the card component.
I ran ionic serve (inside the terminal) and a new browser opened up and there I did see the card component.
I then closed the new browser and moved to the browser that opened up previously and guess what? The component was there as if it “reloaded” itself… something looks wrong with the automatic “build” of my changes and only a manual ionic serve does the trick.
Just before posting this, I changed the card to a select component and guess what? Now the changes are immediate… this is confusing.
I can’t say much about that, if you think there is an issue it’s better to open a new issue in the cli or app-scripts repo expaining the steps to reproduce.
I use live reload when I ran ionic serve only.
If you only run ionic serve, then change a file, the browser is reloaded and you see the change? (without closing the browser)
The problem seems to happen only with “Simulate Android in browser”
{
“name”: “Simulate Android in browser”,
“type”: “cordova”,
“request”: “launch”,
“platform”: “android”,
“target”: “chrome”,
“simulatePort”: 8000,
“livereload”: true,
“sourceMaps”: true,
“cwd”: “${workspaceRoot}”
},
liveReload is true, is there something else I’m missing?
When working run browser then it seems to work ok.
Does it change the place you told me to post this question on? Can you give me a link to the proper place?
Thanks!
@IAmos I never tried to simulate android in browser, only in device and emulator (with ionic cordova run android). Maybe someone else might know about that.
You wrote something about cli or app-scripts repo, do you mean on github?
Now that we know where the problem is, to which “part” is it belong to? cordova, angular, ionic, something else?
Again, thank you very much for your help and patience
Where did you see the information about “Simulate Android in browser”? Is that in cordova? It seems like some json configuration, where did you read about it?
I did some search and found:
Is this what you are using?
If it is, your problem is probably not related to ionic or cordova itself, but to this tool.
You could create a new issue there, in the git repo.
Also, if this is your problem, then that explains why you don’t have the live reload.
Your files are in the src/ folder and when you change 1 file the ionic serve detects the change and send to the www/ folder.
The www/ folder is the cordova folder and this is the folder that is used by cordova when building the project. I think that the tool you are using detect changes to the www folder and reload the app.
The problem is that your changes are in the src folder.
One possible solution that I think is running the android simulation in 1 cmd, and ionic serve in another, so that ionic serve updates the www folder and the tool you are using detect the change.
Probably one related with angular. Like 