I've written a simple Angular PWA, that I have added on my iPhone to the Homescreen. To remove the Safari Toolbar, I have already included in my index.html:
<meta name="apple-mobile-web-app-capable" content="yes">
See Image "1", the Toolbar is gone. The Problem is: when I hit the "Start"-Button on Image 1, the Angular App routes to a new Component (the URL changes from https://example.com/foo to https://example.com/foo/bar), and some other Toolbar pops up (see Image "2").
Is there any way to prevent iOS from showing this Toolbar at Image 2? Thank you!
Image 1:
Image 2:
I did find a solution myself:
It seems like iOS shows this Toolbar if the Host or Path of a URL changes, so I checked if it also takes the URL Fragment (https://en.wikipedia.org/wiki/URL#Syntax) into account, and it does not! Yay!
So my solution for an Angular-based Webapp is to configure Hash-based LocationStrategy like this in your AppModule:
import {HashLocationStrategy, LocationStrategy} from "#angular/common";
#NgModule({
declarations: [
...
],
imports: [
...
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
This way no Toolbar pops up, if I change the Route in Angular.
I ran into this as well when creating a PWA in Angular 8. The solution was
#NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })]
})
in my app-routing.module.ts
Related
I using TextField in my flutter app. It worked on on android. but on ios when I try to paste from the clipboard into the field I get the error:
No CupertinoLocalizations found.
_CupertinoTextSelectionControlsToolbar widgets require CupertinoLocalizations to be provided by a Localizations widget ancestor.
The cupertino library uses Localizations to generate messages, labels, and abbreviations.
To introduce a CupertinoLocalizations, either use a CupertinoApp at the root of your application to include them automatically,
The specific widget that could not find a CupertinoLocalizations ancestor was: _CupertinoTextSelectionControlsToolbar
This is part of my code, main page:
return Localizations(
locale: Locale('en'),
delegates: [
GlobalMaterialLocalizations.delegate,
DefaultCupertinoLocalizations.delegate,
DefaultWidgetsLocalizations.delegate,
],
child: CupertinoTabScaffold(
tabBar: CupertinoTabBar(...)
....
)
in each tabs I use this page:
return MaterialApp(
navigatorKey: navKey,
home: child,);
I have separate navigation in each tab.
how do I fix this? any ideas? I will be grateful
You can try to add a delegate of GlobalCupertinoLocalizations instead of DefaultCupertinoLocalizations into your delegates:
delegates: [
GlobalMaterialLocalizations.delegate,
// DefaultCupertinoLocalizations.delegate,
GlobalCupertinoLocalizations.delegate, // Here !
DefaultWidgetsLocalizations.delegate,
],
EDIT:
You may need to add supportedLocales too.
supportedLocales: [
const Locale('en'), // English
// const Locale('de'), // German, etc.
]
The goal: trigger a component residing in a module, so my subscription in the ctor of the component is activated.
I'm using PreloadAllModules as a preloadingStrategy. But it's not happening.
I need to subscribe to some events in de constructor of my FriendsComponent.
the setup is like this:
FriendsComponent is shown in the template of the SocialComponent, which is part of the SocialModule.
social.component.html
<div>
<friends-component></friends-component>
</div>
the SharedModule declares the FriendsComponent.
AppModule imports SharedModule,
RouterModule for AppModule is like this:
{
path: 'social',
component: SocialModule,
children: [
{
path: 'friends',
component: FriendsComponent
}
]
},
I think the problem is because the FriendsComponent is not part of a router-outlet?
Can it be done without a router-outlet?
If a module would be pre- or eager loaded, would it automatically trigger the constructors (and the subscription)?
Is the issue with my preloading strategy?
I have tried adding: data:{preload:true} to the paths declared in routermodule.
Everything works fine, when the user activates the SocialModule (for instance by clicking on a button with a routerLink to social/friends), but I want it activated on startup (just not shown on any html)
I'm working with Angular Ivy, but think I'm still missing the points. Any help is appreciated
You need to handle your initial subscriptions in a service and have the component subscribe to that service. You won't need to touch the routes. It what services are for.
You subscribe to the value you need in your FriendService and have FriendComponent subscribe to your FriendService.
Problem:
In my project I have done the deep-linking part successfully with react navigation. Then I try to implement Universal Links for IOS too. When the link is clicked it is successfully opening the app with universal links in IOS. But the problem is it is not firing the linking object added to the Root navigation. This is how my code looks with root navigator.
export default function App() {
const linking = {
prefixes: ['https://mydomain/meeting'],
config: {
screens: {
login: 'login/:data',
},
},
};
return (
<NavigationContainer linking={linking}>
<AppStackNavigator />
</NavigationContainer>
);
}
Can someone help me to solve this issue? I tried lot to find out a way to do this but I was unable to do so. Thank you!
I would like to start an animation on user interaction with matRipple attribute directive.
I have tried it with <i matRipple class="material-icons">create</i> and imported MatRippleModule from #angular/material, like this:
import { MatRippleModule } from '#angular/material';
imports: [
MatRippleModule
]
If I click on the element, nothing happens and I don't even get an error message. Why doesn't it work for me?
I have figured out that I didn't see any changes because of the background color. I have added matRippleColor="orange" and now I see that it works.
Using Swagger - UI 3XX
I would like to simply know if this is possible and if so, how:
We currently have a need to hide the definition URL path that Swagger - UI displays.
I know it's not possible to remove this URL and I'm not looking to do that, all I'm wanting to do is to hide /mask the text box from the client viewing this page.
Looking at the new Swagger docs here, there are some awesome tricks and extras you can add, however - nothing I can see in relation to my query.
I'm pretty sure, I could interrogate the HTML, find the id of the element in question and manually change the display of it within the index.html, I would much rather prefer using a build in method, if one exists before getting to that possible solution.
i.e. Something like this is possible and works:
<style> .download-url-input { display: none !important; } </style>
Is this even possible?
In Swagger UI 3.x, you can hide the top bar in one the following ways.
Option 1
Edit dist\index.html and find this code:
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
Remove layout, SwaggerUIStandalonePreset and SwaggerUIBundle.plugins.DownloadUrl, so that the constructor looks like this:
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis
]
})
(Source)
Option 2 - Recompile Code
You can also recompile Swagger UI without the top bar plugin as explained here and rebuilding it. You will need Node.js 6.x and npm 3.x.
Edit src/standalone/index.js and remove TopbarPlugin from presets:
// import TopbarPlugin from "plugins/topbar" // <----------
import ConfigsPlugin from "plugins/configs"
// the Standalone preset
let preset = [
// TopbarPlugin, // <----------
ConfigsPlugin,
() => {
return {
components: { StandaloneLayout }
}
}
]
Rebuild Swagger UI – in the project's root directory run
npm install
then
npm run build
Now your dist\index.html does not have a top bar.
For the version 3.x add slice function to:
SwaggerUIStandalonePreset.slice(1)
In the version 4.x (inside swagger-initializer.js file) set layout to "BaseLayout"
window.ui = SwaggerUIBundle({
url: "./swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "BaseLayout" // <<< here
});