Using TypeScript when installing packages from npm often requires you to install related definition files. This lesson shows you how to use typings to install es6-shim then how to configure SystemJS to load from node_modules.
Great Tutorial John! It's seem to me very confusing to make it work, we have to set too much configuration in order to install lodash and rxJs, in the old way everything was easy: "script:src to remote lodash" (on the client, or i can use gulpfile to bundle everything) and that's it! I hope someone will improve it...
IMO, it's much easier to get it all working with Webpack, rather than with SystemJS. Just my preference though.
Really enjoy yet another great course from you John! Just want to note that npm install rxjs --save will install rxjs@5.0.0-beta.8 and the example with subscribing to the 1s observable interval in this clip won't run. However, revert it back to rxjs@5.0.0-beta.6 will do the trick.
You could also do "npm install symbol-observable" and adjust the System.config in the index.html. In packages you would need to add: "symbol-observable": { "defaultExtension":"js", "main": 'index.js' } and in map: "symbol-observable": "node_modules/symbol-observable",
Maybe this helpful for someone.
When I run the new command "typings install dt~es6-shim --save", I get this error.
typings ERR! message Attempted to compile "es6-shim" as an external module, but it looks like a global module. You'll need to enable the global option to continue.
typings ERR! node -v v6.2.0 typings ERR! typings -v 1.3.0
Any suggestions?
Make sure to run it with the --global
flag:
typings install dt~es6-shim --save --global
The --global
flag replaced the --ambient
flag in typings v1.0
. It would be good for them to update the alert-warning box with this information.
For reference:
The
--global
flag tells Typings to accept type definitions that are "global" in nature. Currently, DefinitelyTyped typings are all "global". (src)
IMO, it's much easier to get it all working with Webpack, rather than with SystemJS. Just my preference though.
I second this preference. I understand they were trying to limit the videos to focus on TypeScript, but I suspect that many viewers–particularly people brand new to TypeScript–may have been lost in the weeds of getting everything set up properly.
This is more of an issue with how new TypeScript is and how much of it's ecosystem is still in flux (you'll see that this video series is less than two weeks old yet multiple parts of it are already outdated). For what they had to work with, it's a good starter series.
It looks like symbol-observable
is installed with rxjs
automatically. However, you are correct in that I did have to add it to the "packages" object as well as "map".
An interesting add-on to this: if you include a "main" file for the "rxjs" package as "Rx.js", in main.ts
you are able to say
import * as Rx from "rxjs";
Which allows you to write
Rx.Observable.interval(4000).subscribe(x => console.log(x));
Without having to import anything else from "rxjs".
.tsconfig.json
excludes node_modules
... what's going on here?Thanks! This helped me out.
Thanks!
excludes
is simply telling the TypeScript compiler to not compile files in node_modulesYes, Webpack hides a lot of what is really happening behind whichever loader
you're using. So many people never learn (or simply never need to learn) that TypeScript compiles to a module format then you need to set up your own loader. I think it's an important distinction to understand, even if you don't need to deal with it because Webpack handles it so nicely.
I ran into an issue where current beta (5 10) of RXJS was causing an error. When I specified beta 6, issue was resolved. See this thread for a similar issue: https://github.com/IgorMinar/new-world-test/issues/13
Take into account that you should also add a global
flag in order to install es6-shim
typings install dt~es6-shim --save --global
I'm having issues working with Typescript. My setup and versions are:
package.js - rxjs": "^5.0.0-beta.6"
tsconfig.json - "files": ["main.ts"]
main.ts - Contains only this two lines:
import {Observable} from 'rxjs/Observable';
Observable.fromArray([1, 2]);
And complains about not finding module "rxjs/Observable".
What am I missing?
I got an error when I put "Rx.Observable.timer(1000).subscribe( x => console.log(x) );" in main.ts
The error is : system.src.js:5031 Uncaught (in promise) Error: SyntaxError: Unexpected token <
at Object.eval (http://localhost:8080/dist/main.js:3:10)
at eval (http://localhost:8080/dist/main.js:16:4)
at eval (http://localhost:8080/dist/main.js:17:3)
Evaluating http://localhost:8080/node_modules/rxjs
Evaluating http://localhost:8080/dist/main.js
Error loading http://localhost:8080/dist/main.js
I compare the code line by line, but still cannot make it run. I think there is something wrong with es6-shim , I run "typings install dt~es6-shim --save --global " to install es-shim .
I got the same error as you, and I solve it by adding "main": "Rx" to packages configuration, so it's like this: "rxjs": { "defaultExtension": "js", "main": "Rx" }
This one worked for me - thanks.
this command worked for me to install es6-shim typings
typings install es6-shim --save --global --source dt
This should probably be clarified at the very bottom of the video or the instructions edited, IMO; this took me some time to resort to for a close friend in order for them move on with me to support them
Thanks so much for the typings
api info message.
I got the same error as you, and I solve it by adding "main": "Rx" to packages configuration, so it's like this: "rxjs": { "defaultExtension": "js", "main": "Rx" }
This worked for me at the root level of package.json
Also import { Observable } from "rxjs";
started working
I get an error on Rx.Observable.interval(1000).subscribe(x => console.log(x));
Error : rc/main.ts(5,15): error TS2339: Property 'interval' does not exist on type 'typeof Observable'.
src/main.ts(5,40): error TS7006: Parameter 'x' implicitly has an 'any' type.
../../../../../node_modules/rxjs/internal/types.d.ts(35,84): error TS2304: Cannot findname 'Iterable'.
../../../../../node_modules/rxjs/internal/types.d.ts(39,6): error TS2304: Cannot find name 'Symbol'.
My SystemJS config looks like below:
System.config({
packages: {
"dist": {
"defaultExtension": "js",
"main": "main"
},
"rxjs": {
"defaultExtension": "js",
"main": "Rx"
}
},
map: {
"lodash":"https://npmcdn.com/lodash@4.11.1",
"rxjs": "node_modules/rxjs"
}
});
System.import("dist");
However when I use
import * as Rx from 'rxjs';
Rx.timer(1000).subscribe(x => console.log(x));
I get error only about Iterable and Symbol.