Ionic generate page - skip module file - ionic-framework

ionic g page SomePage also creates some-page.module.ts file. How do I prevent it from doing it?
I use Ionic 4

In Ionic v3, it is possible to use `--no-module`` flag, to skip the creation of module.ts file.
Try execute:
ionic g page SomePage --no-module
Hope this helps!

We shouldn't delete module from a page.
Page in Ionic is ment to represent the whole view, because there is also a Component which might be just a part of the view. So it is very obvious now, that every Page should have its module (for lazy loading) and a route to it.
If we generate component, we see that neither - module nor route is created, so it makes perfect sense now.

Related

Material UI Tabs not rendering properly on server

I am having a problem using the "Tabs" component: https://material-ui.com/components/tabs/ In fact, when developing locally, the rendering of the component is fine. But pushing to the server, it looks weird (with differences in the borders on each side of the bar).
Moreover: when refreshing the page in which it has been embedded or browsing manually to this page, the whole template is broken all of a sudden!
I tried generating a build folder locally and launching the page from that build, and fell back on the same problem.
Thank you in advance for your help
From your description, I saw that your "build" is not work even in local development. That's mean it should not work on the production, of course.
The thing is, what is your actual "build" action? Depends on what library/framework you use, but basically with Material-UI, most popular problem comes from not load some CSS before using it's components.
Please read here first: https://material-ui.com/guides/server-rendering/#server-rendering
Just in case you use Gatsby, read here: https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/.
I'm using Gatsby and use this following config to fix some CSS issues.
stylesProvider: {
injectFirst: true,
}
Hope this help.

Ionic 2 / Angular 2 Routing - Progressive Web App

I'm searching the web to find a solution to implement url routing in Ionic2, I can't seem to find a way to access a page using a URL.
Has it been implemented in Ionic 2?
Should the Angular 2 router be used? Does it work with Ionic 2?
I need to be able to get the physical url of a page within the web app; in order to be able to share it outside the web app.
Thank you,
I think you are looking for the Ionic service DeepLinker. That does not replace the FILO/NavController but provide a way to define and display specific views based on URLs.
In your main module add:
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: DetailPage, name: 'Detail', segment: 'detail/:userId' }
]
})
]
The full documentation here.
Also, if you also release your PWA on the AppStore/Play Store, you can use the native plugin Ionic Deeplinks.
Ionic 2 uses a pile FILO schema for routing with his NavController methods ( like push, pop, setRoot). And you don't need to use a sequence for it like you would do with a Routing system, like to access page 2 i need to go through page 0 and 1, you can just push(NewPage) and it will work, so it gives you a much better control over your application pages and how they interact.
I've never seen anyone talking about using it. If the NavController uses the Angular 2 routing in its background i don't know, will search for this, but the Ionic NavController is easy to use and works very good on most cases, the only case it doesn't support yet is passing parameters back within his pop() method, for this i use a modal and style it totally like a normal page. You can also use setRoot instead of pop to pass data like so.
this.navCtrl.setRoot(MyPage, this.Data);
For more information please see the ionic 2 documentation on navigation

How to create component scss with ionic 2

I can't link my scss to components in ionic 2 using the standard angular 2 :
styleUrls: ['form.component.scss']
How is it done ?
Ionic2 can take a bit of learning curve as they've redone a lot of how Angular2 works, but once you get used to it it's really fantastic...
For adding scss to components it's super easy, you just throw it into the folder with your TS/html and the ionic build gulp process takes care of the rest for you. So just kill that line for styleUrls and you'll be all set.
It does; however, jack with css inheritance some so you'll want to be careful how you set it up.

nwjs migrating from 0.12 to 10.18

I am facing a problem upgrading from nw.js version 0.12 to 0.18.
I have a situation while I start from the index.html file from the .nw package. From the file, I navigate to my online version of the app by navigating to the link mytestapp.com/page1online.html. From the Online version of the page located at mytestapp.com/page1online.html, I want to navigate back to an HTML page in the .nw package called page1offline.html. The page1offline.html is located in the root of the .nw package.
In nw.js version 0.12, I used the app:// protocol to navigate to any page located inside the .nw package. Now, since it has been deprecated and instead chrome-extension:// was introduced this navigation is broken.
I tried the using chrome-extension:// instead to the app:// but it did not work. Tried the file:// option but that too did not yield the desired result. Also tried many other options but was disappointed.
Can somebody please help me how to navigate to a static HTML file located inside the .nw package from the live online page opened from the nw.js application.
Any help would be highly appreciated.
Thanks in advance.
Regards & Happy Thanksgiving.
The solution to use/navigate/redirect to an HTML resource in an NW package from a hosted HTML page is to have this entry in the package.json file.
"web_accessible_resources": [
"*.html"
]
}
Also, to reference the resource we should use the chrome-extension protocol as
window.location.href = "chrome-extension://" + chrome.runtime.id + "/mytestpage.html"
Wasted lot of my time on this. Hope this helps someone.
Maybe you got the local file path format wrong. It should be like this (3 forward slashes)...
file:///C:/abc.png
But if the file is inside your NW package then you should be able to access it directly by its name like this... (no need for a path)
SomeFrame.src='abc.png';

protractor : Best way to use in protractor ? driver.get("URL") or browser.get("URL")

Which is best way to use in protractor ?
var driver = browser.driver;
driver.get("URL")
or
browser.get("URL")
browser.manage().timeouts().implicitlyWait(browser.params.implicitWaitTime);
Currently I have used second approach to open URL and perform any browser action. Should I change everything like first approach or my approach is nice to go ahead ?
My two cents
If its a non angular application - go For browser.driver.get()
If not go for browser.get('')
browser.get understands the angular cycle and waits for the angular activity to finish
from documentation - API Documentation
Navigate to the given destination and loads mock modules before
Angular. Assumes that the page being loaded uses Angular. If you need
to access a page which does not have Angular on load, use the wrapped
webdriver directly.
If you are using browser.get() then you dont need a implicit wait and ideally you should avoid using it