I am stymied by this issue. For some reason the Angular routing is not working at all. I simply get a blank screen. All of the modules are loading, there is no error in the console, and if I enter Angular in the console, it works. Yet, I get a blank screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuickCalcs</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" href="css/ng-animation.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/factories.js"></script>
<script src="controllers/qcController.js"></script>
</head>
<body ng-app="qc">
<div ng-view></div>
</body>
</html>
-----------------------------
app.js file is:
-----------------------------
var qc = angular.module('qc', [
'ngRoute',
'ngAnimate',
'ngResource'
]);
qc.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/home', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/results', {
templateUrl: 'views/results.html',
controller: 'qcController'
}).
otherwise({
redirectTo: 'views/home.html'
});
}]);
-----------------------------
Directory structure is:
-----------------------------
qc
/js
app.js
/views
home.html
results.html
/controllers
qccontroller.js
You must link your page to the application module
in the html tag like this:
< html lang="en" ng-app="qc" />
Related
I need to change the structure of my files when I put in production :
default :
-dist
--css
--fonts
--img
--js
--favicon.ico
--index.html
and i want like this :
-dist
--index.html
--app
---css
---fonts
---img
---js
---favicon.ico
I try to change directly the html in index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="app/favicon.ico">
<title>Roquette</title>
<script defer="defer" src="app/js/chunk-vendors.6e8aa085.js"></script>
<script defer="defer" src="app/js/app.4955a200.js"></script>
<link href="app/css/app.d0b83381.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but serveur-roquette doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div>
</body>
</html>
But it doesn't work there must be some paths missing somewhere
These errors occur after the build:
Error from hosting in GitHub pages:
Failed to load resource: the server responded with a status of 404 () /e-library/js/app.af7a444d.js:1
Error from opening it locally:
Access to script at 'file:///D:/Office%20Files/Projects/eLibrary/e-library/dist/js/chunk-vendors.0aa8295f.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
But running on the server it works perfectly.
My index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="favicon.ico">
<title>e-library</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<script defer="defer" type="module" src="js/chunk-vendors.8ef93056.js"></script>
<script defer="defer" type="module" src="js/app.af7a444d.js"></script>
<link href="css/chunk-vendors.82c260bb.css" rel="stylesheet">
<link href="css/app.3dfcde27.css" rel="stylesheet">
<script defer="defer" src="js/chunk-vendors-legacy.8c436468.js" nomodule></script>
<script defer="defer" src="js/app-legacy.687726a0.js" nomodule></script>
</head>
<body><noscript><strong>We're sorry but e-library doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
<div id="app"></div>
</body>
</html>
I tried publicPath:
module.exports = { publicPath: '', transpileDependencies: [ 'vuetify' ] }
Did I miss something?
I fixed it by adding this line of code in vue.config.js:
const {defineConfig} = require('#vue/cli-service')
module.exports = defineConfig({
publicPath: process.env.NODE_ENV === 'production'
? '/e-library/'
: '/'
I'm trying to decrease the bundle size of my Vue project, which scaffolded by the vue-cli, by using CDN of firebase, Vue, and Vuetify.
So, I've added links of these CDN in public/index.html as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>magiclabel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but t4v4 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Add config.externals to vue.config.js as follow:
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: (config) => {
config.externals({
firebase: 'firebase',
'firebase/auth': 'firebase',
firebaseui: 'firebaseui',
vue: 'Vue',
vuetify: 'Vuetify',
'vuetify/lib': 'Vuetify',
})
}
}
Then, the report.html created by issueing yarn build --report indicated that the Vuetify is still in the bundle even other firebase and Vue is going away as follow:
Is there any wrong or insufficient steps?
If you are using vuetify from vue-cli-plugin-vuetify (vue add vuetify), treeshaking and auto component import is enabled by default, by using vuetify-loader.
If you look into the source code of vue-cli-plugin-vuetify, it only uses vuetify-loader if it is present in your package.json. So removing vuetify-loader from package.json should disable this behavior.
I have a few problems after having upgraded to gulp-mocha-phantomjs Version 0.8.0:
1) Error when running against remote by url:
When running my tests against a remote URL, I get the following error:
ReferenceError: Can't find variable: Mocha
at browser-shim.js:27
All required files in runner.html seem to be available and the test do work as expected in an actual browser like FF or Chrome.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.css">
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;">
<div id="charset_ascii"> !"#$%&'()*+,-./0123456789:;<=>?#ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</div>
<div id="charset_other">ÄäÆæß</div>
</div>
<script src="HTTP://localhost:7777/q/p/lj_unittest/js/core.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai-datetime.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/sinon.js"></script>
<script>
mocha.setup("bdd");
</script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/charset_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/ods.log_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/date.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:backend:ODS', function (/callback/) {
var stream = mochaPhantomJS({'reporter': 'spec'});
stream.write({path: config.URL_ROOT + '/TEST_WEB_ODS.main'});
stream.end();
return stream;
});
2) Strange warnings in some (but not all) of the runner.html based tests:
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///D:/MyDev/ljs_app/trunk/periscope/build/node_modules/gulp-mocha-phant
mjs/node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js. Domains, protocols and ports must match.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="../../../libs/mocha/mocha.css">
<link rel="stylesheet" href="../../../dist/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;"></div>
<script src="../../../dist/js/core.js"></script>
<script src="../../../libs/mocha/mocha.js"></script>
<script src="../../../libs/chai/chai.js"></script>
<script src="../../../libs/chai/chai-datetime.js"></script>
<script src="../../../libs/sinon/sinon.js"></script>
<script>
mocha.setup('bdd');
</script>
<!-- START of actual unit test scripts -->
<script src="./json.js"></script>
<script src="./moment.js"></script>
<script src="./underscore.js"></script>
<!-- END of actual unit test scripts -->
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:frontend:lib', function (/*callback*/) {
return gulp.src('test/frontend/lib/runner.html').pipe(mochaPhantomJS({'reporter': 'spec'}));
});
Any help is appreciated!
Load mocha.js first. Your own comment is correct.
Related:
ReferenceError: Can't find variable: Mocha when running test · Issue #7 · nathanboktae/mocha-phantomjs-core
I am developing a new openerp web module from scratch. I am trying to use the same concept used in the Point Of Sale web module that comes with OpenERP.
This is my controller method that is handling the web url:
#http.route('/university/', auth='public')
def index(self, **kw):
cr, uid, context, session = request.cr, request.uid, request.context, request.session
modules = simplejson.dumps(module_boot(request.db))
init = """
var wc = new s.web.WebClient();
wc._title_changed = function() {}
wc.show_application = function(){
wc.action_manager.do_action("university.ui");
};
wc.setElement($(document.body));
wc.start();
"""
html = request.registry.get('ir.ui.view').render(cr, session.uid,'university.index',{
'modules': modules,
'init': init,
})
return html
enter code here
the page source generated when the page loads is the following:
<!DOCTYPE html>
<html>
<head>
<title>Odoo POS</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="content-type" content="text/html, charset=utf-8"/>
<meta name="viewport" content=" width=1024, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<link rel="shortcut icon" sizes="196x196" href="/point_of_sale/static/src/img/touch-icon-196.png"/>
<link rel="shortcut icon" sizes="128x128" href="/point_of_sale/static/src/img/touch-icon-128.png"/>
<link rel="apple-touch-icon" href="/point_of_sale/static/src/img/touch-icon-iphone.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="/point_of_sale/static/src/img/touch-icon-ipad.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="/point_of_sale/static/src/img/touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="/point_of_sale/static/src/img/touch-icon-ipad-retina.png"/>
<link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="/point_of_sale/static/src/fonts/lato/stylesheet.css"/>
<link rel="stylesheet" href="/point_of_sale/static/src/fonts/font-awesome-4.0.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/point_of_sale/static/src/css/pos.css" id="pos-stylesheet"/>
<link rel="stylesheet" href="/point_of_sale/static/src/css/keyboard.css"/>
<script type="text/javascript" src="/web/js/web.assets_common/d535558"></script>
<script type="text/javascript" src="/web/js/web.assets_backend/ec9370d"></script>
<script type="text/javascript" id="loading-script">
$(function() {
var s = new openerp.init(["web", "web_kanban", "base", "base_setup", "mail", "email_template", "edi", "share", "report", "product", "board", "account", "account_voucher", "point_of_sale", "account_accountant", "web_calendar", "calendar", "l10n_ae", "web_tests", "bus", "im_chat", "im_odoo_support", "base_import", "web_view_editor", "web_gantt", "portal", "student", "payment", "web_kanban_sparkline", "purchase", "web_diagram", "university", "sales_team", "sale", "web_example", "payment_transfer", "web_kanban_gauge", "stock", "web_graph", "crm"]);
var wc = new s.web.WebClient();
wc._title_changed = function() {}
wc.show_application = function(){
wc.action_manager.do_action("pos.ui");
};
wc.setElement($(document.body));
wc.start();
});
</script>
</head>
<body>
<div class="openerp openerp_webclient_container">
<table class="oe_webclient">
<tr>
<td class="oe_application"></td>
</tr>
</table>
</div>
</body>
</html>
When the page loads, it will display all my widgets successfully, but it will display at the bottom of the page "Loading..."
why this loading is displayed, and how to remove it.
Appreciate your response