About a year ago, I created a project using the Angular Quickstart, which gives .ts files the ability to automatically get transpiled into .js files on Save. A few months ago, this feature stopped working, and I'm not sure why. I think it happened when Angular stopped using typings and instead started using @types.
Thankfully, the auto-reload feature still works for HTML and SCSS/CSS changes, so I know it's not totally broken.
All the files that I would like to be auto-transpiled have the extension .ts or .spec.ts, and are located in sub-folders of app/components or app/shared. For example, the foo component will be app/components/foo/foo.component.ts and the .spec.ts file for that component will be in that same folder.
Note: I am NOT using Angular CLI, and at this time converting the project to use Angular CLI is not in scope.
Here are the files that seem relevant - let me know if you need to see anything else:
package.json
{
"name": "app",
"version": "1.0.1",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run generate-css\" \"npm run watch-css\" ",
"pree2e": "npm run webdriver:update",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"generate-css": "node-sass -r app --output ./generated-css",
"watch-css": "node-sass -w -r app --output ./generated-css",
"lite": "lite-server",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"author": "Me",
"dependencies": {
"@angular/animations": "4.0.2",
"@angular/common": "4.0.2",
"@angular/compiler": "4.0.2",
"@angular/compiler-cli": "4.0.2",
"@angular/core": "4.0.2",
"@angular/forms": "4.0.2",
"@angular/material": "^2.0.0-beta.3",
"@angular/http": "4.0.2",
"@angular/platform-browser": "4.0.2",
"@angular/platform-browser-dynamic": "4.0.2",
"@angular/platform-server": "4.0.2",
"@angular/router": "4.0.2",
"angular-in-memory-web-api": "0.2.4",
"angular2-ui-switch": "1.2.0",
"bootstrap": "3.3.7",
"core-js": "2.4.1",
"mydatepicker":"1.2.9",
"ng2-translate": "5.0.0",
"reflect-metadata": "0.1.9",
"rxjs": "5.0.1",
"socket.io": "1.7.2",
"lodash": "4.17.4",
"socket.io-client": "1.7.2",
"systemjs": "0.19.40",
"wijmo": "wijmo-system-min",
"zone.js": "0.8.5",
"typescript": "2.2.2"
},
"devDependencies": {
"@types/core-js": "0.9.35",
"@types/jasmine": "2.5.40",
"@types/node": "6.0.58",
"@types/selenium-webdriver": "2.53.39",
"@types/lodash": "4.14.62",
"canonical-path":"0.0.2",
"codelyzer": "0.0.25",
"concurrently": "3.1.0",
"http-server": "0.9.0",
"jasmine-core": "2.5.2",
"karma": "1.3.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-htmlfile-reporter": "0.3.4",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"lite-server": "2.2.2",
"live-server": "1.1.0",
"lodash": "4.17.4",
"node-sass": "3.13.1",
"nodemon": "1.11.0",
"protractor": "3.3.0",
"rimraf": "2.5.4",
"tslint": "3.15.1"
}
}
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "./",
"module": "commonjs",
"moduleResolution": "node",
"lib": [ "es2015", "dom" ],
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../node_modules/@types"
]
},
"exclude": [
"node_modules",
"dist",
"wijmo-system-min",
"app/shared/date-picker"
]
}
UPDATE: Eventually I bit the bullet and switched the project over to Angular CLI... it took about a week to make the conversion, but at least now everything works again. Therefore, even if someone answers this, I won't be able to verify if the fix is working or not.
