Import Custom Fonts in Ionic 2 - ionic2

I have used custom fonts in Ionic 2. When I do ionic serve, the fonts are visible in the browser. But, after building apk (ionic build android), the fonts are not reflected in the android app. Don't mind helping!!

The fonts in the build disappers every time as the gulp build cleans the build folder everytime. To avoid this you need to include the gulp tasks in the gulpfile.ts.
Modify the below changes to your gulpfile.ts.
Include gulp task for adding icon css and fonts to your build
gulp.task('myCss', function(){
return gulp.src('path-to-your-font-lib/style.css')
.pipe(gulp.dest('www/build/css'))
});
gulp.task('myFonts', function(){
return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
.pipe(gulp.dest('www/build/fonts'))
});
Modify your gulp build and watch task as follows (Adding your font and css on watch and build)
gulp.task('watch', ['clean'], function(done){
//existing ionic2 code
}
gulp.task('build', ['clean','myCss','myFonts'], function(done){
//existing ionic2 code
}

Related

Angular 5 build and Zone.js

Have the picture error after build my angular 5 app, i serve my app with a django view.
I added the zone.js dependencie in my angular package.json file but i get the same error.
this is my Github gists view and template, the view load all files in the static path. this works fine.
Regards
Solve, the error it's the order of the scripts load by my django view, the view load the scripts in the folders order, but most be the next:
inline
polyfills
scripts
main

django with react using web pack

I have added react js in django using webpack loader
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles4/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
First time all things are OK.
But when I change any code in react then don't change application with new code.
Is it cache problem?
It is not a cache issue. You need to compile your bundle with your current settings in order to get the new bundles reflecting the changes.
You can run this on your command line to compile your new bundle:
./node_modules/.bin/webpack --config webpack.config.js
This should create a bundle at assets/bundles/main-{XXXX}.js where {XXXX} is a hash.
But you don’t want to create bundles manually every time you make changes to your code.
You can run on your command line:
./node_modules/.bin/webpack --config webpack.config.js --watch
This will leave the compiler running and compile bundles automatically when you change any of your source files. You’ll need to restart it if you make any changes to the webpack configuration though.
To go further, you can look at webpack-dev-server and react-hot-loader for hot reloading your components:
npm install --save-dev webpack-dev-server react-hot-loader
I personally prefer create-react-app, they do everything for you, you don't have to worry about the webpack configurations. I've created a sample github gist to show you how simple it is to integrate django with create-react-app.
https://gist.github.com/ibrahimawadhamid/dd4091196b0c7b25cca33d72b044efaf

Exclude jQuery from vendor.js in ember-cli

Is it possible to exclude jQuery dependency from vendor.js in ember-cli when building for production only? I want to include it separately in my site.
You can control which files will be used in development or production using a hash like configuration. In your case you should use:
var app = new EmberApp({
vendorFiles: {
'jquery.js': {
development: 'bower_components/jquery/dist/jquery.js',
production: false
}
}
});
Refer to Customizing a built-in asset section for further info.
At the end the only thing worked for me was this:
var app = new EmberApp({
vendorFiles: {
production: false,
development: 'bower_components/jquery/dist/jquery.js'
}
});
This will exclude it in production but not in development.
This is a rather simple matter, check the bower.json file in your directory and remove the jquery entry, or simply run bower uninstall jquery --save in the cli.
Oups missed the in production only, well you can save it as a dev-dependency that way it's not included in the build.
So remove jquery and then run bower install --save-dev jquery

ember-cli meta config/environment file

I'm using ember-cli to structure my app.
It compiles all the files to the dist/ directory.
However as I inspected the compiled index.html I noticed it was creating this meta tag.
<meta name="user/config/environment" content="%7B%22modulePrefix%22%3A%22user%22%2C%22environment%22%3A%22development%22%2C%22baseURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22contentSecurityPolicy%22%3A%7B%22default-src%22%3A%22%27none%27%20localhost%22%2C%22script-src%22%3A%22%27self%27%20%27unsafe-inline%27%20%27unsafe-eval%27%20use.typekit.net%20connect.facebook.net%20maps.googleapis.com%20maps.gstatic.com%22%2C%22font-src%22%3A%22%27self%27%20data%3A%20use.typekit.net%22%2C%22connect-src%22%3A%22%27self%27%20localhost%22%2C%22img-src%22%3A%22%27self%27%20www.facebook.com%20p.typekit.net%22%2C%22style-src%22%3A%22%27self%27%20%27unsafe-inline%27%20use.typekit.net%22%2C%22frame-src%22%3A%22s-static.ak.facebook.com%20static.ak.facebook.com%20www.facebook.com%22%7D%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Atrue%2C%22LOG_VIEW_LOOKUPS%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Atrue%7D">
This is a problem for my deployment as I'm currently using the ember-app within another page and this meta tag is needed for the ember app to work. Is there a way to make this as part of the javascript compiled file or get rid of this altogether?
The ability to build your app without this was recently added in this PR
You can set it up to be in your compiled JS output by passing in the storeConfigInMeta option. To opt-out, it should look like this in your Brocfile.js
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
storeConfigInMeta: false
});
module.exports = app.toTree();
This is available in ember-cli 0.1.2 which is the latest version right now

Ember cli and testem

I'm new to Ember, and I'd like to get a simple project up and running, and have some integration tests running in chrome.
I bought the book "Developing an Ember.js Edge" where they create the application ember-trackr but as all things in the JS world move fast, details seem to have changed.
If I:
git clone https://github.com/developing-an-emberjs-edge/ember-trackr
cd ember-trackr
testem
I get an error:
Error running before_tests hook
┃
┃before_tests hook: "ember build -c"
┃version: 0.0.41
┃You have to be inside an ember-cli project in order to use the build command.
I'm not sure but I think the steps in http://emberjs.com/guides/testing/integration/ are already taken care of when using
ember new <appname>
So, if I create a new app and run testem:
ember new testem-test
cd testem-test
testem
I see the 'waiting for runners' message in the console and chrome launces.
Now if I try to add a trivial test (say, to check the page content for some text - copied from http://www.ember-cli.com/#testing) as tests/test1.js:
import Ember from "ember";
import { test } from 'ember-qunit';
import startApp from 'helpers/start-app';
var App;
module('An Integration test', {
setup: function() {
App = startApp();
},
teardown: function() {
Ember.run(App, App.destroy);
}
});
test("Page contents", function() {
expect(2);
visit('/foos').then(function() {
equal(find('.foos-list').length, 1, "Page contains list of models");
equal(find('.foos-list .foo-item').length, 5, "List contains expected number of models");
});
});
If I run 'testem', I just get the waiting for runners message.
If I run 'ember test' I get:
~/IdeaProjects/spike/testem-test (master) $ ember test
version: 0.0.41
Build failed.
ENOENT, no such file or directory '/Users/paul/IdeaProjects/spike/testem-test/tmp/tree_merger-tmp_dest_dir-2QJNmsEl.tmp/helpers/start-app.js'
File: helpers/start-app.js
Does anyone have any clues as to what I'm missing?
Also, if it hasn't been done already, it would be nice to keep the ember-trackr sample app up to date with ember-cli so it runs out of the box - I'd be happy to contribute if I can figure out what its missing...
Thanks.
For the first part of your problem, yes ember-cli has changed, and you have to migrate that project. I would do that for 100 bounty.
For the second part, you don't have to create a test from scratch:
run ember generate acceptance-test test1 and it will do the boilerplate for you.
the specific error message can be fixed by updating this line:
import startApp from '../helpers/start-app';