I have to import this library and have the "ZeroEx" variable global across all ember files.
i tried to add this line in ember-cli-build.js but I got no such file or directory
app.import('node_modules/0x.js');
https://0xproject.com/docs/0x.js#installation
There is a new ember add-on that should make this easy for you: ember-auto-import https://github.com/ef4/ember-auto-import
Related
I have to import some stylesheets residing inside node_modules (bootstrap.css from node_modules, etc).
I tried by
adding styleUrls inside #Page,
putting the styles in the .scss file inside the page component folder,
and finally putting the styles inside the template file itself by creating new style tag... all with no luck, i.e the required styles are not getting applied on tags with appropriate classes.
How to do this ?
PN: I had imported the page scss for my components in app.core.scs.
Anyways, I think putting bootstrap.min.css inside page scss is not a
good way
Adding the above import doesn't seem to work in the latest version of Ionic2 (ionic -version = 2.1.4) that I installed on 10/25/16. There is no longer an app.core.scss file in newly created projects. But rather just variables.scss in src/app/theme.
There is a file app.scss in src/app that says it's for global SASS and importing other files, but adding an import for another page does not seem to make a difference.
I have a page /src/app/pages/about, in which I have about.ts that has styleUrls: ['about.scss']. The file about.scss is in the same directory. Putting #import "../pages/about/about"; at the bottom of that file makes no difference.
UPDATE:
I have finally got it to work with this in about.ts:
styleUrls: ['/pages/about/about.scss']
I'm not sure if this is the best way yet, but it works for now.
#import "../pages/yourpage/yourpage"
Add this line in app/themes/app.core.scss and rebuild. Of course change yourpage expression.
Ember 2.0 / ember-cli 1.13.8
I couldn't find a way to import names export from ES6 module located in ./vendor dir in my Ember 2.0 project.
simple
import {Socket} from 'vendor/phoenix' in my Controller does not transpile the lib into ES5
app.import('vendor/phoenix.js', {exports: {phoenix: ['Socket']}}) in my ember-cli-build.js does not transpile the lib into ES5 either.
I have also tried
https://stackoverflow.com/a/29659509/255633 --
could not make it work due to named exports. (Error: Entry module can only have named exports in strict mode (pass ``strict: true``)
When I just modify the library to use default export the error went away but the library was not available for import. Looks like Broccoli didn't merge the lib into the tree.
here is my ember-cli-build.js :
var tree = './vendor';
var amdFiles = new ES6Modules(tree, {
format: 'amd',
bundleOptions: {
entry: 'phoenix.js',
name: 'phoenix'
}
});
return mergeTrees([app.toTree(), amdFiles]);
When you import an ES6 file into an ember app you need to have ember run the file through the transpiler so to do this you can simply do the import in your controller. The issue is that ember needs to have the file in the app folder in order to be able to import it.
So place the JavaScript file inside the app folder under say:
app/phoenixjs
then in your controller:
import phoenix from 'PROJECTNAME/phoenixjs/phoenix
then you can use the phoenix object anywhere in that file.
working Proof:
EDIT
being able to use a named import by
import {Socket} from 'import-test-app/extends/phoenix';
import Ember from 'ember';
export default Ember.Controller.extend({
test:Socket.name
});
in the template test is "Socket"
I have an ember app, and a folder with a file playGame/game.js. This file includes game logic, and I want to import it for asset compilation.
If this file is under app/playGame/game.js and my Brocfile is like this:
app.import('app/playGame/game.js')
this gives the error, path or pattern app/playGame/game.js didn't match any files..
but if I put the file under bower_components/playGame/game.js and my Brocfile:
app.import('bower_components/playGame/game.js'), this compiles successfully.
What is the problem and solution here?
There are two parts to this:
Where should I put my file to import it as an asset?
Why isn't putting it in my app-folder working?
The way to do what you want is to create a folder called vendor in your root, put the file somewhere in there, and then import it in your Brocfile.js like so:
app.import('vendor/playGame/game.js');
This is documented on ember-cli.com, although somewhat hidden.
You could also put it in bower_components, but that folder is for things installed with bower, and could theoretically be deleted (in fact, this is a common recommendation to various issues). Things in bower_components is also not checked in to version control by default, which you probably want to do in this case.
This should solve your issue.
Now, why doesn't it work to put it in /app?
app is a special folder. From the documentation:
Contains your Ember application’s code. Javascript files in this
folder are compiled through the ES6 module transpiler and concatenated
into a file called app.js.
This is what makes it possible for you to import stuff from within your app. The folders in app is available directly under your <appname> namespace, along with some other files and folders like config/environment.
Example:
import myWidget from 'my-app/widgets/my-widget';`
The referenced file is /app/widgets/my-widget.js.
The ember-cli website has some more resources for how to use modules. Read those if this doesn't make any sense.
To sum up:
You could put your file in app, but that would make it part of your transpiled package, and you'd have to use it that way internally with an export and everything else that comes with it. It would end up as part of <appname>.js
You could put your file in vendor and import it in your Brocfile.js as explained above. It would be part of vendor.js and load before your app code.
I want to add an SDK type to ember-cli to wrap up complex ajax calls into a simple javascript wrapper returning a known format of POJO that can be tested.
I added an app/sdk/login.js and exported a simple empty class there. When I import it elsewhere I get a broccoli error:
ENOENT, no such file or directory 'F:\Projects\insm-ui\tmp\tree_merger-tmp_dest_
dir-JOQL1Mli.tmp\sdk\login.js'
Standard ember-cli way:
// sdk/login.js
import Ember from 'ember';
export function initialize(container, application) {
container.register('sdk:login', LoginSdk);
}
export default Ember.Object.extend({
});
// somewhere else
import LoginSdk from 'sdk/login'; // this line errors as above in broccoli
What's the correct way to do this?
You need to use relative paths for local files in your import statement. You didn't give the path to the "somewhere else" file. But let's say it's a controller at app/controllers/my-controller.js and your sdk is at app/sdk/login.js.
You could import it in the controller like:
import LoginSdk from '../sdk/login';
So this is a really basic question. In all my blueprinted files, I see import statements such as:
import DS from 'ember-data';
Now I know that the build process is finding these in the vendor directory where bower installed them. Recently, I added moment.js, and I'd like to create a helper using it. However, there must be an additional naming convention that's being used because I can't simply
import moment from 'moment';
-- it claims it cannot find it in the tree merger. What is the right way to tell Broccoli where to find things when I want to import them?
Here is how I got things to work.
Install moment.js using bower install
Add the following line in Brocfile.js
app.import('vendor/moment/min/moment.min.js');
In your code, you do NOT have to import moment as it is NOT a ES6 module. You can call moment directly. For example,
var currDate = moment();
In the files where you use moment, don't forget to add the below comment as the first line of your file. You need to do this to avoid the jshint errors shown by ember-cli when you build the code
/* global moment:true */
Hope this helps!