Maxim Maxim - 5 months ago 21
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';

angular.
module('core').
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

package.json

{
"name": "angular-phonecat",
"private": true,
"version": "0.0.0",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
"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",
}
}


tsconfig.json

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


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?

Update

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

Answer

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 )

Comments