Using new Babel 7 and preset-typescript to compile Angular 6 app

Basic example of @babel/preset-typescript usage

npm initnpm install @babel/core @babel/preset-typescript @babel/preset-env
babel testInput.ts --out-file testOutput.js --presets @babel/preset-typescript
babel testInput.ts --out-file testOutput.js --presets @babel/preset-env,@babel/preset-typescript

If we have TypeScript, why not Angular?

project directory
⌞ dist
⌞ index.html
⌞ output.js
⌞ src
⌞ app
⌞ app.component.ts
⌞ app.module.ts
⌞ index.ts
⌞ .babelrc
⌞ package.json
⌞ webpack.config.js
# Babel-related packages
npm install @babel/core @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
# Webpack-related packages
npm install webpack webpack-dev-server babel-loader
# Angular packages
npm install @angular/core @angular/common @angular/compiler @angular/platform-browser-dynamic
# Polyfills for angular
npm install core-js zone.js
npx webpack-dev-server --mode development --content-base=./dist/

Wrapping up



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store