I have download the sample https://github.com/tastejs/todomvc/tree/master/examples/typescript-angular and I try to get it working under a VS2013 Web Application empty template.
I add all the file of the sample, I launch the website by IIS, it works fine.
But when I build the project (without modifying anything) the only lines that remain are :
/// <reference path='_all.ts' />
/**
* The main TodoMVC app module.
*
* #type {angular.Module}
*/
var todos;
(function (todos) {
'use strict';
var todomvc = angular.module('todomvc', []).controller('todoCtrl', todos.TodoCtrl).directive('todoBlur', todos.todoBlur).directive('todoFocus', todos.todoFocus).service('todoStorage', todos.TodoStorage);
})(todos || (todos = {}));
When I try to run the website I have the following error :
http://localhost/WebAppTodoMvc/bower_components/angular/angular.js
0x800a139e - Erreur d’exécution JavaScript: [$injector:modulerr] Failed to instantiate module todomvc due to
Error: [ng:areq] Argument 'directiveFactory' is required
That code is meant to work with the --out compiler flag and you should use _all.js generated from all.ts https://github.com/tastejs/todomvc/blob/master/examples/typescript-angular/js/_all.ts
You can specify this as the reference file from your project properties.
Related
I am in the process of migrating our .NET Framework project over to .NET Core. And where we previously relied on the BundleTable tools in .NET Framework. We are now using webpack.
I have a directive that uses a package 'angularjs-dragula'. The webpack entry definition is as follows
'bundles/grouping':
[
"./Scripts/angularjs-dragula.js",
"./App/components/grid.directive.js",
"./App/components/inline-edit.directive.js",
"./App/services/grouping.service.js",
"./App/components/grouping/grouping.directive.js"
],
I initialize the directive as follows:
(function () {
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService) {
...
As it is, the page never loads grouping.directive. And there are no errors. Unless i remove the dragula file in the webpack entrypoint. The directive will then load, but complain:
ReferenceError: angularDragula is not defined[Learn More]
I have tried relying on webpack to import the package, and removed it from the entry definition. I installed angularjs-dragula into my node_modules, and used
var angularDragula = require('angularjs-dragula');
(function () {
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService) {
...
However this results in the same behavior.
The angularjs-dragula package works, since we were using it before the move to webpack. However now it seems to be silently failing, and taking the rest of the directive with it?
How can I begin to diagnose this issue?
The AngularJS wrapper for Dragula is unusual in that it places on global scope a function named angularDragula. That function registers the dragula module with AngularJS when the function is invoked with angular as an argument. It returns a string with the module name "dragula".
angularDragula(angular)
angular.module("app",["dragula"])
.run(function(dragulaService) {
console.log(dragulaService);
})
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angularjs-dragula/dist/angularjs-dragula.js"></script>
<body ng-app="app">
<h1>Hello AngularJS!</h1>
</body>
the page never loads grouping.directive
How can I begin to diagnose this issue?
I would use the Developer Console to insert breakpoints. Then examine variables.
The above example loads AngularJS with Dragula and successfully logs the dragularService.
I've been asked to do a project in Angular 1, and I've been having a nightmare of a time just trying to get the page to load the app code from bundle.js. I've currently got an error along the lines of
[$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":
[],"_configBlocks":[],"_runBlocks":[],"name":"approveComponent"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
but the only approveComponent I've got is essentially a blank placeholder -
import angular from 'angular';
const approve = angular.module('approveComponent', []);
export default approve;
What can I do to get this actually running?
I'm using Webpack 4 to bundle everything. (NO errors from webpack.)
I have seen this error earlier.You need to pass module name not module in the dependency
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client')//this is a object
])
You can simply require the file and just inject by name Like this
var firstModule = require('./webpack/myapp/client')
ngModule = angular.module('webpack', [
'firstModule'//this is should work
])
firstModule(ngModule)
SAMPLE GITHUB REPO
I'm using yeoman generator for scaffolding angular web application with requirejs. Its working fine but when I tried to concat and minifying all the js file into a single file through grunt task runner its started giving me above mentioned error. I've researched online about the issue and common solution is I may be mis-spelled any service injecting in the module or service does not exists, I've cross checked again all the spelling, quotation marks etc everything seems fine but still I'm unable to resolve this issue.
Here is my app.js file where my main module with dependencies is listed.
return angular
.module('arteciateYeomanApp', [
'arteciateYeomanApp.controllers.MainCtrl',
'arteciateYeomanApp.controllers.AboutCtrl',
'arteciateYeomanApp.services.Xhr',
'arteciateYeomanApp.services.Common',
'arteciateYeomanApp.controllers.ArtworkCtrl',
'arteciateYeomanApp.controllers.AddAccountCtrl',
'arteciateYeomanApp.controllers.AddArtgroupCtrl',
'arteciateYeomanApp.controllers.AddArtistCtrl',
'arteciateYeomanApp.controllers.AddArtworkCtrl',
'arteciateYeomanApp.controllers.AddCampaignsCtrl',
'arteciateYeomanApp.controllers.AddGenreCtrl',
'arteciateYeomanApp.controllers.AddInstitutionCtrl',
'arteciateYeomanApp.controllers.AdminSignupCtrl',
'arteciateYeomanApp.controllers.ArtistInfoCtrl',
'arteciateYeomanApp.controllers.DirectUserSignupCtrl',
'arteciateYeomanApp.controllers.ErrorCtrl',
'arteciateYeomanApp.controllers.ForgotPasswordCtrl',
'arteciateYeomanApp.controllers.GroupBuyingCtrl',
'arteciateYeomanApp.controllers.LoginCtrl',
'arteciateYeomanApp.controllers.AdminLoginCtrl',
'arteciateYeomanApp.controllers.ResetPasswordCtrl',
'arteciateYeomanApp.controllers.SignupCtrl',
'arteciateYeomanApp.controllers.UnblockUserCtrl',
'arteciateYeomanApp.controllers.UpdatePasswordCtrl',
'arteciateYeomanApp.controllers.DashboardCtrl',
'ngRoute','ngResource']).config(.....);
here is grunt task which I'm running for minifying the js files.
registering task
grunt.registerTask('dev', ['requirejs' ]);
Here is task running script
requirejs : {
compile : {
options : {
baseUrl : "<%= yeoman.app %>/scripts",
mainConfigFile : "<%= yeoman.app %>/scripts/main.js",
name : "main",
out : "requireArterciate.js"
}
}
}
Please let me know if I'm doing something wrong here.
If you need to minify the angularjs code, then use the following standard format syntax to define the controller and to inject the dependencies. Refer Dependency Injection
angular.module('test').controller('testController', testController);
testController.$inject = ['$scope', '$rootScope'];
function testController($scope, $rootScope) {};
This is my cshtml
When I run my code on local host the table just flickers and disappears and also it fails to bind any data.
I'm using visual studio 2015 community and running on .NetCOre 1.0
I'm using Angular 1.5.7
I would appreciate any help.
My angular module declaration in apptrips.js:
(function () {
// Creating the Module
angular.module("apptrips", []);
})();
This is where the module is defined and a tripsController function is defined
Below i have the following console error in browser
O Uncaught Error: [Sinjector:nomod] http://errors.angul angular.is:2075 aris .org/1.5.7/Siniector/nomod?p0=app-trips at angular.is:38 at angular.~is:2075 at b (angular.is:1999) at Object.module (angular.is:2073) at tripsController.is:5 at tripsController.is: 14
© ► Error: [ng:areq] http://errors.angularis.org/1.5. angular.is:13708 7/ng/area?p0=tripsController&pl=not%20a%20function%2C%20got%20undefine d
at angular.is:38 at sb
(angular.is:1885) at Qa
(angular.is:1895) at
angular.is:10210 at ag
(angular.is:9331) at m
(angular.is:9116) at g
(angular.is:8510) at g
(angular.is:8513) at
angular.is:8390 at angular.is:1756
Error: [ng:areq] http://errors.angularis.org/1.5. angular.is:13708 7/ng/area?p0=tripsController&pl=not%20a%20function%2C%20got%20undefine d
Error indicates that the tripsController is not found/loaded.
Did you include the js file having the controller into your main index file?
I'm trying to add native fb connect to my ionic app.
I'm using:
- Ionic
- ngCordova
- http://ngcordova.com/docs/plugins/facebook/
This is my code:
angular.module('starter.controllers', ['ngCordova'])
.config(function($cordovaFacebookProvider) {
var appID = 123456789;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
})
Which leads to this error >
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
ReferenceError: facebookConnectPlugin is not defined
at browserInit (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1576:7)
at http://localhost:8100/js/controllers.js:6:30
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at runInvokeQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11900:35)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11909:11
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11907:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
Tried a couple of things but without any positive result:
- When I build it and run it on my device the app displays a blank screen
Tried the normal cordova js code:
Changed $cordovaFacebookProvider to $cordovaFacebook (based on this thread:
forum.ionicframework.com/t/unknown-provider-cordovaprovider/13305/3
And this is a another related thread, but doesn't help me thought..
forum.ionicframework.com/t/does-ng-crodova-has-facebook-login/9163
I already have a prototype working with the fb auth in the in-app-browser. But I really want to have a native fb connect functionality.
i found a way to resolve this issue.
Thanks to this thread : https://github.com/driftyco/ng-cordova/issues/446
and this tutorial : https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/browser/README.md
1st step : Don't forget the <div id="fb-root"></div> after ur body.
2nd step : I added facebookConnectPlugin to my bower dependencies
See my bower.json :
"dependencies": {
"angular-google-maps": "~2.0.13",
"google-map": "~0.4.1",
"facebook-connect-plugin": "https://cdn.rawgit.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js"
}
See my app.config + code to init:
app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $animateProvider, $httpProvider, $cordovaFacebookProvider) {
var appID = 597135743751760;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
$cordovaFacebookProvider call facebookConnectPlugin()
3th step : After changing this dependencies, don't forget to call bower update from ur CLI.
4th step : Include the new facebookblablabla.js in your index.html.
it can be
<script src='bower_components/facebook-connect-plugin/index.js'></script>
for me it was
<script src='lib/facebook-connect-plugin/index.js'></script>
5th step : add in the Valid OAuth redirect URIs field at your Facebook App :
http://static.ak.facebook.com/connect/xd_arbiter/
Hope it works for you :) !
My answer is not providing a solution for your issue but an advice.
Why using facebook Cordova when you can use HelloJS?
faceBook Cordova is platform dependant, much slower as it runs cordova true node.js and not evolutive.
HelloJS permits to integer various Oauth2 authentication very easily including, facebook / google / twitter / instagram ...
Without to tell that the compilation for facebook cordova is very tricky with the facebook key app. On HelloJS, this is only a parameter that you can easily change.
I don't know if someone still stuck with this thing then please follow the method mentioned my #Alexy and then edit the 'lib/facebook-connect-plugin/index.js' file line from :
if(cordova.platformId === 'browser')
to
if(!window.cordova || (window.cordova && window.cordova.platformId === 'browser'))
Hope this Helps :)