Beginner issue with Angular/TypeScript compilation

Question

I'm working through projects in the book "Learning Angular for .NET Developers". There are two in ch.3. I don't have a problem with the project code itself. The problem is that I just can't get the projects to run. The build fails during the typescript transpile process.

I am invoking the code using the npm start command. Here is the scripts part of the package.json file:

"name": "angular-io-example",
"version": "1.0.0",
"scripts": {
    "test:once": "karma start karma.conf.js --single-run",
    "build": "tsc -p src/",
    "serve": "lite-server -c=bs-config.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "build:watch": "tsc -p src/ -w",
    "build:upgrade": "tsc",
    "serve:upgrade": "http-server",
    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
    "serve:aot": "lite-server -c bs-config.aot.json",
    "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
    "copy-dist-files": "node ./copy-dist-files.js",
    "i18n": "ng-xi18n",
    "lint": "tslint ./src/**/*.ts -t verbose"
  }

(Unfortunately the book doesn't explain the package.json file - it just gives it to you as downloadable content.)

The problem occurs at the build command "build": "tsc -p src/".

When I try to run it as is, I get the following in the command line interface:

>tsc -p src/

node_modules/@types/angular/index.d.ts(232,41): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(233,41): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(1252,41): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(1253,41): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(1972,55): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(1976,54): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(1986,55): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(1991,57): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(2005,48): error TS1005: ',' expected.
node_modules/@types/angular/index.d.ts(2088,22): error TS1005: ',' expected.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: 'tsc -p src/'
npm ERR! Exit status 2

I'm not sure that the node_modules errors are even the problem as I can compile the typescript code manually using tsc. I get the same error messages but the code compiles. (I'm also puzzled as to why the transpiler is referencing the node_module code at all since it is set to "exclude" in the tsconfig.json file.)

The problem does however seem to lie with the tsc command. I find that if I replace the build command with something silly, like "ipconfig", the project runs perfectly (since the typescript code was transpiled manually).

I'm hoping someone can explain to me why the build process is failing.

I would highly suggest that you instead learn Angular using the Angular CLI. The Angular CLI came out a few months after Angular, so many original books/courses don't show how to use it. The Angular CLI is now the way to build Angular applications and is easy to use. You can find a step by step tutorial here: angular.io/tutorial/toh-pt0 — DeborahK
– DeborahK, Commented Dec 21, 2017 at 0:24
I'm using typescript version 2.6.2. Hopefully it's the current version - I only downloaded it a couple of days ago. — drunkenwagoner
– drunkenwagoner, Commented Dec 21, 2017 at 5:29
Actually, I've just noticed something. The package.json file is pulling in a typescript transpiler, and it's version 2.2+. Presumably that's the version that is getting invoked, rather than my global install. — drunkenwagoner
– drunkenwagoner, Commented Dec 21, 2017 at 5:42

drunkenwagoner · Accepted Answer · 2017-12-21 06:06:49Z

1

The problem was indeed the fact that the devDependencies node was bringing in an old version of the tsc library, and using it instead of the global version of tsc. That's probably why the npm update command didn't help. Also the version of rxjs was faulty and needed to be updated. Everything's working now.

Thanks to everyone for their comments. It's such a drag when you want to learn something but you can't get to first base due to some silly problem

answered Dec 21, 2017 at 6:06

drunkenwagoner

2011 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AJF · Accepted Answer · 2017-12-21 00:09:29Z

0

This appears to be a known issue. It seems to be solved by npm update -g typescript.

This is apparently solved for typescript versions 2.3+, though is still an open issue. Since this is the case, StackOverflow can only take you so far - please refer to the GitHub issue and if this problem persists (and there's nothing wrong with your code or installation) then please consider raising an issue of your own.

answered Dec 21, 2017 at 0:09

AJF

11.9k2 gold badges41 silver badges64 bronze badges

Collectives™ on Stack Overflow

Beginner issue with Angular/TypeScript compilation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related