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.

Leave a Reply

Your email address will not be published. Required fields are marked *