I am using a JS script which, if it would work, would display a booking calendar. I tried using the script on a simple page and it works. Implementing it in my Wordpress site gives me an error:
Failed to instantiate module Office due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.3.0/$injector/nomod?p0=Office
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:21:412
at a (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:21:53)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:21:296
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:35:185
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:35:33)
at Jb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:38:269)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:18:3)
at rc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:18:316
It complains about not being able to load the module Office. The way it is added it this (see pastebin below for the full script):
$("html").attr("ng-app", "Office");
This is how I was told to load the booking calendar:
<script type='text/javascript'>
var V = {
setup: {
module: '.booking_with_calendar/KAR18',
memberid: 5678,
lang: 'de'
}
};
V.setup.bookingOptions = {
tracking: {
channelid: 1234
}
};
</script>
<script type="text/javascript" async src="https://www.mydomain/js/ex.js"></script>
The content of ex.js looks like this: https://pastebin.com/T6Ati96k
Any idea why it can not load the Office module in my Wordpress and what I could do about it?
Thanks!
Related
Uncaught Error: [$injector:modulerr] Failed to instantiate module
myApp due to: Error: [$injector:nomod] Module 'myApp' is not
available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as
the second argument.
Good day, before I asked this question, I looked through all the previous answers to this question as well as went through documentation, unfortunately non did help me that is why I am asking.
This is the how I am using angular and controller:
html file:
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="myApp">
<div ng-controller="login.controller">
<input ng-model="foodDescription">
<button ng-click="onSomethingChanged(foodDescription)">Do Something</button>
<h1>The Food is {{viewModel.foodDescription}}</h1>
</div>
<script type='text/javascript' src="./node_modules/angular/angular.js"></script>
<script type='text/javascript' src="./module.js"></script>
</body>
</html>
Module file:
import angular = require('angular');
import loginControllerImport = require('./Views/login/login.Controller');
var app: angular.IModule = angular.module("myApp", []);
app.controller(loginControllerImport.name, loginControllerImport.loginController);
loginControllerImport.loginController.$inject = ['$scope'];
export = app;
Controller file:
import angular = require('angular');
import loginViewModelImport = require('./login.viewModel');
export interface ILoginControllerScope extends angular.IScope {
viewModel: ILoginViewModel;
onSomethingChanged: (myFood: string) => void;
}
export class loginController {
constructor(private $scope: ILoginControllerScope) {
this.$scope.viewModel = new loginViewModelImport.loginViewModel();
this.$scope.onSomethingChanged = this.onSomethingChanged.bind(this);
}
private onSomethingChanged(myFood: string) {
this.$scope.viewModel.foodDescription = myFood;
}
}
export var name: string = "login.controller";
View Model file:
export class loginViewModel implements ILoginViewModel {
private _foodDescription: string;
get foodDescription(): string {
return this._foodDescription;
}
set foodDescription(value: string) {
this._foodDescription = value;
}
}
So what would be the problem for this error to appear? Why is it appearing? how can I fix it? How can I avoid it in the future?
Many thanks.
Since you use require() to load your dependencies, you should also a) bundle them into one output file, b) load them manually or c) load them with a library like RequireJS. I cannot verify if module.js is your bundle file, otherwise this code won't succeed unfortunately.
If I would face this problem myself, I would strip down the app to the bare minimum (just load the myApp module itself) and get that one working. After getting this spinning up, add your view models and controllers (tip: one by one).
I am trying to add Firebase for the first time to an ionic application. I have set up my project and referenced the javascript files however when I run the application I see the error 'Error: Permission Denied'
I have not yet set up authentication in my app but, if I am understanding things properly I shouldn't need to do this while I am just testing.
My index.html contains the following:
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
While the app.js has the following lines:
angular.module('starter', ['ionic', 'firebase'])
.factory("Items", function($firebaseArray) {
var itemsRef = new Firebase("https://todo-83e58.firebaseio.com/items");
return $firebaseArray(itemsRef);
})
.controller('ListCtrl', function($scope, $ionicListDelegate, Items) {
$scope.items = Items;
$scope.addItem = function () {
var name = prompt("what do you need to buy?");
if (name) {
$scope.items.$add({"name": name});
}
};
I would be grateful for any pointers on how to get the basics right as I have tried following the information on the Firebase site and I seem to have it all set up correctly. Am I misunderstanding the authentication or shouldI be able to write to the database without setting this up first ?
It sounds that your Security & Rules isn't giving you access to items. Please make sure to spend some time reading the S&R documentation.
If you are only testing the application and don't want to care about it now just set it to full read and write.
On the new console go to Database > Rules.
{
"rules": {
".read": true,
".write": true
}
}
I created a new angular2 app using the angularCLI (just so you know my directory structure).
Running ng serve puts all my files in the dist folder and runs the hello world app in the browser with no issue.
I'm trying to run the same app in electron, but it is unable to find all the vendor files (including #angular) since it uses the file protocol in a script src:
This
<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
produces this
file:///vendor/es6-shim/es6-shim.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/reflect-metadata/Reflect.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/systemjs/dist/system.src.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/zone.js/dist/zone.js Failed to load resource: net::ERR_FILE_NOT_FOUND
How do you prepend the correct path in the file: protocol that electron uses?
My gulpfile.js:
var gulp = require('gulp'),
del = require('del'),
runSeq = require('run-sequence');
gulp.task('clean-electron', function(){
return del('dist/electron-package/**/*', {force: true});
});
gulp.task('copy:electron-manifest', function(){
return gulp.src('./package.json')
.pipe(gulp.dest('./dist/electron-package'))
});
gulp.task('copy:electron-scripts', function(){
return gulp.src('./src/electron_main.js')
.pipe(gulp.dest('./dist/electron-package'));
});
gulp.task('copy:vendor-for-electron', function() {
return gulp.src('./dist/vendor/**/*')
.pipe(gulp.dest('./dist/electron-package/vendor'))
});
gulp.task('copy:spa-for-electron', function(){
return gulp.src(["./dist/*.*", "./dist/app/**/*"])
.pipe(gulp.dest('dist/electron-package'));
});
gulp.task('electron', function(done){
return runSeq('clean-electron', ['copy:spa-for-electron', 'copy:vendor-for-electron', 'copy:electron-manifest', 'copy:electron-scripts' ], done);
});
The closest I got was doing this:
my index.html:
<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script>
console.log("In my script tag:");
var systemConfigPath = 'system-config.js';
var mainPath = 'main.js';
if (window.location.protocol == "file:"){
require(__dirname + '/vendor/es6-shim/es6-shim.js');
require(__dirname + '/vendor/reflect-metadata/Reflect.js');
require(__dirname + '/vendor/systemjs/dist/system.src.js');
require(__dirname + '/vendor/zone.js/dist/zone.js');
systemConfigPath = __dirname + '/' + systemConfigPath;
mainPath = __dirname + '/' + mainPath ;
}
System.import(systemConfigPath).then(function () {
System.import(mainPath);
}).catch(console.error.bind(console));
but that still gives me issues as the vendor files reference other files inside the same directories:
Edit:
I am now trying to use webpack to build my electron app (with no success).
I also created a github repo if you would like to see the code.
From How should I configure the base href for Angular 2 when using Electron? the answer is to change you
<base href="/">
to
<base href="./">
Okay! so I am not sure it's the best answer, as it still produces some silly errors, but here we go...
My index.html now looks like this:
<body>
<electron-angular-boilerplate-app>Loading...</electron-angular-boilerplate-app>
<!--will give errors in electron... oh well-->
<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script>
// if require is defined, we are on node / electron:
if (!(typeof(require) == "undefined")){
require('./vendor/es6-shim/es6-shim.js');
require("./vendor/reflect-metadata/Reflect.js");
require("./vendor/systemjs/dist/system.src.js");
require("./vendor/zone.js/dist/zone.js");
require("./system-config.js");
require("./main.js");
} else {
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
}
</script>
</body>
This allows both my angular cli application to run and my electron app to run. The <script src=... tags still produce errors in electron as it is not able to find them. I also had to remove the System.import line from electron, so hopefully that doesn't cause any issues later on.
and to run it, we just need to make sure that the app is built and run electron in the ./dist folder:
ng build && electron ./dist
Here is the branch with my working code:
https://github.com/jdell64/electronAngularBoilerplate/tree/so-37447020-answer
I'm using highcharts-ng, trying to do client side pdf download and keep getting Unsupported export format on this platform: application/pdf. If I use the highcharts server to generate the pdf it works fine.
options: {
exporting: {
type: 'application/pdf'
}
},
func: function() {
// button handler
$('#vehicle-conversion-pdf-btn').click(function () {
var chart = $('#vehicle-conversion').highcharts();
chart.exportChart();
});
}
I'm also loading the plugin last.
I had a problem almost like this.
I had been imported "highcharts-export-clientside.js" to my web page, but it didn't work. (from this documentation )
my problem fixed with this line :
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
Altogether you must have this imports in your html file :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
I'm using angular-translate in my Angular (v1.x) app as well as loading translations from files by using $translateProvider.useStaticFilesLoader
angular.module('myApp',['pascalprecht.translate'])
.config(function($translateProvider) {
$translateProvider.useStaticFilesLoader(
prefix: window.location.pathname.replace(/[\\\/][^\\\/]*$/, '') + '/__languages/', // absolute path + language path
suffix: '.json'
});
// $translateProvider.useLocalStorage();
}
Angular-translate works perfectly but when it comes to use:
$translateProvider.useLocalStorage();
(commented in the code above) as proposed in this guide, I get the following error:
Uncaught Error: [$injector:unpr] Unknown provider: $translateLocalStorageProvider <- $translateLocalStorage <- $translate
Of course I included all the the needed js files:
<script src="bower_components/angular-translate/angular-translate.min.js"></script>
<script src="bower_components/angular-translate-loader-url/angular-translate-loader-url.min.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
I even tried to:
add 'angular-translate-storage-local' as a dependency in app.JS
add $translateUrlLoader, $translateStaticFilesLoader in the .config block.
You don't have to add angular-translate-storage-local as dependency to your app.js file.
I think that you just forgot to include angular-translate-storage-local package in your html:
<script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.min.js"></script>
Link to github.