I added some configurations to myapp/config/environment:
if (environment === 'development') {
ENV.APP.AuthURL = 'http://localhost:5000/';
}
Now, to access this configuration should I use some method or directly accessing window.Myapp?
You can access it by importing environment.js using the line below:
import config from '../config/environment';
For example, lets say you want to access your configuration in a controller. This is what it would look like:
import Ember from 'ember';
import config from '../config/environment';
export default Ember.Controller.extend({
foo: config.APP.AuthURL
});
If you need to, you can now access it in your controller's template using:
{{foo}}
There are a couple modern ways, as of this writing, when trying to access it from your application:
import ENV from 'your-application-name/config/environment';
your-application-name should be what's in the modulePrefix key of config/environment.js and the name key of package.json
Via Ember.getOwner(this).resolveRegistration('config:environment');
Number one assumes you're using Ember CLI and is detailed in the ember docs under Configuring Your App:
Ember CLI ships with support for managing your application's
environment. Ember CLI will setup a default environment config file at
config/environment. Here, you can define an ENV object for each
environment, which are currently limited to three: development, test,
and production.
The ENV object contains three important keys:
EmberENV can be used to define Ember feature flags (see the Feature Flags guide).
APP can be used to pass flags/options to your application instance.
environment contains the name of the current environment (development,production or test).
You can access these environment variables in your application code by importing from your-application-name/config/environment.
While #rog's answer is correct and will work for all cases where you are trying to access the config from your application there are some edge cases (such as accessing config from an addon) that it will not work for.
I would recommend checking out the ember-get-config addon: https://www.emberobserver.com/addons/ember-get-config
Once you install ember-get-config you can import your config using the following code:
import config from 'ember-get-config';
const { AuthURL } = config;
// now you have access to AuthURL 🎉
This will work in your application and it will also work if you build an addon that will be consumed by your application 👍
Related
I am currently using ember 1.13. I have two apps which use emberjs. Now I am thinking of integrating these two apps by creating a new route in the first app and display specific route of the second app. Many suggested to use ember-engines,but they need ember 2.10 or higher.Since my application mostly depends on IE 8,I cannot migrate from ember 1.x.
So what should I do? Thanks in advance!!
Cheers!!!
So one approach that would work pre engines is to leverage an addon for the common routes. Your addon will define routes, controllers, and templates as usual with the addons directory. You will also want to define something like addons/utils/router-utils:
// assume we have a single route foo
export function addRoutes(router) {
router.route('foo');
}
router is the this value that ember provides when invoking Router.map. So, within your addon, to allow for "normal" feeling development, you'll want to use this addRoutes function within the dummy app router in tests/dummy/app/router.js:
import EmberRouter from '#ember/routing/router';
import config from './config/environment';
import { addRoutes } from 'addon-with-routes/utils/router-utils';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
addRoutes(this);
});
export default Router;
Note well, the above router.js file is what Ember 3.8 generates. Yours will most likely differ but the key point is that we invoke our addRoutes function with the anonymous Router.map this value to dynamically add our routes to the dummy app. See this twiddle for an example of adding routes to the router dynamically.
You can now run ember serve from within the addon project and test your routes. Acceptance tests run against the dummy app as well so you're not really constrained by this approach.
Now within your consuming app, you would do the same thing we did in the dummy app to add the routes. This approach, in general, though will require careful engineering to work effectively (a lot of the problems that ember engines solves must be solved by you in some way). Your addon will most likely have to expose a lot of configuration so that you can route outwards from the addon back into the consuming app which will not know about the routes in the consuming app. You'll have to avoid namespace collisions. Sounds fun though :)
I am brand new to EmberJS, and am going through a tutorial. I am at the part of the tutorial that starts talking about creating services and injecting them into your controllers (I'm not 100% sure if its a controller, but I'm coming from AngularJS, and it seems pretty similar).
In the terminal in my Ember project, I run the command ember g service authentication. I can see that the service was created in the services directory of my app in the file authentication.js. When I try injecting it into my controller however, I get this issue in the browser when I serve up the app locally,
Error: Assertion Failed: Attempting to inject an unknown injection: 'service:authentication
Could this be because I am using a version of Ember that is newer than in the tutorial, and there is a different way to inject services now? I ask that because this is the syntax of the service in the tutorial
import ember from 'ember'
export default Ember.Service.extend({
records: []
});
and this is the syntax of what I have now, auto-created when the project was built with ember new
import Service from '#ember/service';
export default Service.extend({
records: []
});
org.js "Where service is being injected"
import Route from '#ember/routing/route';
export default Route.extend({
authentication: Ember.inject.service(),
setupController(controller) {
this._super(...arguments);
}
});
Thanks you everyone for all the information about EmberJS.However It turns out all I needed to do was restart my local server -.-
In ember version 2.16, you can leverage javascript module api for importing.
Refer this blog post
Refer this full list
if your ember version is below 2.16, then
import ember from 'ember'
export default Ember.Service.extend({
records: []
});
if ember version is >= 2.16 then the below is the right way to import,
import Service from '#ember/service';
export default Service.extend({
records: []
});
Looks like you are using Ember 2.16 (as others have answered it uses the new components modularization and the tutorial you are following looks like 2.15 or prior, as you have also mentioned in your post).
It makes sense that you should use new modules in your new route too:
import Route from '#ember/routing/route';
import { inject as service } from "#ember/service";
export default Route.extend({
authentication: service()
});
One acclaration: the code you are showing is a route class (there are controllers on the route hierarchy, and also there are components that are not part of the route hierarchy). You will be able to inject your brand-new service in any of the mentioned levels.
I have just started working with ember2.5.1. I wanted to try and create an easy service, and have a component implement it. The problem is that the service is always undefined, and I can't seem to call its methods.
/components/status-component.js
import Ember from 'ember';
export default Ember.Component.extend({
logger: Ember.inject.service(),
actions: {
test() {
this.get('logger').log("testing");
}
}
});
/services/logger.js
import Ember from 'ember';
export default Ember.Service.extend({
log(message) {
console.log(message);
}
});
Other information: I also attempted making routable components, and I'm not sure if that's messing up the services? I essentially have a route pointing to a dummy status-proxy-component.hbs which has the {{status-component}} within it. status-component.hbs is another file.
Any idea why this might not be working? Am I just plain out missing something from services, or is the proxy messing it up?
You must use the get() function to get component properties.
this.get('logger').log("testing");
I had the same problem with Ember 2.4.2; the service was defined in the correct location and would appear in the ember build output, but not in my running ember serve.
The problem turned out to be the hot reloading not picking up on the new service. Killing the server and re-running ember serve allowed the service to work normally.
I have to port a non-cli project to the cli. I have a route that is:
App.thisRoute = App.previouslyDefinedRoute.extend({...})
With the CLI, I've tried this:
// routes/thisRoute.js
import App from 'app';
export default App.previouslyDefinedRoute.extend({...})
That gives me this Ember Inspector Error:
Ember Inspector has errored.
...
Error message: Could not find module app imported from app/routes/thisRoute
I've also tried:
// routes/thisRoute.js
import App from 'routes/previouslyDefinedRoute.js';
export default App.previouslyDefinedRoute.extend({...})
Both dont work.
How do I get my app instance?
There is no app instance in ember-cli, it uses ES6 modules instead, in order to extend a route you will have to import it first.
import PreviousRoute from 'yourProjectName/routes/previouslyDefinedRoute';
Note that the file extension is not needed.
And then you can just export default PreviousRoute.extend({});.
Your files must always export either a default or a named function in order to be used by other files.
I'm using Ember-CLI for an app that is embedded in a larger Java application:
The idea is having the ember-cli build triggered by the main app and then the resources in dist are copied over the main one where it will be served from the server as static resources.
The problem I have is that Ember-CLI injects the configuration defined in environment.js as a tag in the generated index.html like this:
<meta name="user/config/environment" content="%7B%22modulePre.your.config">
I'm not using the index.html, but a jsp with more data from the main application and the Ember rootElement tag.
This makes the process quite cumbersome because every time the environment.js is changed we have to manually copy the generated meta tag with the new config and put in the jsp.
I was thinking about copying manually the environment.js from the source code in the build project and import it, but was wondering if there is a better alternative to make the configuration available without the html injection?
Seems like I missed this in the documentation:
new EmberApp({
storeConfigInMeta: false
});
With this parameter the environment.js properties are merged into the final js compiled in production. Duh!