I am completely confused what I am doing wrong here.
Say I have a test file 'SimpleTest.ts' containing the following:
/// <reference path="../otherdir/simpleclass.ts" />
module MyModule.SubModule {
describe("this test", () => {
var myObject: SimpleClass = new SimpleClass("");
it("doesn't even get here!", () => {
expect(myObject).toBeDefined();
});
});
}
The class here is defined in a different file, but in the same module, like this:
module MyModule.SubModule {
export class SimpleClass {
constructor(private myMember: string) {}
}
}
So both definitions reside in the same module. Typescript compiles fine, everything looks OK.
But when I start protractor (yes, I have configured 'specs:' path to the files correctly), it stops with the error
this test
encountered a declaration exception - fail
I know that I could get it to work by using module.export and require, but this is not a good solution.
First, I loose the type checking of typescript, when I use javascript 'require', and the type checking is one of the reasons why I'm using it in the first place.
Second, I think this is bad style to mix plain javascript into typescript code.
Any help would be appreciated!
Thanks in advance,
Regards,
Jörg
Stop using internal modules.
It honestly helped me a lot when trying to understand TypeScript.
My experiences with internal TypeScript modules are answered here
.
You can read the article of Steve Fenton here for more details.
I hope this is of any help still to you.
Related
I'm a total beginner with Vue.js and struggling to find the answer to what I feel is a fairly basic need.
I have a JavaScript library that cannot be installed locally and must be imported via script tag in the index.html file in the old-fashioned way:
<script src="https://foo.bar/scriptyscripts.js"></script>
This library has a bunch of methods in it that I need to use in various spots throughout my app, so it's not going to be a problem to load it globally. The issue I'm facing is that it's loading fine, but the methods are not being recognised in components.
I can use the methods and whatnot if I put them all in a script tag in the index.html however doing that rather defeats the whole point of having components.
Can anyone help me with the step that I'm missing to register all of the methods in this loaded js file so my components don't get mad?
Specifically, the script contains require.js and a collection of other things including JQuery.
Including the library makes the method 'require' available, which is used to load other modules on demand - the example being "js/qlik" in the below snippet. "js/qlik" loads JQuery and a stack of stuff associated with "qlik".
//async login method here. not relevant to this problem
login().then(() => {
require.config({
baseUrl:
(config.isSecure ? "https://" : "http://") +
config.host +
(config.port ? ":" + config.port : "") +
config.prefix +
"resources",
webIntegrationId: config.webIntegrationId,
});
//Load js/qlik after authentication is successful
require(["js/qlik"], function (qlik) {
qlik.on("error", function (error) {
$("#popupText").append(error.message + "<br>");
$("#popup").fadeIn(1000);
});
$("#closePopup").click(function () {
$("#popup").hide();
});
var app = qlik.openApp("caa866be-c8e1-44c8-b67b-dac9d24421fa", config);
});
});
The problem I have is that if I load this library in the index.html file and then try to execute the methods in the snippet above in any component, it does not know that the methods are available.
I see:
'Module not found: Error: Can't resolve 'js/qlik'
66:11 error '$' is not defined
which indicates that the components are unaware of the methods because they're not registered like they would be if I were importing a packaged afterinstalling it locally via NPM
i.e. Your original js code: function abc(){// sth...}
What you need: window.abc = ()=>{// sth...}
Even if you want it in Vue dom.
You should add vue.prototype.abc = ()=>{//sth...}
I'm using TypeScript 2 and TSX with the preserve (not React) setting and with "noImplicitAny" enabled:
"noImplicitAny": true,
"jsx": "preserve"
The problem is, I keep getting this error when trying to build a simple TSX file:
error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.
Here's an example of my TSX file:
'use strict';
import m from './m';
export default {
view() {
return (
<h1>Hello Mithril!</h1>
);
}
};
I'm trying to get TSX working with a non-React stack (Mithril). Thanks in advance!
Answer to original question: (how to solve the TS2602 error)
This is quite simple, as explained here:
As the errors say: "because the global type 'JSX.Element' does not exist"
you can define those types:
declare namespace JSX {
interface Element { }
interface IntrinsicElements { div: any; }
}
I recommend getting the react-jsx.d.ts file from DefinitelyTyped
You can use this file as a source for more complete typings (you'll need definitions for every sub-element in IntrinsicElements, i.e. div, p, a, etc.)
Getting farther with TSX and Mithril:
Once you've solved the typing issues, you'll find that you're not quite there. If you use the "jsx": "preserve" setting, the HTML code will be written directly in the generated js file, without any translation. This of course can't be loaded by a web browser (because it's a javascript file, not an html file).
I think there are two ways to make it work:
First solution that comes to mind is to use "jsx":"react" and write a small wrapper that will forward the calls to mithril, like this:
class React {
public static createElement(selector: string, attributes: object, ...children: Mithril.Child[]): Mithril.Child {
return m(selector, attributes, children);
}
}
This is the solution I'm currently using because it doesn't involve additional tools.
The other solution is to keep "jsx":"preserve" and use Babel, as described in mithril documentation, to translate the jsx file (which is generated by typescript from the tsx file) to a valid js file.
In the end, I've managed to make it work, but I found the process quite messy, with typescript/npm module system getting in the way to have JSX types extend Mithril types (so that your functions can return mithril-compatible types), etc. I had to modify the mithril typings (and drop npm #types/mithril), and add a few modules of my own.
I'm interested to know if someone solved this problem in an elegant and simple way!
Due to the lack of reputation it won't let me comment on youen's answer above so I'll include this in an answer of my own.
First of all, you can include this gist at the top of your project and name it something like mithril-jsx.d.ts so that typescript will see it as a type definition and won't compile it. The linked gist simply declares JSX.element as m.Vnode<any, any> and lists every HTML element under JSX.IntrinsicElements as any. Not a huge deal but a time saver.
Second, and the reason I'm even posting this: You do not need gulp or any other tool to compile .tsx files to mithril-using .js ones. All you have to do is specify these in your tsconfig.json
{
"compilerOptions": {
//...your other stuff here
"jsx": "react",
"jsxFactory": "m"
}
}
More information about the compiler options here: http://www.typescriptlang.org/docs/handbook/compiler-options.html
I am also developing with Mithril(2.0.3) and TypeScript(3.5.3).
TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
This error message can be resolved by installing #types/react.
npm install --save-dev #types/react
tsconfig.json has the following settings.
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "m"
}
}
I'm studing TypeScript and RequireJS.
I want to simple module require but module type information missing.
Is there smart solution in such situation?
requirejs(['backbone'], (Backbone) => {
// In this function.
// Backbone is 'any'
});
requirejs(['backbone'], (BackboneRef: Backbone) => {
// error : Type reference cannot refer to container
// 型参照でコンテナー 'Backbone' を参照できません。
});
To do so you need to do the following:
Download backbone.d.ts from https://github.com/borisyankov/DefinitelyTyped, the backbone.d.ts provides typescript strongly-typed interface, if you use IDE like Visual Studio, you can have all the intellisense support to Backbone
(Optional) Config backbone in RequireJS
In your TypeScript class, you can reference Backbone like the following
`
/// <amd-dependency path="backbone" />;
/// <reference path="path/to//backbone.d.ts" />;
export class YourModel extends Backbone.Model {
}
The amd-dependency tells the compiler how to reference backbone, so it would generate the correct define statement in JavaScript.
The reference provides a way to Backbone's definition for typed check.
Hope this helps! TypeScript eliminates the hell of writing long define or require js statement, which can be error-prone in situation where there are lots of dependencies.
I've seen similar posts around the web and nothing anyone has suggested works for me. I'm really faced with the choice of dumping one or the other it seems at this point.
This "Getting Started with SignalR and MVC 4 tutorial":
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc-4
says you need two script includes to make signalR work:
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
I'm at a loss as to how to make the second one, the autogenerated SignalR hub script, happen in require.js. Unless I'm missing something there just doesn't seem to be a viable require.js syntax for inclusion of autogenerated scripts. Without it you get this error at line 159 of jquery.signalR-1.1.2.js:
"JavaScript runtime error: SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. "
The code at that point in jquery.signalR is doing this:
signalR.hub = {
start: function () {
// This will get replaced with the real hub connection start method when hubs is referenced correctly
throw new Error("SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. <script src='/signalr/hubs'></script>.");
}
};
Has anyone actually made this autogenerated script thing happen via require.js?
Been studying this a bit more. Let me add some detail:
I'm using this approach - Structuring scalable client side applications: (http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/) to make a more scalable structure. Second part in that series "Permit modules to utilize multiple files and a logical folder structure" http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/ has me splitting my actual signalr code out into a separate Marionette chat module (separate from my main app.js file) to achieve a better file structure. I really like this approach. The rest of my project is set up like this now and it really is showing benefits when it comes to finding code. I think that extra split is where I'm stuck. Can't seem to get that second dependency, the autogenerated script, into that separate chat module file. I'm still studying this but it looks like this to me at this point. require.js gets the dependency into my Marionette app:
require(["marionette","handlebars", "signalr", "signalr.hubs"], function (Marionette) {
window.App = new Marionette.Application();
App.addRegions({
headerRegion: "#header",
contentRegion: "#content",
footerRegion: "#footer",
});
require(["modules/main/loader", "modules/chat/loader"], function () {
App.start();
});
})
If I want chat that dependency to make its way further into the app, into the chat module in another file?
Something like?
define(dependencies,
function () {
App.module("ChatModule", function (ChatModule, App, Backbone, Marionette, $, _, "signalr.hubs", "signalr.hubs") {
// SignalR Proxy created on the fly
var chat = $.connection.chatHub;
// Start the connection
$.connection.hub.start();
//more chat code...
An update:
The answer below does work in my dev environment. But it does not work when I publish the code to a real production server.
When the code is published to a real production server (IIS 6.1 on Windows Server Enterprise 2008 R2) the browser console once again shows a "404" for the autogenerated reference.
Specifically, the console shows the "?" is being added into the reference path before ".js", like this...
http://mydomain.com/myapp/Scripts/application/signalr/hubs?.js...
Tried taking the "?" out but then it removes my app name from the path, like this...
http://mydomain.com/signalr/hubs.js.
I think what would get me there is the first one, without the "?", like...
http://mydomain.com/myapp/Scripts/application/signalr/hubs.js
I'm just not seeing how to make that happen.
FINAL UPDATE:
Final piece of the puzzle for production server is the site's virtual directory. Here's final code that worked for me. Thanks Raciel R for your help:
requirejs.config({
paths: {
//core
"jquery": "jquery-1.9.1",
"signalr": "jquery.signalR-1.1.2",
"signalr.hubs": "/productionservervirtualdirectory/signalr/hubs?"
},
shim: {
"jquery": {exports: "$"},
"signalr": { deps: ["jquery"] },
"signalr.hubs": { deps: ["signalr"] }
});
//Then all you have to do is to make signalr.hubs required in your modules. Ie:
require(["signalr.hubs"], function(){
//your code here
});
requirejs.config({
paths: {
//core
"jquery": "jquery-1.9.1",
"signalr": "jquery.signalR-1.1.2",
"signalr.hubs": "/signalr/hubs?"
},
shim: {
"jquery": {exports: "$"},
"signalr": { deps: ["jquery"] },
"signalr.hubs": { deps: ["signalr"] }
});
Then all you have to do is to make signalr.hubs required in your modules. Ie:
require(["signalr.hubs"], function(){
//your code here
});
I set up RequireJS successfully using #raciel-r's solution but I was still having problems with other JavaScript modules like karma that were also confused by the dynamic proxy. I converted the signalr proxy to a static file and used that with RequireJS instead:
Import Microsoft.AspNet.SignalR.Utils
Run packages/Microsoft.AspNet.SignalR.Utils.2.X.X/tools/signalr.exe
ghp /path:my/bin /o:path/to/scripts/server.js where /my/bin is the directory containing the assemblies with your SignalR Hubs.
Replace your reference in to /signalr/hubs with server:
requirejs.config({
paths: {
// ...
"signalr.hubs": "path/to/scripts/server"
},
// ....
If you are using the convenience methods of the generated proxy, you will also have to rewrite them (see How to create a physical file for the SignalR generated proxy)
I'm fairly new to Angular and have reviewed all the similarly related questions on Stack Overflow but none have helped me. I believe I have everything set up correctly but am still getting an 'Unknown Provider' error when attempting to inject a service into a unit test. I have laid out my code below - hopefully someone can spot an obvious error!
I define my modules in a seperate .js file like this:
angular.module('dashboard.services', []);
angular.module('dashboard.controllers', []);
Here is where I define a service called EventingService (with logic removed for brevity):
angular.module('dashboard.services').factory('EventingService', [function () {
//Service logic here
}]);
Here is my controller that uses the EventingService (this all works fine at runtime):
angular.module('dashboard.controllers')
.controller('Browse', ['$scope', 'EventingService', function ($scope, eventing) {
//Controller logic here
}]);
Here is my unit test - its the line where I attempt to inject the EventingService that causes an error when I run the unit test:
describe('Browse Controller Tests.', function () {
beforeEach(function () {
module('dashboard.services');
module('dashboard.controllers');
});
var controller, scope, eventingService;
beforeEach(inject(function ($controller, $rootScope, EventingService) {
scope = $rootScope.$new();
eventingService = EventingService
controller = $controller('Browse', {
$scope: scope,
eventing: eventingService
});
}));
it('Expect True to be True', function () {
expect(true).toBe(true);
});
});
When I run the test I get this error:
Error: Unknown provider: EventingServiceProvider <- EventingService
I have ensured that my jasmine specrunner.html file has all the necessary source files (this is an Asp.Net MVC project):
<!-- Include source files here... -->
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="#Url.Content("~/Scripts/angular.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/angular-mocks.js")"></script>
<script type="text/javascript" src="#Url.Content("~/App/scripts/app.js")"></script> <!-- Angular modules defined in here -->
<script type="text/javascript" src="#Url.Content("~/App/scripts/services/eventing.js")"></script> <!-- My Eventing service defined here -->
<script type="text/javascript" src="#Url.Content("~/App/scripts/controllers/browse.js")"></script> <!-- My Browse controller defined here -->
<!-- Include spec files here... -->
<script type="text/javascript" src="#Url.Content("~/App/tests/browse.js")"></script> <!-- The actual unit test here -->
I just can not fathom why Angular is throwing this error complaining about my EventingService. My controller works fine at runtime - it's just when I try to test it that I am getting an error so I am curious as to whether I have screwed something up with the mocking/injection.
The Angular help on testing is rubbish so I am stumped at present - any help or suggestions anyone can give would be very appreciated. Thanks.
I just ran into this and solved it by switching to getting the service using the $injector explicitly:
var EventingService, $rootScope;
beforeEach(inject(function($injector) {
EventingService = $injector.get('EventingService');
$rootScope = $injector.get('$rootScope');
}));
I wish I could tell you why this works and why the simple
beforeEach(inject(function(EventingService) { .... }));
does not, but I don't have the time to investigate the internals. Always best to use one coding style and stick to it.
This style is better in that the name of the variable that you use in your tests is the correct name of the Service. But it is a bit verbose.
There is another angular magic feature that uses strange variable names like $rootScope but I don't like the hacky look of that.
Note that the most of the time people get this error because they didn't include the modules:
beforeEach(module('capsuling'));
beforeEach(module('capsuling.capsules.services'));
If your controllers (defined under dashboard.controllers module) depend on some services which are enclosed in different module (dashboard.services) than you need to reference the dependency modules in your module signature:
angular.module('dashboard.services', []);
angular.module('dashboard.controllers', ['dashboard.services']);
While this question is fairly old i lost significant time solving a problem similar to this one, i.e.:
Error: Unknown provider: SomeServiceProvider <- SomeService
Hence, i'm leaving here another possible cause to this issue. Hopefully, it would helpful to someone.
In my case, i had in my project two modules with the exactly same name but with different dependencies being created, i.e., two different .js files with:
angular.module('moduleName', [dependencies]))
From angular documentation:
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module
Conclusion: It turns out that what was being injected in the test was the module with the wrong dependencies. Removing the second argument from the module that was erroneously being created solved the problem.
Have you tried defining an additional module that depends on your other aggregated modules like so:
angular.module( 'dashboard', [ 'dashboard.services', 'dashboard.controllers' ] )
So you can in the beforeEach specify the one module that has both submodules defined in it like so:
describe('Browse Controller Tests.', function () {
beforeEach(function () {
module('dashboard');
});
var controller, scope, eventingService;
beforeEach(inject(function ($controller, $rootScope, EventingService) {
scope = $rootScope.$new();
eventingService = EventingService
controller = $controller('Browse', {
$scope: scope,
eventing: eventingService
});
}));
it('Expect True to be True', function () {
expect(true).toBe(true);
});
});