Why babel does not transform my classes?
Syntax error main.js (24,25)
IMAGE: IE11 transformed main.js file
Maybe my configuration is not right?
I try to add support of IE 11 by my app, but babel not work correctly. I had also added polyfills.ts from angular.io documentation to support IE.
Here I'll show you my .babelrc, webpack.config.js package.json, tsconfig.json.
.babelrc
{
"presets": [
/*[
"env",
{
"uglify":true,
"targets":[
"> 4%",
"ie >= 10",
"safari >= 8"
]
}
]//It gives the same result*/
"es2015", "angular2", "stage-0"
],
"plugins": [
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties",
"transform-es2015-classes",
"babel-plugin-transform-object-rest-spread",
"syntax-object-rest-spread",
"transform-class-constructor-call",
"syntax-class-constructor-call"
]
}`
webpack.config.js
module.exports = (env = {isProd: false}) => {
const config = {
context: srcDir,
entry: {
polyfills: './polyfills.ts',
vendor: './vendor.ts',
main: './main.ts',
styles: './styles.scss'
},
...
resolve: {
extensions: ['.js', '.ts'],
modules: ['node_modules']
},
module: {
loaders: [
],
rules: [
{
test: [/\.js$/],
include: [
path.resolve(__dirname,'src/')
],
exclude: [
/node_modules\/(?!cb-frontend\/).*!/
],
use: {
loader: 'babel-loader'
}
},
{
test: /\.ts$/,
include: [srcDir],
use: env.isProd ? '@ngtools/webpack' : [
{
loader: 'awesome-typescript-loader',
options: {configFileName: 'tsconfig.json'
}
}, 'angular2-template-loader'
]
},
.....
},
plugins: [
....
new webpack.optimize.CommonsChunkPlugin({
name: ['main', 'vendor', 'polyfills']
}),
....
new HtmlPlugin({
template: './index.html'
}),
....
],
....}
package.json
"dependencies": {
"@angular/animations": "5.1.0",
"@angular/cdk": "5.0.1",
"@angular/common": "5.1.0",
"@angular/compiler": "5.1.0",
"@angular/core": "5.1.0",
"@angular/forms": "5.1.0",
"@angular/http": "5.1.0",
"@angular/material": "5.0.1",
"@angular/platform-browser": "5.1.0",
"@angular/platform-browser-dynamic": "5.1.0",
"@angular/platform-server": "5.1.0",
"@angular/router": "5.1.0",
"angular-2-dropdown-multiselect": "1.5.4",
"bootstrap": "4.0.0-alpha.6",
"classlist.js": "1.1.20150312",
"es6-promise": "^4.2.2",
"es6-shim": "^0.35.3",
"gulp": "3.9.1",
"hammerjs": "2.0.8",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"ng2-select2": "1.0.0-beta.10",
"ngx-clipboard": "9.0.0",
"ngx-mydatepicker": "2.1.0",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.5",
"select2": "4.0.5",
"sonarqube-scanner": "2.0.2",
"systemjs": "0.19.39",
"zone.js": "0.8.18"
},
"devDependencies": {
"@angular/compiler-cli": "5.1.0",
"@ngtools/webpack": "1.9.0",
"@types/angular-resource": "1.5.6",
"@types/angular-route": "1.3.2",
"@types/angular-sanitize": "1.3.3",
"@types/jasmine": "2.5.36",
"@types/node": "7.0.31",
"angular2-template-loader": "0.6.2",
"autoprefixer": "7.1.1",
"awesome-typescript-loader": "3.1.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-object-rest-spread": "^6.3.13",
"babel-plugin-transform-class-properties": "^6.0.2",
"babel-plugin-transform-es2015-classes": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.14.0",
"babel-plugin-transform-es2015-template-literals": "^6.3.13",
"babel-plugin-transform-flow-strip-types": "^6.4.0",
"babel-plugin-transform-object-assign": "^6.3.13",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-class-constructor-call": "^6.0.2",
"babel-plugin-syntax-class-constructor-call": "^6.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-angular2": "^0.0.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-native-modules": "^6.9.4",
"babel-preset-es2015-rollup": "1.2.0",
"babel-preset-stage-0": "^6.0.15",
"babel-register": "^6.26.0",
"concurrently": "3.0.0",
"codelyzer": "3.0.1",
"copy-webpack-plugin": "4.0.1",
"core-js": "2.5.1",
"css-loader": "0.28.7",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"html-webpack-plugin": "2.30.1",
"intl": "1.2.5",
"jasmine-core": "2.6.3",
"karma": "1.7.0",
"karma-chrome-launcher": "2.1.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-firefox-launcher": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"node-sass": "4.6.1",
"postcss-loader": "2.0.6",
"raw-loader": "0.5.1",
"sass-loader": "6.0.6",
"style-loader": "0.19.0",
"stylelint": "7.11.1",
"stylelint-config-standard": "16.0.0",
"tslint": "5.4.3",
"typedoc": "0.7.1",
"typescript": "2.5.3",
"uglifyjs-webpack-plugin": "1.0.1",
"web-animations-js": "2.3.1",
"webpack": "^3.8.1",
"webpack-chunk-hash": "^0.4.0",
"webpack-dev-server": "2.9.4",
"webpack-merge": "3.0.0"
}
}
tsconfig.json
{
"compilerOptions": {
"alwaysStrict": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": false,
"sourceMap": true,
"skipLibCheck": true,
"strictNullChecks": true,
"target": "es5",
"typeRoots": [
"./node_modules/@types"
],
"lib": ["es2015", "dom"] /* , "es2015.promise"*/
},
"exclude": [
"node_modules"
],
"angularCompilerOptions": {
"genDir": ".",
"entryModule": "./src/app/app.module#AppModule",
"skipMetadataEmit": true
}
}
--- UPDATE ---
Package.json: devDependencies
{
...
"@angular/compiler-cli": "5.1.0",
"@ngtools/webpack": "1.9.0",
"@types/angular-resource": "1.5.6",
"@types/angular-route": "1.3.2",
"@types/angular-sanitize": "1.3.3",
"@types/jasmine": "2.5.36",
"@types/keycloak-js": "2.5.4",
"@types/node": "7.0.31",
"angular2-template-loader": "0.6.2",
"autoprefixer": "7.1.1",
"awesome-typescript-loader": "3.1.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-register": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-angular2": "^0.0.2",
"babel-plugin-transform-runtime": "^6.23.0",
"uglifyjs-webpack-plugin": "1.0.1",
"web-animations-js": "2.3.1",
...
}