ngLocale error with TypeScript routing - javascript

I am getting an error when trying to attach my config class to my angular app. I get a message saying: $injector:nomod] Module 'ngLocale' is not available! I have a reference to angular.js and angular-route.js
Here is my Config Code.
module TSApplication {
export class Config {
static $inject = ["$routeProvider"];
constructor($routeProvider: ng.route.IRouteProvider) {
this.registerRoutes($routeProvider);
}
private registerRoutes(rProvider: ng.route.IRouteProvider) {
rProvider.when("/", { templateUrl: "/partials/example.html", controller: "ExampleCtrl" });
}
}
}
(function () {
var app = TSApplication.App.angularModule;
app.config(TSApplication.Config);
})();
And here is my App Module code:
module TSApplication {
"use strict";
export class App {
static angularModule = angular.module("App", ['ngRoute']);
}
}
(function () {
// Toaster Junk
})();
Am I missing something simple? If I don't include the config I do not receive an error.

It looks like you are passing TSApplication.Config to the angular config function which is treating it as a function. Therefore, in your "constructor" this isn't actually what you think it is because no instance of TSApplication.Config was created. You could remedy this by changing registerRoutes to a static method and then calling it in your constructor like this Config.registerRoutes($routeProvider);.

Related

Unknown provider error for filter in AngularJS ES6 syntax

I'm having trouble using a filter in my app after bundling and deploying to a remote server. It works fine locally, but if I run my app remotely i get the error:
"Error: [$injector:unpr] Unknown provider: eProvider <- e <- filterByQueryFilter"
This is my code:
app.js:
import myFilters from "./shared/filters";
import myModule from "./myModule";
export default angular.module('app', [
lots-of-modules...,
myFilters,])
.config(defaultRouting)
.run(["$http", "$rootScope", "$state", function($http, $rootScope, $state){ //code.. }]);
index.js(in shared/filters folder):
import filterByQuery from "./filterbyquery.filter.js";
import highlightQuery from "./highlightquery.js";
import dateFormatter from "../formatter/dateFormatter";
export default angular.module("my.filters", [])
.filter("filterByQuery", filterByQuery)
.filter("highlightQuery", highlightQuery)
.filter("dateFormatter", dateFormatter)
.name;
another-module.js (where i try to use the filter):
export default class anotherModule{
constructor() {
this.restrict = 'E';
this.replace = false;
this.template = require('./template.html');
this.scope = {};
this.controller = AnotherModule;
this.controllerAs = 'ctrl';
}
}
class AnotherModule{
constructor($scope, $filter) {
this.$filter = $filter;
}
}
AnotherModule.$inject = [..., "$filter"];
Using the filter in the controller:
res = this.$filter("filterByQuery")(res, this.filterString);
I'm not really sure what I'm doing wrong here considering it works fine locally. Also, the highlightQuery filter works by using the pipe syntax in the template.html
Anyone have any idea what is happening here?
Minified AngularJS applications should be properly annotated in order to perform dependency injection.
filterByQuery filter factory function wasn't annotated. Since it's contained in separate file, it makes sense to use $inject annotation in order to keep it in same module as the function itself. It is the preferable way of annotation in ES6 with ES modules and proposed by John Papa style guide

How to ES6 import (SystemJS) after some code?

I want to import angular, instantiate the AngularJS module, and then import another file that requires that the Angular be already instantiated:
import angular from 'angular';
var app = angular.module('app', []);
import 'src/app.js';
angular.element(window).ready(function(){
angular.bootstrap(document, ['app']);
});
But Babel compiles it into this (TLDR: hoist all imports to the top)
System.register([], function (_export2) {
return {
setters: [],
execute: function () {
System.register(['angular', 'src/app.js'], function (_export) {
var angular, app;
return {
setters: [function (_angular) {
angular = _angular.default;
}, function (_srcAppJs) {}],
execute: function () {
app = angular.module('app', []);
angular.element(window).ready(function () {
angular.bootstrap(document, ['app']);
});
}
};
});
}
};
});
UPDATE: #just-boris
I was well aware of System.import().then. The problem is that app.js also imports files which make Angular components, which require that the module be instantiated.
Example imported file:
angular.module('app').controller( [ function () {} ] );
System.import().then does not wait until the dependency tree
is resolved, because it has no sense of one.
System.import('app').then(function(){
// But wait, app.js's dependencies aren't resolved!
// The Angular components aren't loaded yet!
// The following will throw errors:
angular.element(window).ready(function(){
angular.bootstrap(document, ['app']);
});
});
By design, all import statements should be available for static analysis so they must be on the top-level. See this answer for a relevant question.
If you want to load module in runtime, you should not use import for it. But you can do it with System.import instead
System.import('src/app.js').then(function() {
// deal with app.js
});

Typescript load module fail via AMD

I made AngularJs app by typescript. and use requireJs load 'js(compiled ts) file'
I made simple controller A
myCtrl.ts
module myApp {
'use strict';
interface myMessage extends ng.IScope {
message: string;
}
export class myCtrl {
constructor($scope: myMessage) {
$scope.message = "hello world";
}
}
}
and I load myApp file in main.ts
myApp.ts
import myController = require('./myCtrl');
module myApp{
'use strict';
angular.module('myApp',[]).controller('myCtrl',myCtrl);
}
angular.bootstrap(document,['myAppDo']);
load was success but $scope.message not changed.
'Cannot read property 'myCtrl' of undefined'
when I change myApp.ts it work's fine
angular.module('myApp', []).controller('myCtrl', ($scope, $http) => {
$scope.message = "hello";
});
angular.bootstrap(document,['myApp']);
how can I Solve?
I solved it. first, add 'export' the controller module
module myApp
to
export module myApp
then specify the path
import myCtrl = require('./myCtrl');
angular.module('myApp',[]).controller('myCtrl',myCtrl);
to
import myCtrl = require('./myCtrl');
angular.module('myApp',[]).controller('myCtrl',myCtrl.myApp.myCtrl);
it seems something is wrong, but it work
Steps
Add AMD-dependency
Import module
Result code
///<amd-dependency path="here path to your module"/>
import myController = require('myCtrl');

Unknown provider in Karma test

I have the following provider:
(function (angular) {
angular.module('app')
.provider('$_Config', ConfigProvider);
function ConfigProvider() {
.... //routes definition
}
ConfigProvider.prototype.$get = function () {
return this;
};
ConfigProvider.prototype.getRoutes = function() {...}
//other prototype functions
})(angular);
In app.js I am using it like this:
app.config(function ($routeProvider, $_ConfigProvider) {
var routes = $_ConfigProvider.getRoutes();
routes.forEach(function(route) {
$routeProvider
.when(route.route, {
.....
})
}
Every thing work fine till it gets to testing. Here is my test:
describe('Provider: $_ConfigProvider', function () {
// load the providers module
beforeEach(module('app'));
// instantiate provider
var $_ConfigProvider;
beforeEach(inject(function (_$_Config_) {
$_ConfigProvider = _$_Config_;
}));
it('Should verify getRoutes function', function () {
var routes = $_ConfigProvider.getRoutes();
expect(Object.prototype.toString.call(routes) === '[object Array]').toBe(true);
});
});
When running the test I am getting the following error:
Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $_ConfigProvider
Note: The $_ConfigProvider is injected correctly during run-time.
You are likely not including the file where the provider is defined in in your karma.conf.js dependencies list. See this question:
Include dependencies in Karma test file for Angular app?
I would rename the $_Config to something else, '$' is usually reserved for angular-specific components.

AngularJS testing a service

I'm trying to test a simple service but I'm getting an Unkown Provider error. Here is the service definition:
var sessionManager = angular.module('MyApp.SessionManager', ['ngResource']);
sessionManager.factory('UserService', function($resource) {
var UserService = $resource('/api/users/:key', {}, {
getNewUUID: {
method: 'GET',
params: {
action: 'getNewUserUUID'
}
}
});
return UserService;
});
and here is the test:
describe('Testing SessionManager', function() {
var userService;
beforeEach(function() {
module('MyApp.SessionManager');
inject(function($injector) {
userService = $injector.get('UserService');
});
});
it('should contain a UserService', function() {
expect(userService).toBeDefined();
});
});
I can't seem to see the problem, I know that the UserService javascript file is being called because I can get a console log at the top of the file, however if I put it in the service definition I don't see it get called. So for some reason it's like Angular is not instantiating my service?
I realized that the problem was my module MyApp.SessionManager was being replaced because I thought you could declare dependencies every time it was reopened to add a module. The code above is fine if of course the service is actually surviving up until the tests.

Categories