I'm trying to access my Storage at providers, but it's undefined inside providers. In others classes Storage works properly.
Curious: I create a new Ionic2 project, insert Storage into the project and Storage works properly at providers.
In my old and new project the Storage was configurated the same way:
In app.module.ts I added this:
import { Storage } from '#ionic/storage';
#NgModule({
...
providers: [Storage]
})
In providers/service.ts I added this:
import { Storage } from '#ionic/storage';
constructor(public http: Http, public storage: Storage) { }
When I do this: console.log(this.storage) is undefined in one project but works in other project.
What can I do to fix it or what can be wrong?
Try this :
in app.module.ts
import { IonicStorageModule } from '#ionic/Storage';
Then in providers/service.ts your code seems to be good.
Related
I'm trying to deploy my Svelte app on AWS Amplify, I push the commits, Amplify builds and verifies the app, but then if I visit the app URL it's just a blank page, it might be an adapter problem? I tried the node.js and static ones but no luck
If you want to deploy a Sveltekit application to AWS Amplify. You need to use the #sveltejs/adapter-static, since it will serve your app via a static CDN.
Once you change the adapter, make sure to add a fallback in svelte.config.js:
// svelte.config.js
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
fallback: 'index.html'
})
}
};
In the end, this solved the problem:
svelte.config.js
import adapter from '#sveltejs/adapter-static';
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
prerender: {
default: true
}
}
};
export default config;
Background
I have my project deployed to Github Pages here: https://zeddrix.github.io/jw-guitar-tabs, so I have this in my svelte.config.js file:
kit: {
...
paths: {
base: '/jw-guitar-tabs'
},
appDir: 'internal',
...
}
I have this in my __layout.svelte:
<script lang="ts">
import { base } from '$app/paths';
...
const fetchFromDBAndStore = async (category: SongCategoriesType) => {
const res = await fetch(`${base}/api/categories/original-songs`);
const data = await res.json();
console.log(data);
...other code...
};
...I have my code here that uses this data...
</script>
<Layout><slot /></Layout>
Side note: I put it in this file so that this runs on any page, but I have a code to make sure that this doesn't run if I already have the data. This is not the issue.
This calls on the file: src/routes/api/categories/original-songs.ts:
import fetchSongsDB from '$utils/fetchSongsDB';
export const get = async () => fetchSongsDB('originals');
And this fetchSongsDB function fetches the songs from my database.
Everything is working fine in development mode when I run npm run dev and even in preview mode when I run npm run preview after build, of course, in localhost:3000/jw-guitar-tabs.
Issue
However, on the static github page at https://zeddrix.github.io/jw-guitar-tabs, I get this:
It serves the 404 Github Page as the response. I guess it's because it can't find the src/routes/api/categories/original-songs.ts file. But of course Github will not find this file because the deployed folder to gh-pages is the build folder so I don't have this original file route anymore.
How would I solve this?
Rename original-songs.ts to original-songs.json.ts
Change the
fetch(`${base}/api/categories/original-songs`);
to
fetch(`${base}/api/categories/original-songs.json`);
That allows the adapter-static to generate the json files at build time.
(These are static files, to see changes made in mongodb will require a rebuild & redeploy to GitHub pages)
Sometimes the static adapter doesn't autodetect the endpoint.
You can help the adapter by specifying the url in svelte.config.js
kit: {
prerender: {
entries: [
"*",
"/api/categories/original-songs.json",
Bonus tip: The /favorites url redirects to /favorites/ when refreshing the page, add trailingSlash: "never", to kit to generate favorites.html instead of favorites/index.html and keep the /favorites url on refresh.
I'm playing with AWS Amplify since I've to introduce some of its feature in a legacy application that has no framework (no React, no Angular: just vanilla JS).
I used successfully the Auth module so I recreated a simple sign up/in/out strategy. What I want now is to call a REST API, using REST API module. So I created an API using API Gateway PetStore example and I would interact with it.
So I created the configuration:
import Amplify from '#aws-amplify/core';
Amplify.configure({
Auth: {
...
},
API: {
endpoints: [
{
name: "PetStore", // name of the API in API Gateway console
endpoint: "https://XXX.execute-api.eu-central-1.amazonaws.com/dev",
region: "eu-central-1",
paths: ['/']
}
]
}
});
and somewhere else:
import Api from '#aws-amplify/api-rest';
Api.get('PetStore', '/pets', {})
.then(response => {
console.log(response)
}).catch(error => {
console.log(error);
});
But, when executed, I get always the same error:
API PetStore does not exist
Any idea? Remember that:
API Already exist
I don't want to use Amplify CLI to create AWS resources
I'd like to add that #Deiv was correct to suggest API.configure(), this worked for me. After trying amplify pull and amplify push I still received the error API <api-name> does not exist.
So my code now looks like this:
import Amplify, { API } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
API.configure(awsconfig);
I am using npm package: aws-amplify 3.3.21
I had this same issue and I managed to resolve it by configuring the exports on the "Api" object directly:
API.configure(aws_exports);
Previously it worked for me with just setting it on Amplify.configure, but it seems a newer version of Amplify requires it on the sub module itself.
Some more bits and pieces can be found here in this long-standing issue (in which the same issue popped up for Auth, but I applied the same to both in my case and it fixed it): https://github.com/aws-amplify/amplify-js/issues/4315
You need to call API.configure() after Amplify.configure is called, or else your API setup won't be applied, hence it returns API PetStore does not exist
import Amplify, { API } from 'aws-amplify'; // this part depends on which Amplify you are using. but make sure to import API
Amplify.configure({
Auth: {
...
},
API: {
endpoints: [
{
name: "PetStore", // name of the API in API Gateway console
endpoint: "https://XXX.execute-api.eu-central-1.amazonaws.com/dev",
region: "eu-central-1",
paths: ['/']
}
]
}
});
// Call this
API.configure(); // no awsconfig required as you have set your own
We changed the version of aws-amplify from 3 back to a previous version "aws-amplify": "^2.2.2" in package.json and that resolved it.
Think version 3 broke the manual configuration of aws-amplify.
Try changing the version to a previous version you know worked.
API * does not exist usually means you haven't pushed the REST API you created. If you can't use amplify push have you manually created and amplify API through the console?
I want to share my ember-project between all members in my team.
Since every development environment is different (OS, VM for server, etc.) I thought it would be best practice to hold an local-environmen-file in each repository clone which will be ignored by git and just holds the specific config of each team-member.
For Example in my app the application adapter holds the "host:" entry which is a computed-property which uses the local-environment-file and reads the IP of the server (where to connect to).
My current approach looks like that:
// ./config/localenv.js
module.exports = function() {
var LOCALENV = {
host: "http://192.168.1.44:3000"
};
return LOCALENV;
};
And Im importing it in my adapter like that:
// ./app/pods/application/adapter.js
import DS from 'ember-data';
import LOCALENV from 'your-application-name/config/localenv';
export default DS.RESTAdapter.extend({
host: Ember.computed(function() {
return LOCALENV.host;
})
});
Unfortunately ember returns error logs in the browser console (the referenced/imported module was not found...). What am Im doing wrong?
I'm creating an Ember CLI ember-addon, and in my addon's files I need access to the app's config. I have no way of knowing what the app including this addon will be named, so I can't simply do import ENV from 'app-name/config/environment' like I might in the application itself.
How can I access the namespace of the application that is using the ember-addon from within the addon itself, so that I can import things from that application?
You should not need to get the namespace in order to get the config.
Any setting that your addon requires should be added on to ENV.APP in config/environment.js.
For example if you wanted a MY_APP_KEY setting you would require that something like
ENV.APP.MY_APP_KEY = 'ABCDEF'; was added to config/environment.js.
You can then use an initializer to read the property off of the application instance and inject it into you addon by doing something like...
export default {
name: "my initilizer",
initialize: function(container, app) {
//get you setting off of the app instance
var key = app.get('MY_APP_KEY');
//register it
app.register('config:myAddonKey', key, { instantiate: false });
//inject it where you want to access it
app.inject('route', 'myAddonKey', 'config:myAddonKey');
}
};
You can see an example of how its done in the Ember Django Adapter
One possibility is to use an initializer:
Ember.Application.initializer({
name: 'my-component',
initialize: function(container, app) {
// you have access to 'app' here...
}
});