In my project if I include bootstrap's javascrpt file via
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.min.js'); in ember-cli-build.js I get a bunch of js errors.
If instead I include it in index.html it works fine. Any idea what could be causing this?
Error-
SyntaxError: export declarations may only appear at top level of a module
I can think of 3 things to try here:
Link to the full file. I had this line in a (pretty old) app that worked fine:
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
Make sure you app.import is inside of the main module.exports declaration in your ember cli build.
You might also try testing it out with a different bower package to see if the problem is bootstrap or your app.
If all else fails (and even if it succeeds), I highly recommend using ember bootstrap instead. It will handle the stylesheets for you and provide some Ember friendly ways to implement bootstrap components. You won't need to do the import anymore. Overall, it's best to avoid mixing libraries that modify the DOM (like plain bootstrap) with ember components. http://www.ember-bootstrap.com
Related
What is the correct way to use Ember js with three.js. I have tried using it with cdn by editing the index.html file which works fine but i get warning in ember-cli about THREE not being defined. Also installing it with bower and using app.import gave me similar warnings.
The app works all fine but i wanted to know what is the best way to import in this case three.js into an ember application without the warnings.
That is a JSHint warning because it isn't aware of the global THREE variable you're trying to access. You have two ways to fix it:
Put a globals directive at the top of the file that uses the variable.
Setup .jshintrc's predef.
Hope this helps!
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.
I'm writing an Ember.js application using Ember Cli, and I want to include a non-bower dependency - basically a dependency from my vendor folder.
The instructions on doing so is telling me to add the following line into my ember-cli-build.js file:
app.import('vendor/dependency-to-include.js');
That would work fine with a normal ES5 flavored dependency, but what if I want to add a dependency written in ES6?
Right now it just delivers it to the browser untouched, which produces an error like:
Uncaught SyntaxError: Unexpected reserved word
because my ES6 flavored dependency uses the following syntax:
import Util from './util
I'm guessing that I need to tell ember-cli-build to transpile this particular dependency before passing it on to the browser, but how do I go about doing that?
Thanks
For transpiling imported dependencies you need to run the imported file(s) through the broccoli addon broccoli-babel-transpiler. For a basic example, checkout this file: https://github.com/thefrontside/ember-impagination/blob/2fa38d26ef1b27a3db7df109faa872db243e5e4c/index.js. You can adapt this addon to an in-repo addon for your project.
See this link for the background discussion and #rwjblue and #cowboyd on the actual fix: https://github.com/ember-cli/ember-cli/issues/2949
Are you currently including Babel within your project? I would have thought that it checks your vendor directory the same as it does everything else and converts the ES6 code to ES5.
The other option would be to just convert the file to ES5 manually whenever you need to include a vendor file with ES6 syntax. Not necessarily ideal, but if it's a static file then it's something you'll need to do once and then forget about.
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 run into an issue where ember-i18n can be used with an ember-cli server running in development environment. But when I set --environment production I get the following error:
Error: The default Ember.I18n.compile function requires the full Handlebars. Either include the full Handlebars or override Ember.I18n.compile.
The error occurres because ember-cli includes Handlebars-production on production environment. Is there a solution for this problem?
I think I need to precompile the translations.
One way to fix this is to configure ember-cli to include the full handlebars version on production:
app.import({
development: 'vendor/handlebars/handlebars.js',
production: 'vendor/handlebars/handlebars.js'
});
A drawback is that the (much) bigger library is included in the build, only for my translations. I keep looking for a way to precompile my translations.
There is no way to get around importing the full handlebars when using ember-i18n. You do not need to specify the same string import for development and production though. Just add this to your Brocfile:
app.import('vendor/handlebars/handlebars.js');
I had exactly the same issue and this is the solution that Stefan Penner advised. https://github.com/stefanpenner/ember-cli/pull/675#issuecomment-47431195. Worked fine for me. One thing to note though, for some reason I had the import statement as the first import. When it was the last one it didn't seem to work. I didn't try anywhere in between though, or try to debug that issue.