I have a React app that uses an external shared directory at the top level, shared-js, that is located outside of the src directory of my app. I want to enable Hot Module Replacement (HMR) for this shared module so that I can see changes to it in real-time without having to reload the entire app (for example if I change a console.log within a file in that directory).
I have already tried adding webpack.HotModuleReplacementPlugin() to my webpack.config.js file and adding the following code to my index.js file in the shared-js module:
if (module.hot) { module.hot.accept();}
However, HMR still does not work for changes made to the shared-js module.
How can I enable HMR for the shared-js module in my React app?
What I have tried:
Adding webpack.HotModuleReplacementPlugin() to webpack.config.js
Adding if (module.hot) { module.hot.accept(); } to index.js in shared-js
Code:
Here is my current webpack.config.js file:
const paths = require("./paths");
module.exports = {
entry: {
main: paths.appIndexJs,
shared: "../libs/shared-js/index.js",
},
output: {
path: paths.appBuild,
filename: "[name].bundle.js",
},
module: {
rules: [
// ...
],
},
plugins: [
// ...
new webpack.HotModuleReplacementPlugin(),
],
// ...
};
And here is my index.js file in shared-js:
'use strict';
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
__exportStar(require("./types"), exports);
__exportStar(require("./core"), exports);
__exportStar(require("./testing"), exports);
if (module.hot) {
module.hot.accept();
}
As someone new to React/web dev, I would like to clarify if hot reloading is what I need to change in order to have React automatically update files to browser without the need to rerun yarn start, or if there is something else that must be changed. Thank you!
I'm trying to upload a multipart form in nativescript and I'm using http-background. I keep getting the error Class constructor Observable cannot be invoked without 'new'. I've tried changing the compilerOptions target to es5 and es2017, but nothing changed.
Here's all my code from the component.
onSave(){
console.log("clicked")
this.proccessImageUpload(this.file);
}
public onSelectSingleTap() {
this.isSingleMode = true;
let context = imagepicker.create({
mode: "single"
});
this.startSelection(context);
}
private startSelection(context) {
let that = this;
context
.authorize()
.then(() => {
that.imageAssets = [];
that.imageSrc = null;
return context.present();
})
.then((selection) => {
console.log("Selection done: " + JSON.stringify(selection));
this.file = selection[0]._android;
that.imageSrc = that.isSingleMode && selection.length > 0 ? selection[0] : null;
// set the images to be loaded from the assets with optimal sizes (optimize memory usage)
selection.forEach(function (element) {
element.options.width = that.isSingleMode ? that.previewSize : that.thumbSize;
element.options.height = that.isSingleMode ? that.previewSize : that.thumbSize;
});
that.imageAssets = selection;
}).catch(function (e) {
console.log(e);
});
}
// proccess image function
proccessImageUpload(fileUri) {
var backgroundHttp = require("nativescript-background-http");
return new Promise((resolve, reject) => {
// body...
var request = {
url: 'http://192.168.0.2:4000/api/posts',
method: "POST",
headers: {
"Content-Type": "application/octet-stream",
"user_id": "<user_id>"
},
description: 'Uploading profile image..',
androidAutoDeleteAfterUpload: false,
androidNotificationTitle: 'Profile image'
}
var params = [
{ name: "title", value: "test" },
{ name: "content", value: "test" },
{ name: "fileToUpload", filename: fileUri, mimeType: "image/jpeg" }
];
var backgroundSession = backgroundHttp.session('image-upload');
var task = backgroundSession.uploadFile(fileUri, request);
task.on("progress", (e) => {
// console log data
console.log(`uploading... ${e.currentBytes} / ${e.totalBytes}`);
});
task.on("error", (e) => {
// console log data
console.log(`Error processing upload ${e.responseCode} code.`);
reject(`Error uploading image!`);
});
task.on("responded", (e) => {
// console log data
console.log(`received ${e.responseCode} code. Server sent: ${e.data}`);
// var uploaded_response = JSON.parse(e.data);
});
task.on("complete", (e) => {
// console log data
console.log(`upload complete!`);
console.log(`received ${e.responseCode} code`);
// console.log(e.data);
})
resolve(task);
});
}
I know the issue is coming from this line.
var task = backgroundSession.uploadFile(fileUri, request);
Any help would be greatly appreciated!
You use old version if nativescript-background-http plugin
You have to install latest version
tns plugin add #nativescript/background-http
I was able to get this working by installing tns version 6.
I had exactly the same problem. I got this from slack.com, compliments Chris Vietor
"tns plugin add nativescript-background-http" works with nativescript 6.
"tns plugin add #nativescript/background-http" works with nativescript 7.
I am using JHipster 3.8 with UI-Grid i.e. ui-grid.info when i run the application locally its working fine. But when i deploy to Docker using this command
./gradlew bootRepackage -Pprod buildDocker
docker-compose -f src/main/docker/app.yml up
i can see below error in developer console regarding fonts
generated.js:174220 GET http://192.168.99.100:8585/content/css/ui-grid-f53764c7a4.woff
GET http://192.168.99.100:8585/content/css/ui-grid-c6fa199a3e.ttf
and the page display with some character instead of icon as below :-
i have got couple solution for UI Grid link1 link2, but its not working for me, because as per the error file name and location are different, as gulp making such changes.
Not sure how to fix this issue. Can some once guide me?
EDIT
My Gulp File:-
// Generated on 2016-09-20 using generator-jhipster 3.7.1
'use strict';
var gulp = require('gulp'),
expect = require('gulp-expect-file'),
es = require('event-stream'),
flatten = require('gulp-flatten'),
sass = require('gulp-sass'),
rev = require('gulp-rev'),
templateCache = require('gulp-angular-templatecache'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
ngConstant = require('gulp-ng-constant'),
rename = require('gulp-rename'),
eslint = require('gulp-eslint'),
argv = require('yargs').argv,
gutil = require('gulp-util'),
protractor = require('gulp-protractor').protractor,
del = require('del'),
runSequence = require('run-sequence'),
browserSync = require('browser-sync'),
KarmaServer = require('karma').Server,
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
gulpIf = require('gulp-if');
var handleErrors = require('./gulp/handle-errors'),
serve = require('./gulp/serve'),
util = require('./gulp/utils'),
copy = require('./gulp/copy'),
inject = require('./gulp/inject'),
build = require('./gulp/build');
var config = require('./gulp/config');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('copy', ['copy:i18n', 'copy:fonts', 'copy:common']);
gulp.task('copy:i18n', copy.i18n);
gulp.task('copy:languages', copy.languages);
gulp.task('copy:fonts', copy.fonts);
gulp.task('copy:common', copy.common);
gulp.task('copy:swagger', copy.swagger);
gulp.task('copy:images', copy.images);
gulp.task('images', function () {
return gulp.src(config.app + 'content/images/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/images'))
.pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/images'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('sass', function () {
return es.merge(
gulp.src(config.sassSrc)
.pipe(plumber({errorHandler: handleErrors}))
.pipe(expect(config.sassSrc))
.pipe(changed(config.cssDir, {extension: '.css'}))
.pipe(sass({includePaths:config.bower}).on('error', sass.logError))
.pipe(gulp.dest(config.cssDir)),
gulp.src(config.bower + '**/fonts/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.app + 'content/fonts'))
.pipe(flatten())
.pipe(gulp.dest(config.app + 'content/fonts'))
);
});
gulp.task('copyAngularUiGridFonts', function() {
gulp.src(config.app + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
.pipe(gulp.dest(config.dist + 'content/css/'));
});
gulp.task('styles', ['sass'], function () {
return gulp.src(config.app + 'content/css')
.pipe(browserSync.reload({stream: true}));
});
gulp.task('inject', function() {
runSequence('inject:dep', 'inject:app');
});
gulp.task('inject:dep', ['inject:test', 'inject:vendor']);
gulp.task('inject:app', inject.app);
gulp.task('inject:vendor', inject.vendor);
gulp.task('inject:test', inject.test);
gulp.task('inject:troubleshoot', inject.troubleshoot);
gulp.task('assets:prod', ['images', 'styles', 'html', 'copy:swagger', 'copy:images'], build);
gulp.task('html', function () {
return gulp.src(config.app + 'app/**/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(templateCache({
module: 'dashboardApp',
root: 'app/',
moduleSystem: 'IIFE'
}))
.pipe(gulp.dest(config.tmp));
});
gulp.task('ngconstant:dev', function () {
return ngConstant({
name: 'dashboardApp',
constants: {
VERSION: util.parseVersion(),
DEBUG_INFO_ENABLED: true
},
template: config.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(config.app + 'app/'));
});
gulp.task('ngconstant:prod', function () {
return ngConstant({
name: 'dashboardApp',
constants: {
VERSION: util.parseVersion(),
DEBUG_INFO_ENABLED: false
},
template: config.constantTemplate,
stream: true
})
.pipe(rename('app.constants.js'))
.pipe(gulp.dest(config.app + 'app/'));
});
/*gulp.task('fonts:prod', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter(config.bower + 'angular-ui-grid/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.tmp + 'content/css/'));
});*/
// check app for eslint errors
gulp.task('eslint', function () {
return gulp.src(['gulpfile.js', config.app + 'app/**/*.js'])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failOnError());
});
// check app for eslint errors anf fix some of them
gulp.task('eslint:fix', function () {
return gulp.src(config.app + 'app/**/*.js')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(eslint({
fix: true
}))
.pipe(eslint.format())
.pipe(gulpIf(util.isLintFixed, gulp.dest(config.app + 'app')));
});
gulp.task('test', ['inject:test', 'ngconstant:dev'], function (done) {
new KarmaServer({
configFile: __dirname + '/' + config.test + 'karma.conf.js',
singleRun: true
}, done).start();
});
/* to run individual suites pass `gulp itest --suite suiteName` */
gulp.task('protractor', function () {
var configObj = {
configFile: config.test + 'protractor.conf.js'
};
if (argv.suite) {
configObj['args'] = ['--suite', argv.suite];
}
return gulp.src([])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(protractor(configObj))
.on('error', function () {
gutil.log('E2E Tests failed');
process.exit(1);
});
});
gulp.task('itest', ['protractor']);
gulp.task('watch', function () {
gulp.watch('bower.json', ['install']);
gulp.watch(['gulpfile.js', 'build.gradle'], ['ngconstant:dev']);
gulp.watch(config.sassSrc, ['styles']);
gulp.watch(config.app + 'content/images/**', ['images']);
gulp.watch(config.app + 'app/**/*.js', ['inject:app']);
gulp.watch([config.app + '*.html', config.app + 'app/**', config.app + 'i18n/**']).on('change', browserSync.reload);
});
gulp.task('install', function () {
runSequence(['inject:dep', 'ngconstant:dev'], 'sass', 'copy:languages', 'inject:app', 'inject:troubleshoot');
});
gulp.task('serve', ['install'], serve);
gulp.task('build', ['clean'], function (cb) {
runSequence(['copy','copyAngularUiGridFonts', 'inject:vendor', 'ngconstant:prod', 'copy:languages'], 'inject:app', 'inject:troubleshoot', 'assets:prod', cb);
});
gulp.task('default', ['serve']);
EDIT:-
buildscript {
repositories {
mavenLocal()
mavenCentral()
jcenter()
maven { url "http://repo.spring.io/plugins-release" }
maven { url "http://repo.spring.io/milestone" }
maven { url "https://plugins.gradle.org/m2/" }
}
dependencies {
classpath "org.sonarsource.scanner.gradle:sonarqube-gradle-plugin:2.0.1"
classpath "net.ltgt.gradle:gradle-apt-plugin:0.6"
classpath "org.springframework.boot:spring-boot-gradle-plugin:${spring_boot_version}"
classpath "org.springframework.build.gradle:propdeps-plugin:0.0.7"
classpath "com.moowork.gradle:gradle-node-plugin:0.12"
classpath "com.moowork.gradle:gradle-gulp-plugin:0.12"
classpath "se.transmode.gradle:gradle-docker:1.2"
classpath "io.spring.gradle:dependency-management-plugin:0.5.6.RELEASE"
//jhipster-needle-gradle-buildscript-dependency - JHipster will add additional gradle build script plugins here
}
}
apply plugin: 'java'
sourceCompatibility=1.8
targetCompatibility=1.8
apply plugin: 'maven'
apply plugin: 'spring-boot'
apply plugin: 'war'
apply plugin: 'propdeps'
apply plugin: 'io.spring.dependency-management'
/* downgrade Hibernate to 4.3 */
ext['hibernate.version'] = '${hibernate_entitymanager_version}'
defaultTasks 'bootRun'
sourceSets {
generated {
java {
srcDirs = ['src/main/generated']
}
}
}
bootRepackage {
mainClass = 'com.equidity.dashboard.XboardApp'
}
war {
}
springBoot {
mainClass = 'com.equidity.dashboard.XboardApp'
executable = true
buildInfo()
}
bootRun {
addResources = false
}
apply from: 'gradle/yeoman.gradle'
apply from: 'gradle/sonar.gradle'
apply from: 'gradle/liquibase.gradle'
apply from: 'gradle/gatling.gradle'
apply from: 'gradle/mapstruct.gradle'
apply from: 'gradle/docker.gradle'
//jhipster-needle-gradle-apply-from - JHipster will add additional gradle scripts to be applied here
if (project.hasProperty('prod')) {
apply from: 'gradle/profile_prod.gradle'
} else {
apply from: 'gradle/profile_dev.gradle'
}
group = 'com.equidity.dashboard'
version = '0.0.1-SNAPSHOT'
description = ''
configurations {
providedRuntime
compile.exclude module: "spring-boot-starter-tomcat"
}
repositories {
mavenLocal()
mavenCentral()
jcenter()
maven { url 'http://repo.spring.io/milestone' }
maven { url 'http://repo.spring.io/snapshot' }
maven { url 'https://repository.jboss.org/nexus/content/repositories/releases' }
maven { url 'https://oss.sonatype.org/content/repositories/releases' }
maven { url 'https://oss.sonatype.org/content/repositories/snapshots' }
maven { url 'http://repo.maven.apache.org/maven2' }
}
dependencies {
compile "io.dropwizard.metrics:metrics-core"
compile "io.dropwizard.metrics:metrics-graphite:${dropwizard_metrics_version}"
compile "io.dropwizard.metrics:metrics-healthchecks:${dropwizard_metrics_version}"
compile "io.dropwizard.metrics:metrics-jvm:${dropwizard_metrics_version}"
compile "io.dropwizard.metrics:metrics-servlet:${dropwizard_metrics_version}"
compile "io.dropwizard.metrics:metrics-json:${dropwizard_metrics_version}"
compile ("io.dropwizard.metrics:metrics-servlets:${dropwizard_metrics_version}") {
exclude(module: 'metrics-healthchecks')
}
compile("net.logstash.logback:logstash-logback-encoder:${logstash_logback_encoder_version}") {
exclude(module: 'ch.qos.logback')
}
compile "com.fasterxml.jackson.datatype:jackson-datatype-json-org:${jackson_version}"
compile "com.fasterxml.jackson.datatype:jackson-datatype-hppc:${jackson_version}"
compile "com.fasterxml.jackson.datatype:jackson-datatype-jsr310:${jackson_version}"
compile "com.fasterxml.jackson.datatype:jackson-datatype-hibernate4"
compile "com.fasterxml.jackson.core:jackson-annotations:${jackson_version}"
compile "com.fasterxml.jackson.core:jackson-databind:${jackson_version}"
compile ("com.ryantenney.metrics:metrics-spring:${metrics_spring_version}") {
exclude(module: 'metrics-core')
exclude(module: 'metrics-healthchecks')
}
compile "com.hazelcast:hazelcast:${hazelcast_version}"
compile "com.hazelcast:hazelcast-hibernate4:${hazelcast_version}"
compile "com.hazelcast:hazelcast-spring:${hazelcast_version}"
compile "com.hazelcast:hazelcast-wm:${hazelcast_version}"
compile "org.hibernate:hibernate-core:${hibernate_entitymanager_version}"
compile("com.zaxxer:HikariCP:${HikariCP_version}") {
exclude(module: 'tools')
}
compile "org.apache.commons:commons-lang3:${commons_lang_version}"
compile "commons-io:commons-io:${commons_io_version}"
compile "javax.inject:javax.inject:${javax_inject_version}"
compile "javax.transaction:javax.transaction-api"
compile "org.apache.geronimo.javamail:geronimo-javamail_1.4_mail:${geronimo_javamail_1_4_mail_version}"
compile "org.hibernate:hibernate-envers"
compile "org.hibernate:hibernate-validator"
compile ("org.liquibase:liquibase-core:${liquibase_core_version}") {
exclude(module: 'jetty-servlet')
}
compile "com.mattbertolini:liquibase-slf4j:${liquibase_slf4j_version}"
compile "org.springframework.boot:spring-boot-actuator"
compile "org.springframework.boot:spring-boot-autoconfigure"
compile "org.springframework.boot:spring-boot-loader-tools"
compile "org.springframework.boot:spring-boot-starter-logging"
compile "org.springframework.boot:spring-boot-starter-aop"
compile "org.springframework.boot:spring-boot-starter-data-jpa"
compile "org.springframework.boot:spring-boot-starter-data-elasticsearch"
// needed to get around elasticsearch stacktrace about jna not found
// https://github.com/elastic/elasticsearch/issues/13245
compile "net.java.dev.jna:jna:${jna_version}"
compile "org.springframework.boot:spring-boot-starter-security"
compile ("org.springframework.boot:spring-boot-starter-web") {
exclude module: 'spring-boot-starter-tomcat'
}
compile "org.springframework.boot:spring-boot-starter-undertow"
compile "org.springframework.boot:spring-boot-starter-websocket"
compile "org.springframework.boot:spring-boot-starter-thymeleaf"
compile "org.springframework.cloud:spring-cloud-cloudfoundry-connector"
compile "org.springframework.cloud:spring-cloud-spring-service-connector"
compile "org.springframework.cloud:spring-cloud-localconfig-connector"
compile ("org.springframework:spring-context-support") {
exclude(module: 'quartz')
}
compile "org.springframework.security:spring-security-config:${spring_security_version}"
compile "org.springframework.security:spring-security-data:${spring_security_version}"
compile "org.springframework.security:spring-security-web:${spring_security_version}"
compile "org.springframework.security:spring-security-messaging:${spring_security_version}"
compile("io.springfox:springfox-swagger2:${springfox_version}"){
exclude module: 'mapstruct'
}
compile "mysql:mysql-connector-java"
compile "fr.ippon.spark.metrics:metrics-spark-reporter:${metrics_spark_reporter_version}"
compile "org.mapstruct:mapstruct-jdk8:${mapstruct_version}"
compile "org.apache.httpcomponents:httpclient"
compile "org.springframework.social:spring-social-security"
compile "org.springframework.social:spring-social-google:${spring_social_google_version}"
compile "org.springframework.social:spring-social-facebook"
compile "org.springframework.social:spring-social-twitter"
testCompile "com.jayway.awaitility:awaitility:${awaility_version}"
testCompile "com.jayway.jsonpath:json-path"
testCompile "info.cukes:cucumber-junit:${cucumber_version}"
testCompile "info.cukes:cucumber-spring:${cucumber_version}"
testCompile "org.springframework.boot:spring-boot-starter-test"
testCompile "org.springframework.security:spring-security-test"
testCompile "org.springframework.boot:spring-boot-test"
testCompile "org.assertj:assertj-core:${assertj_core_version}"
testCompile "junit:junit"
testCompile "org.mockito:mockito-core"
testCompile "com.mattbertolini:liquibase-slf4j:${liquibase_slf4j_version}"
testCompile "org.hamcrest:hamcrest-library"
testCompile "io.gatling.highcharts:gatling-charts-highcharts:${gatling_version}"
testCompile "com.h2database:h2"
optional "org.springframework.boot:spring-boot-configuration-processor:${spring_boot_version}"
//jhipster-needle-gradle-dependency - JHipster will add additional dependencies here
compile "com.querydsl:querydsl-core:${queryDslVersion}"
compile "com.querydsl:querydsl-jpa:${queryDslVersion}"
compile "com.querydsl:querydsl-apt:${queryDslVersion}"
querydslapt "com.querydsl:querydsl-apt:${queryDslVersion}"
}
clean {
delete "target"
}
task cleanResources(type: Delete) {
delete 'build/resources'
}
task wrapper(type: Wrapper) {
gradleVersion = '3.1'
}
task stage(dependsOn: 'bootRepackage') {
}
compileJava.dependsOn processResources
processResources.dependsOn cleanResources,bootBuildInfo
bootBuildInfo.mustRunAfter cleanResources
EDIT :- Profile_prod.gradle
import org.apache.tools.ant.taskdefs.condition.Os
apply plugin: 'spring-boot'
apply plugin: 'com.moowork.node'
apply plugin: 'com.moowork.gulp'
ext {
logbackLoglevel = "INFO"
}
dependencies {
}
def profiles = 'prod'
if (project.hasProperty('no-liquibase')) {
profiles += ',no-liquibase'
}
if (project.hasProperty('swagger')) {
profiles += ',swagger'
}
bootRun {
args = []
}
task gulpBuildWithOpts(type: GulpTask) {
args = ["build", "--no-notification"]
}
war {
webAppDirName = 'build/www/'
}
processResources {
filesMatching('**/logback-spring.xml') {
filter {
it.replace('#logback.loglevel#', logbackLoglevel)
}
}
filesMatching('**/application.yml') {
filter {
it.replace('#spring.profiles.active#', profiles)
}
}
}
gulpBuildWithOpts.dependsOn 'npmInstall'
gulpBuildWithOpts.dependsOn 'bower'
processResources.dependsOn gulpBuildWithOpts
test.dependsOn gulp_test
bootRun.dependsOn gulp_test
As described in in the links that you provided, you need a task in gulpfile.js which copy the missing files. You can use the following code to your existing copy task e.g.:
gulp.src(config.app + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/css/'))
.pipe(flatten())
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/css/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
i.e. your copy task is gone look like this:
gulp.task('copy', function () {
return es.merge(
gulp.src(config.app + 'i18n/**')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'i18n/'))
.pipe(gulp.dest(config.dist + 'i18n/')),
gulp.src(config.bower + 'bootstrap/fonts/*.*')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/fonts/'))
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/fonts/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
gulp.src(config.app + '/bower_components/angular-ui-grid/*.{ttf,woff,eof,svg}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/css/'))
.pipe(flatten())
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/css/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
gulp.src(config.app + 'content/**/*.{woff,woff2,svg,ttf,eot,otf}')
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist + 'content/fonts/'))
.pipe(flatten())
.pipe(rev())
.pipe(gulp.dest(config.dist + 'content/fonts/'))
.pipe(rev.manifest(config.revManifest, {
base: config.dist,
merge: true
}))
.pipe(gulp.dest(config.dist)),
gulp.src([config.app + 'robots.txt', config.app + 'favicon.ico', config.app + '.htaccess'], { dot: true })
.pipe(plumber({errorHandler: handleErrors}))
.pipe(changed(config.dist))
.pipe(gulp.dest(config.dist))
);
});
Its looks like angular-grid-ui is expecting the *.{ttf,woff,eof,svg} files to be found under the content/css and not content/fonts
Well basically im looking on this problem, i have many components with dinamic stuff that is written in the server side with PHP.
Depending on the user my components will change, based on the role of the user.
So i need to know any ways/examples/info on how to do this.
1- I used the load function EXTJS has, but it clearly says i wont load script only plain text.
2- i used eval() but im a bit scared o this approach, like this example crate layout component (static)
var contentPanel = new Ext.Panel({
frame: true,
style: {marginTop: '10px'},
height: 315,
border: true,
bodyBorder: false,
layout: 'fit',
id: 'contentPanel'
});
var mainPanel = new Ext.Panel({
title: 'Panel Principal',
id: 'mainPanel',
border: true,
frame: true,
width: '50%',
style: {margin: '50px auto 0 auto'},
height: 400,
renderTo: Ext.getBody(),
items: [
{
html: 'Panel 1'
},
{
html: 'Panel 2'
},
contentPanel
]
})
and update the content of the layout with js files written on the server
function receiveContent(options, success, response)
{
var respuesta = response.responseText;
//console.log(respuesta);
eval(respuesta);
//console.log(options.url);
url = options.url;
url = url.substring(0,(url.search(/(\.)/)));
var contenedor = Ext.getCmp('contentPanel');
contenedor.removeAll();
var contenido = Ext.getCmp(url);
contenedor.add(contenido);
contenedor.doLayout();
}
function requestContent(panel)
{
//panel es el nombre del archivo que quiero
Ext.Ajax.request({
url: panel+'.js',
callback: receiveContent
});
}
any other way for this to be done, what i DONT want to do is making a million different components and load them ALL at login time like many people seem to say
To address your questions:
The .load method WILL load script and evaluate it once the content has finished loading, however to accomplish this you will need to set the scripts:true option, an example may be:
my_panel.load({
url: 'url_to_load.php/hmt/html/asp...',
params: {param1: param1value, param2: param2value...etc},
nocache: true,
timeout: 30,
scripts: true
});
Using eval() is fine...but seeing as the scripts:true config option above accomplishes this for javascript in the source file, you shouldnt need to use this.
Hope this helps
You might load JavaScript dynamically using something like like below - there are a hundred variations on the web. In this way, you would avoid the AJAX call and handling the response (and subsequent eval).
var aHeadNode = document.getElementById('head')[0];
var aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "someFile.js";
aHeadNode.appendChild(oScript);
What I understood from your question is that, you are looking for dynamic JS file loader with a callback handler i.e. the callback function will be called only when the file is loaded fully. I also faced similar problems at start and after searching a lot and doing some research, I developed the following code, it provides absolute Dynamic JS and CSS file loading functionality :
Class ScriptLoader: (Put it in a separate file and load it at first)
ScriptLoader = function() {
this.timeout = 30;
this.scripts = [];
this.disableCaching = false;
};
ScriptLoader.prototype = {
processSuccess : function(response) {
this.scripts[response.argument.url] = true;
window.execScript ? window.execScript(response.responseText) : window
.eval(response.responseText);
if (response.argument.options.scripts.length == 0) {
}
if (typeof response.argument.callback == 'function') {
response.argument.callback.call(response.argument.scope);
}
},
processFailure : function(response) {
Ext.MessageBox.show({
title : 'Application Error',
msg : 'Script library could not be loaded.',
closable : false,
icon : Ext.MessageBox.ERROR,
minWidth : 200
});
setTimeout(function() {
Ext.MessageBox.hide();
}, 3000);
},
load : function(url, callback) {
var cfg, callerScope;
if (typeof url == 'object') { // must be config object
cfg = url;
url = cfg.url;
callback = callback || cfg.callback;
callerScope = cfg.scope;
if (typeof cfg.timeout != 'undefined') {
this.timeout = cfg.timeout;
}
if (typeof cfg.disableCaching != 'undefined') {
this.disableCaching = cfg.disableCaching;
}
}
if (this.scripts[url]) {
if (typeof callback == 'function') {
callback.call(callerScope || window);
}
return null;
}
Ext.Ajax.request({
url : url,
success : this.processSuccess,
failure : this.processFailure,
scope : this,
timeout : (this.timeout * 1000),
disableCaching : this.disableCaching,
argument : {
'url' : url,
'scope' : callerScope || window,
'callback' : callback,
'options' : cfg
}
});
}
};
ScriptLoaderMgr = function() {
this.loader = new ScriptLoader();
this.load = function(o) {
if (!Ext.isArray(o.scripts)) {
o.scripts = [o.scripts];
}
o.url = o.scripts.shift();
if (o.scripts.length == 0) {
this.loader.load(o);
} else {
o.scope = this;
this.loader.load(o, function() {
this.load(o);
});
}
};
this.loadCss = function(scripts) {
var id = '';
var file;
if (!Ext.isArray(scripts)) {
scripts = [scripts];
}
for (var i = 0; i < scripts.length; i++) {
file = scripts[i];
id = '' + Math.floor(Math.random() * 100);
Ext.util.CSS.createStyleSheet('', id);
Ext.util.CSS.swapStyleSheet(id, file);
}
};
this.addAsScript = function(o) {
var count = 0;
var script;
var files = o.scripts;
if (!Ext.isArray(files)) {
files = [files];
}
var head = document.getElementsByTagName('head')[0];
Ext.each(files, function(file) {
script = document.createElement('script');
script.type = 'text/javascript';
if (Ext.isFunction(o.callback)) {
script.onload = function() {
count++;
if (count == files.length) {
o.callback.call();
}
}
}
script.src = file;
head.appendChild(script);
});
}
};
ScriptMgr = new ScriptLoaderMgr();
Now it can be used this way:
For CSS files loading :
ScriptMgr.loadCss([first.css', 'second.css']);
That is you just need to provide css files path in an array and pass that array to loadCss() function as an argument. No callback is required for CSS files.
For JS file loading :
ScriptMgr.load({
scripts : ['lib/jquery-1.4.2.min.js','lib/jquery.touch-gallery-1.0.0.min.js'],
callback : function() {
//Here you will do those staff needed after the files get loaded
},
scope : this
});
In this case, the same way you entered CSS files, here you just need to put that array of JS files in scripts option. The callback function is called only when all the JS files are loaded successfully. Also, if in any case, the JS files are already loaded in the browser (i.e. already this code is run once), then the control will automatically go to the callback function.