TypeScript Configuration Troubles – Developers Unite

After three long days of whack-a-mole’ing my Modern Web Dev build for my Angular 2/TypeScript/Sass/Gulp website project, it is launched again on my local server. Four compilation errors plagued me and other developers world-wide. I fixed three out of four of them. I welcome any comments over the next few days that could point me toward a solution on the one that is still broken. See first error below.

1) error TS2304 is TypeScript compilation-related


First thing first: the one left unfixed. The most recent error from my command line today, which resulted from my running the gulp serve command, centers around TypeScript compilation failing in my build. As advice via the link above suggests, I could call the compiler from the root directory, or pass in absolute paths. The absolute paths work-around is what I will try tomorrow. My initial thought was to change a line or two in the gulpfile.js, but this generated build is very complicated and, aye, there is no such file named gulpfile.js in it!

Error on command line:
[19:22:53] Error in plugin run-sequence

An error occured in task 'scripts-javascript-dist'.

app/pages/public-events/public-events.component.ts(6,36): error TS2307: Cannot find module '[filepath to typescript file].

app/pages/public-events/public-events.component.ts(16,13): error TS2304: Cannot find name 'Images'.

app/test/sanity_test.spec.ts(2,1): error TS2304: Cannot find name 'describe'.

app/test/sanity_test.spec.ts(3,2): error TS2304: Cannot find name 'it'.

app/test/sanity_test.spec.ts(4,3): error TS2304: Cannot find name 'expect'.

app/test/sanity_test.spec.ts(7,2): error TS2304: Cannot find name 'xit'.

app/test/sanity_test.spec.ts(8,3): error TS2304: Cannot find name 'expect'.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/platform/browser.d.ts(77,90): error TS2304: Cannot find name 'Promise'.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/src/core/application_ref.d.ts(83,60): error TS2304: Cannot find name 'Promise'.
X 5 more similar promise errors referencing different line numbers in the parentheses.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(23,15):error TS2304: Cannot find name 'Map'.
X 8 more similar map errors of course referencing different file names and line numbers.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/src/facade/collection.d.ts(2,25):error TS2304: Cannot find name 'SetConstructor'.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.

2) npm complains about peer dependencies

Here is my comment on this issue (#5746) on Angular’s GitHub account and the comments of others who chimed in with me: https://github.com/angular/angular/issues/5746#issuecomment-215327528

Although this issue was closed on Angular’s repo, that does not mean it is fixed, as recent comments reflect. My error (pasted below) concerned the reflect-metadata dependency, but others’ concerned es6-promise, es6-shim, rxjs, and zone.js. NPM is referring to these dependencies as peer dependencies, although they are all required by Angular 2 in order to run an application. It is strange that they are referred to as peer dependencies and not just dependencies. The reflect-metadata API makes it possible for Angular 2 component decorators to work. They involve mapping and observables.

Error on my command line:
npm WARN angular2@2.0.0-beta.15 requires a peer of reflect-metadata@0.1.2 but none was installed

My get-it-to-run solution:
Lindsays-MacBook-Pro-2:Lynzphotos2016 lindsaybrown$ npm install reflect-metadata@0.1.3 --save-dev

Note: the --save-dev flag makes sure the npm package gets written to the package.json.

3) sass-node update

The first dependency that broke my Modern Web Dev build was my sass-node package not handling errors that I made as I played with my SCSS styling. I updated that package with npm-install node-sass@3.5.3 --save-dev.

4) Upgrading the whole Modern Web Dev build

I updated the entire Modern Web Dev package.json from https://github.com/dsebastien/modernWebDevBuild/blob/master/package.json, then ran jspm init (the default module loader for this project), then I ran gulp clean, then gulp, then gulp serve. My project is running on my local server but errors are still present. Feels like a fragile build to me, maybe due to my meddling with it, or maybe due to the challenge of any build keeping third party dependencies updated and compatible with one another.

To sum up…

I had no idea how many build configuration kinks still needed to be ironed out while Angular 2 is still in beta. Angular is open about the fact that they rely on third party packages/modules/dependencies. Granted, being that this is my first Angular 2 website, I could have tried writing a simpler gulpfile.js or even skipping the task runner and using just npm as outlined on https://angular.io/docs/ts/latest/quickstart.html.

With that in mind, if this Modern Web Dev build breaks one more time, I will write my own, simpler gulpfile.js from scratch, and add each dependency using npm install [package-name] --save-dev.

Update on April 28, 2016: Thank you Dave Ceddia of Angularity for your emailed advice that I follow my plan B irregardless of any additional breaks: start my build from scratch by writing my own gulpfile.js.

Checking In

This is a status update regarding my job hunting.

After I went on some interviews in January, I realized what kind of tech job I really want. I spent February and March learning NodeJS by attending NodeDC meetups, making inspiring connections at the annual NationNode conference, and working my way slowly through LearnYouNode.

I have also been dissecting the Modern Web Dev build I used to scaffold the next version of my event photography website. Lynzphotos2016 is under development. I am writing it in TypeScript using the much-anticipated JavaScript framework, Angular 2. Babel will compile my TypeScript to es5. My task runner is Gulp. I am using Sass for my styling, so am writing my styling in a SCSS file, using mixins and variables. I am going to dabble in BEM and SuitCSS. Frankly, I am dabbling and exploring too many optional tools and methodologies in this build, hence my slow progress. I hope I am not being too hard on myself by calling my progress slow.

For greater detail about the build, about my thoughts on the naming convention, and to find out which learning resources have helped me along the way, check out my project’s README.md on GitHub.

Further, I have refactored my NTPEP map in order to demonstrate that I can exercise closure. I have also taken Angular 2 tutorials, the main one being the Tour of Heroes which I pushed to GitHub. I have attended the DC OpenDataDay conference and taken smaller, unpublished tutorials on Plunkr and cloud9.

Every day I log my hours and summarize what I do in each session. I believe in Deliberate Practice, a learning methodology which entails stretching out of my comfort zone and challenging myself on new material in two sessions a day.