Hello,
I am designing an application which is non-SPA, is there a way to create multi page applications in ionic3. I have multiple folders which has its corresponding index html’s for each page. Each page will have different URL’S to access.
Attaching the expected structure screenshot for reference. There is a change in src and www folder. Please suggest.
What platforms are you targeting?
Desktop and Tablet as responsive and mobile as adaptive. Currently planned to develop it as a web application.
Then I would suggest you just create two separate apps and then deploy them to different directories / URLs.
Be aware that switching between these of course will unload the complete SPA.
Two apps should be inside one directory only, i think overriding the default build properties will help.
But am new to this framework, if you can share some code how to override default config build properties, based on the structure I provided it will be helpful.
I was going through the link added below, but the issue am facing is how to add multiple src folder paths and how to create project specific folder and move its specific code in www folder like example www folder should have folder seperated projects as shown in the screenshot.
This cannot possibly work. Each app has an index.html that starts and bootstraps the whole app. These also include the same file names, so these would overlap as well.
Ok, Got it… Then how should I create 'n number of ’ separate apps? If I create different apps, then each app will have its corresponding node modules folder right? which will increase the size of the entire folder…
My App structure will be some thing like this:
static – > testPage1 folder – > desktop/tablet Folder – > src folder and www folder.
static --> testPage1 folder – > mobile Folder – > src folder and www folder.
static – > testPage2 folder – > desktop/tablet Folder – > src folder and www folder.
static --> testPage2 folder – > mobile Folder – > src folder and www folder.
SO above structure has a same parent folder called static and static folder will have module specific folder and each module specific folder will have desktop/tablet and mobile folder. each module sub folder will have its corresponding application bootstrap module.
And similar to this other folders also follow the same. I am not sure how to achieve this kind of folder hierarchy without impacting the ionic default configurations. If you can share sample it will be helpful.
Or Is there a way to navigate to the corresponding page based on the URL…
Page 1 : https://test.com/static/page/home
Page 2: https://test.com/static1/page/list
Page 3: https://test.com/static2/page/detail
I need to write a method in such a way it should support the router logic as well as based on the URL it should navigate to the corresponding router and default that page… any suggestions how to achieve this.
I’m a little confused as to why you need multiple apps rather than just multiple pages. Can you explain what the overview of your use case is?
Yes, separate apps have separate dependencies that are compiled into the app.
You are starting with some complicated “folder structure” you want for some reason. But this is not supported and not how it should be done.
Can you explain why you want to do such complicated things?
Same as before: Why?
I agree, not to go with complex structure, just trying to match with the current project structure what we have. But now decided to go with the page level structure…
Now I am using lazy load page load module, but one issue I am facing is If I try to move my page related files into the new sub folder, then am getting this below error.
Pages folder is trying to look for the immediate page folder… Is there a way to resolve this.
Structure tried to manipulate:
src – > pages → test → main → test.html, test.modules.ts, test.ts, test.scss
I added a new sub folder ‘main’, inside the generated test page.
You can’t change the structure. Do it the Ionic way and keep the structure.
If the URLs should be different, then you have to handle those.
It worked with this structure:
src–> main --> pages --> test
This is also fine for me… Thanks for the help.
