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.
Related
I have been trying to convert a TypeScript Angular 1 application to use ES6 style module imports.
Dropping the use of namespace and using the import keyword to pull in modules. e.g.
import * as angular from "angular";
import * as angularroute from "angular-route";
But I have run into some issues.
I'm getting an error from angular:
Uncaught (in promise) Error: (SystemJS) [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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
To illustrate the issue, I have created two applications on github:
1) Angular1WithNamespaces- Original app that I want to convert.
2) Angular1WithSystemJS - My Conversion, that has an issue.
Below are snippets from the Angular1WithSystemJS example that has the issue.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head><base href="/"></head>
<body >
<ng-view></ng-view>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="configs/systemjs.config.js"></script>
<script>
System.import('app/boot');
</script>
</body>
</html>
systemjs.config.js
System.config({
defaultJSExtensions: true,
paths: {
"npm:*": "../node_modules/*"
},
// map tells the System loader where to look for things
map: {
"angular": "npm:angular/angular.js",
"angular-route": "npm:angular-route/angular-route.js",
},
meta: {
'angular': {
format: 'global',
},
'angular-route': {
format: 'global',
},
}
});
boot.ts
/// <reference path="../typings/tsd.d.ts" />
import * as angular from "angular";
import * as angularroute from "angular-route";
let main = angular.module("testApp", ["ngRoute"]);
main.config(routeConfig)
routeConfig.$inject = ["$routeProvider"];
function routeConfig($routeProvider: angular.route.IRouteProvider): void {
$routeProvider
.when("/dashboard", {
templateUrl: "/app/dashboard.html",
})
.otherwise("/dashboard");
}
Any help getting this working would be greatly appreciated.
I have found a solution by reading a blog post from https://legacy-to-the-edge.com/2015/01/21/using-es6-with-your-angularjs-project/
It was related to how I did the import for angular-route.
In the end it was just a one-liner change.
In boot.ts I changed the import statement from:
import * as angularroute from "angular-route";
to:
import "angular-route";
I can only assume, that the latter will also run scripts in the module file.
According to the spec on import at developer.mozilla.org
import "my-module";
Import an entire module for side effects only, without importing any bindings.
The fixed version is in github Angular1WithSystemJSFixed
I have been trying to use angular-translate with a static JSON file, usign StaticFilesLoader. However, I recieve the error:
Unknown provider: $translateStaticFilesLoaderProvider <- $translateStaticFilesLoader
In the index.html file, i have included the .js files:
<script src="js/i18n/angular-translate.js"></script>
<script src="js/i18n/angular-translate-loader-static-files.js"></script>
<script src="js/i18n/angular-translate-loader-static-files.min.js"></script>
<script src="js/i18n/angular-translate.min.js"></script>
I have included the directive 'pascalprecht.translate'
And I have also included the config in the app.js file:
Application.instance
.config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'i18n/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en');
}]);
If I include the translations directly in the config, the angular-translate works fine, but it seems that the staticFilesLoader is the issue. I have replaced the angular-translate-loader-static-files.js files from github and this does not resolve the issue.
Thanks for any help.
You are adding angular-translate twice, minified and unminified (judging by names)
But the error you get is mostlikely caused by not injecting the module to your module
var Application = angular.module('myApplication', ['pascalprecht.translate'])
I'm trying to include a github module angular-drag-drop. I'm new to angular and I fail. The readme shows an example of using webpack or browserify, but I'm not using those. I've also filed an issue, but I wanted to ask it here as well.
odds.js:
(function(){
var app = angular.module('pokerApp', ['angular-drag-drop']);
})();
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="lib/angular-drag-drop.min.js"></script>
<script src="odds.js"></script>
</head>
<body>
<div ng-app = "pokerApp" ng-init = "cards = ['As','Ks','Qs','Js','Ts','9s','8s','7s','6s','5s','4s','3s','2s',
'Ah','Kh','Qh','Jh','Th','9h','8h','7h','6h','5h','4h','3h','2h',
'Ad','Kd','Qd','Jd','Td','9d','8d','7d','6d','5d','4d','3d','2d',
'Ac','Kc','Qc','Jc','Tc','9c','8c','7c','6c','5c','4c','3c','2c']">
<!--<div drag-container>KKKKKKKKKKKK</div>-->
<!--
<div drag-container="model"
on-drag-start="ctl.handleDragStart($event, data)"
on-drag-end="ctl.handleDragEnd($event, data)"
></div>-->
</div>
</body>
</html>
The file angular-drag-drop.min.js was copied from the github repo. The error I get is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module pokerApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-drag-drop due to:
Error: [$injector:nomod] Module 'angular-drag-drop' 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.
I also tried with 'AngularDragDrop' instead of 'angular-drag-drop' but I get the same error.
It need require.js to load modules, also I looked at API, I think the module name should be
learts.dragDrop
instead of
angular-drag-drop
odds.js:
(function(){
var app = angular.module('pokerApp', ['learts.dragDrop']);
})();
The developer has posted the answer in the issue. I needed to import "filearts.dragDrop" and not import require.js. It works now.
In html I am loading the oclazyload before my app.js -
<!-- inject:js -->
<script src="/packages/libs/jquery/dist/jquery.js"></script>
<script src="/packages/libs/angular/angular.js"></script>
<script src="/packages/libs/oclazyload/dist/ocLazyLoad.js"></script>
<script src="/packages/libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endinject -->
<script src="app/app.js" ></script>
<script src="app/common/app.config.js" charset="utf-8"></script>
My app.js -
(function () {
angular.module('app', ['ui.router', 'oc.lazyload']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
But for some reason it doesn't load the oc.lazyload module at all . what might be the problem ? Am I missing something ?
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyload due to:
Error: [$injector:nomod] Module 'oc.lazyload' 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.
There is a typo. The module name is camel case. Change
'oc.lazyload'
to
'oc.lazyLoad' //'L' capitalized
The dependency for oc lazyload should be added as oc.lazyLoad instead of oc.lazyload
app.js
(function () {
angular.module('app', ['ui.router', 'oc.lazyLoad']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
Reference
I also had this error, even though I did not have any typos and I followed the configuration directions at https://oclazyload.readme.io/docs. I was using Angular within Ruby on Rails, and my error was fixed by adding the line below to my app/assets/javascripts/application.js file:
//= require oclazyload
My app.js looks like below:
//app.js
var angular = require('angular');
angular.module('app', []);
angular.module('app').controller('MainCtrl', function ($scope) {
$scope.test = "abc";
});
//index.html
<body ng-app="app" ng-controller="MainCtrl">
{{test}}
<script src="dist/app.js"></script>
</body>
The directory structure is as follows:
app/
index.html
app.js
node_modules/
angular/
Angular was installed using npm install.
I then compile the code using the following command:
browserify --entry app.js --outfile dist/app.js
Then upon opening the file index.html in the browser I get the following errors:
Uncaught TypeError: undefined is not a function
angular.module('app', []);
Further errors:
2014-11-30 19:44:46.345app.js:4082 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' 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
What could i be missing ?
.
Finally figured it out.
What had to be done is as below:
Create a angular-index.js file in node_modules/angular folder
Contents of this file are as below:
require('./angular.min.js');
module.exports = angular;
Then include this file in the browser option of the package.json file.
How exactly this makes things work I am not yet sure.. but this got the code rolling.