I was working with my Angular files and viewed it using browser-sync in gulp. The Angular views won't load in the browser and throws an error in Chrome Console that pointed out socket.io.
These are the error messages:
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.0-beta.2/$injector/nomod?p0=portfolio
Failed to load resource: net::ERR_CONNECTION_REFUSED
GET http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1452587505197-14 net::ERR_CONNECTION_REFUSED
This is in my gulpfile
var browserSync = require('browser-sync');
gulp.task('browser-sync', function () {
var files = [
'*.html',
'css/**/*.css',
'js/**/*.js'
];
browserSync.init(files, {
server: {
baseDir: './'
}
});
});
I tried to use Live Preview in Brackets. Everything works fine with Angular. Is there something I need to change in my gulp files so it will load the Angular views?
Related
I am using an esbuild API build to bundle a basic React app . But it keeps bringing up the following error Uncaught ReferenceError: require is not defined at bundle.js.Below is my build.js code.
const esbuild = require('esbuild');
async function build() {
await esbuild.build({
entryPoints: ['index.js'],
outfile: './build/bundle.js',
format: 'cjs',
loader: { '.js': 'jsx' },
});
}
build();
What I tried:
Clearing terminal history.
Deleting bundle.js and regenerating it again
Restarting vs-code.
Try to change the scope of require to the scope where you are trying to use it.
I replaced const esbuild = require('esbuild'); with import esbuild from 'esbuild'; and changed the format to iife. And it worked.
Error: Webpack Compilation Error ./client/src/containers/Login.jsx
Module not found: Error: Can't resolve 'Src/api' in
'/Users/user/Documents/product-bots/client/src/containers' resolve
'Src/api' in
'/Users/sathish/Documents/product-bots/client/src/containers' Parsed
request is a module using description file:
/Users/sathish/Documents/product-bots/client/package.json (relative
path: ./src/containers)
I am trying to set up and run cypress inside a react.js app. There is an import statement in the app that says import api from 'Src/api. Cypress fails at this point and throws the above error.
Can anyone please help me to resolve this issue?
Below is the test code
import Login from '../../../client/src/containers/Login'
describe('Login', () => {
it('Tries login', () => {
mount(<Login />)
cy.get('.login-form').should('exist')
})
})
The above code calls login.jsx which has the 'Src/api' import.
jsconfig.js:
"paths": {"Src/*": ["src/*"] }
webpack.config.js:
alias: { Src: path.resolve(Paths.srcDir)
I'm trying to create a React PWA from scratch. So far my project outputs the minified files to a dist/js folder.
In my service worker file I'm using Workbox to precache the app. This is my setting so far:
importScripts("./node_modules/workbox-sw/build/workbox-sw.js");
const staticAssets = [
"./",
"./images/favicon.png",
]
workbox.precaching.precacheAndRoute(staticAssets);
Currently if I enable offline from dev tools > Service Workers, it throws these errors and the app fails to load:
3localhost/:18 GET http://localhost:8080/js/app.min.js net::ERR_INTERNET_DISCONNECTED
localhost/:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
3:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
logger.mjs:44 workbox Precaching 0 files. 2 files are already cached.
5:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
How can I fix this?
this means your resources are not getting cached properly,
you need to add them to cache before accessing,
workbox by default do it for you.
it shows 2 files cached, as they present in your array, expected result
same do it for all remaining too.
const staticAssets = [
"./",
"./images/favicon.png",
"./js/app.min.js",
"./manifest.json",
{ url: '/index.html', revision: '383676' }
]
you can try to add eventlistener,
self.addEventListener('install', event => {
console.log('Attempting to install service worker and cache static assets');
event.waitUntil(
caches.open("staticCacheName")
.then(cache => {
return cache.addAll(staticAssets);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
I have tried the github tutorial to use JWT
https://github.com/auth0/angular2-jwt
after that I have edited the systemjs file as follow.
System.config({
packages: {
"/angular2-jwt": {
"defaultExtension": "js"
}
},
map: {
"angular2-jwt": "node_modules/angular2-jwt/angular2-jwt.js"
}
});
but im having an issue : Uncaught (in promise): Error: No provider for Http!
this error goes when I remove authHttp from the constructor.
I am not an expert in Angular and have recently started learning it, I am trying to create a responsive form in an AngularJS WEB APPLICATION which will let me upload a file or a photo from a mobile browser (not mobile app). Before I upload anything through my mobile browser, I should check the native settings of my mobile device (not browser settings but the settings of my mobile device).
To achieve this I am using ngCordova with it's wrapper $cordovaFileTransfer. I have a normal project in Eclipse and I have included below files in my index page(I have stored these files locally in my project).
cordova.js
file.js
fileTransfer.js
ng-cordova.js
ng-cordova.min.js
Since I am using Eclipse, I tried to install THyM plugin however it wouldn't install in my work space. Below is my controller code.
angular.module('app').controller(
'CordovaCtrl',
function($scope, $timeout, $cordovaFileTransfer) {
document.addEventListener("deviceready", function(
$cordovaFileTransfer) {
alert("Inside the Cordova Controller - deviceready");
var fileToUpload = "";
var options = {
fileKey : "sendFile",
fileName : "angularJSFileToUpload",
chunkedMode : false,
mimeType : "text/plain"
};
var server = "C:/Dev/Angular file receiver";// Temporary path
var targetPath = "C:/Dev/Angular file sender";// Temporary path
$cordovaFileTransfer.upload(server, targetPath, options).then(
function() {
alert("Success");
}, function(err) {
alert("Error");
});
}, false)
});
I understand that all plugin calls should be wrapped in the "deviceready" event. Whenever I run my project I get below error on the browser console.
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/fileupload/cordova/cordova_plugins.js
Uncaught TypeError: Object #<Event> has no method 'upload' app.js:46
I am not sure where the cordova_plugins.js gets fetched from. I had read on some forum that it gets generated at run time (I might be wrong).
Does anyone have any idea about what’s going wrong here? I reckon I am missing something on the configuration part. Is it even possible to use ngCordova in a web application since supposedly its meant for mobile development?
Try code below
angular.module('app')
.controller('CordovaCtrl', function($scope, $timeout, $cordovaFileTransfer) {
document.addEventListener("deviceready", function() {
alert("Inside the Cordova Controller - deviceready");
var fileToUpload = "img.png";
var options = {
fileKey : "sendFile",
fileName : "angularJSFileToUpload",
chunkedMode : false,
mimeType : "text/plain"
};
var server = "C:/Dev/Angular file receiver";// Temporary path
var targetPath = "C:/Dev/Angular file sender";// Temporary path
$cordovaFileTransfer.upload(server, targetPath, options)
.then(function(result) {
alert("Success");
}, function(err) {
alert("Error");
}, function(progress){
alert("In Progress");
});
}, false)
});