I've recently migrated to Angular 6.0. And VS Code highlights all jasmine functions as unknown. It works fine and runs tests successfully. How to let intellisense know about Jasmine?
In previous version some workaround worked:
import {} from "jasmine"
But it doesn't work any more.
Next import in test.ts also generates errors:
import 'jasmine';
Update: If I add "jasmine" to types in tsconfig.json - it does the trick. But it doesn't work with tsconfig.spec.json. I don't need this types in application bundle.
Try running npm i #types/jasmine and add "jasmine" to the types-array in the tsconfig.json file. I had the same issue and this worked for me.
Related
I am using ace code editor package which uses a webpack-resolver.js file in its package that has inline file-loader! in each require statement
e.g.
This works fine for my webpack config and everything builds fine when using it however when I go to use jest, it isn't recognizing the file-loader! and fails
require('file-loader!./src-noconflict/ext-beautify.js')
Is there something in the jest config to fix this?
I get the following error
Cannot find module 'file-loader!./src-noconflict/ext-beautify.js' from 'webpack-resolver.js'
I added: "ace-builds": "<rootDir>/node_modules/ace-builds" in Jest moduleNameMapper, and it worked for me.
We're using Tabulator-tables in a large Angular project and I cannot seem to find a usable definition files.
I've tried https://www.npmjs.com/package/#types/tabulator-tables which seems updated etc but it results in lots of errors in my IDE and the project will not compile as a result. There are many errors even though the compilation worked before I added the types package. Its pointless and impractical to add many #ts-ignore comments.
Be advised - I took notice to use the same version of the type definition package as installed in my project (v4.2.2). I assume the problem is with the automatic generation of the above package - the resulting .d.ts file is not usable as a result.
Please correct me if I'm wrong and any help in integrating definition files will be appreciated. TIA!
I had a similar issue with adding TypeScript typings on Angular project and here's what i did:
encapsulated Tabulator inside Angular component (data-grid.component.ts in my case);
npm install #types/tabulator-tables
created file data-grid.component.d.ts with:
declare module 'tabulator-tables' {
export = Tabulator;
}
the key thing: removed import Tabulator from 'tabulator-tables' from file data-grid.component.ts
And it's worked.
A full set of TypeScript Typings can be found in the #types/tabulator-tables npm package
npm install #types/tabulator-tables
An example of how to use the typings in a project can be found here
The Language Documentation includes more information on the available typings
I already wrote an answer for this issue, not good enough in my opinion, but some people upvoted it as right, so I decided to leave it as it is and write a new one.
There is some issues with adding types for tabulator, this is because type annotations not being exported, but there is a way to use them.
After installation of types for tabulator (npm install --save #types/tabulator-tables), you should open (or create it, if it's not exists) file index.d.ts inside directory src, and copy following code into it:
declare module 'tabulator-tables' {
export = Tabulator;
}
You need to ensure that you have "allowSyntheticDefaultImports": true inside compilerOptions of file tsconfig.json or tsconfig.app.json (depends on your project), and tsconfig.spec.ts (it needs for unit testing).
Very important to unload and start over ng serve after editing of tsconfig.
After that all typings should work. Just in case I created simple Angular example, hope this helps.
I am trying to build my new portfolio with Angular 4 but came across few issues.
I first built it with normal html,css and js and worked fine.
I am using typed.js to create an animation at the beginning.
This are the steps that I followed:
1 - in node_modules created folder typed within typed.min.js
2 - angular-cli.json under scripts section "../node_modules/typed/typed.min.js"
3 - in typed component i imported as: import * as typed from
'../../../../node_modules/typed/typed.min.js'; (apparently not working today and the terminal is saying this ERROR in src/app/components/loading-section/loading-section.component.ts(2,24): error TS6143: Module '../../../../node_modules/typed/typed.min.js' was resolved to '/Users/matteosoresini/Development/Portfolio2017/node_modules/typed/typed.min.js', but '--allowJs' is not set. so if i change the path as the terminal says is working but doesn't really make sense but this is not the main issue.
4 - in ngInit i tried to implement the JS function and when run the project the terminal says typed is not a constructor, even if i move the function inside a script within the typed.component.html
can you please help me with this and clarify where to import external plugin?
Thanks
I was able to install typed.js via npm install typed.js --save.
I then tried to use import { Typed } from 'typed.js'; as shown in the typed.js documentation. That threw the not a constructor error.
I changed the import to import * as Typed from 'typed.js'; and it worked for me.
Types.js has no defined typescript types in DefinitelyTyped repo.
I not sure how it would behave with Angular since it does DOM changes outside angular. You can see and try https://github.com/kuflink/angular-typed but it is not production ready.
I am new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.
The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...
I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...
thank you in advance.
Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".
Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:
When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this:
import {Users} from '../../users'; IntelliSense should help you out here.
The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:
files: [
'src/test/unit/setup.ts',
'src/test/unit/*.ts'
],
Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};
The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript#2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.
After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the #types feature: How should I use #types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the #types/node folder. It would look something like this:
"compilerOptions": {
...
"typeRoots": [
"node_modules/#types"
],
"types": [ "node" ]
...
},
Hope this helps, with these changes the project should now build and launch correctly.
EDIT:
I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers
Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:
npm uninstall #types/whatwg-fetch
And upgrading from typescript 2.1.5 to latest:
npm install typescript --save
You might even want to install typescript globally by appending -g.
Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:
"globalDependencies": {
//"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
//"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
}
Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url.
Hope this helps someone who might've encountered the same problems even after "fixing" it.
After updating to the latest version of Aurelia (March update beta.1.1.4), I'm getting the following error every time I run karma tests:
Error: Reflect.getOwnMetadata is not a function
Error loading C:/Software/myproject/test/unit/myclass.spec.ts
How do I fix it?
This has to do with the change of Aurelia from core-js to home-grown polyfills. The Reflect polyfill is missing and tests fail to run.
This problem is addressed in Aurelia navigation skeleton app by the following import statement in each unit test file:
import 'aurelia-polyfills';
I solved it by creating a setup.ts (or setup.js resp. to your language) file with just this statement, and then just listing it in karma.config.js at the first place.
for JS e.g.:
jspm : {
loadFiles: ['test/unit/setup.js', 'test/unit/**/*.js'],
...
}
for Typescript e.g.:
files: ['test/unit/setup.ts', 'test/unit/**/*.ts'],
...