Maxim Maxim - 1 year ago 65
AngularJS Question

AngularJs 1.x upgrade, unexpected token : for a safe type

I'm working on angularjs from 1 to 2 upgrade tutorial (Angular 1 upgrade) and phonecat codebase example. After installing typescript and all mentioned dependencies adding a type :boolean for a function parameter input makes chrome fails the execution with "Uncaught SyntaxError: Unexpected token :" checkmarkFilterProvider consecutively is not created and fails the Provider injection into a component.

(function() {
///<reference path='../../../typings/index.d.ts' />
'use strict';

filter('checkmark', function() {
return function(input:boolean) {
return input ? '\u2713' : '\u2718';

npm run tsc -w command compiles .ts files and creates maps, however, browser execution fails.
enter image description here


"name": "angular-phonecat",
"private": true,
"version": "0.0.0",
"description": "A tutorial application for AngularJS",
"repository": "",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"bower": "^1.7.7",
"concurrently": "^2.1.0",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"protractor": "^3.2.2",
"shelljs": "^0.6.0",
"tsc": "^1.20150623.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run http\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"http": "http-server -a localhost -p 8000 -c-1 ./app",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",


"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
"exclude": [

enter image description here

In the end *.ts source files are compiled in a project explorer but browser doesn't have them as @tadwork pointed out. What is my configuration missing out?


To run the angular app I execute npm start script from package.json that theoretically should compile *.ts files and run http-server with the ./app as a server source (see package.json scripts -> start).

./app folder after script execution has compiled *.js and *.map.js files.
enter image description here


looks like the Typescript type annotations are getting injected into the browser without getting compiled so the types are still on the input parameter

return function(input: boolean )