how can I convert angular 2 app.module into es6

Question

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//purposefully removed some imports

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AddonsModule,
    PageBodyModule,
    NgbModule.forRoot(),
    OwlModule,
    AgmCoreModule.forRoot({
      apiKey: ''
    }),
    NouisliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How can I convert this code written Angular 2 in TypeScript into ES6? I only want to convert this @NgModule ({...}) "app.module.ts" part into ES6. Since I have an Angular 2 project which I need to convert into ES6. Up to now I only came up with this issue.

Answer 1

In tsconfig.json change the module value from whatever it is at the moment to es6 . When TypeScript transpiles the TS file it will do it in ES6.

If you need to drop TypeScript support and rely on pure JavaScript, you can use the transpiled code for your further work.

Update

If you want to generate ES6 code, it is target that you need to set, not the module . module deals with the loader. An example of transpiled code that you can reuse and update would be something like this:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRouteModule } from './app.router';
import { AppComponent } from './app.component';
import { Tab1Component } from './tab1/tab1.component';
import { Tab2Component } from './tab2/tab2.component';
let AppModule = class AppModule {
};
AppModule = __decorate([
    NgModule({
        declarations: [
            AppComponent,
            Tab1Component,
            Tab2Component
    ],
    imports: [
        BrowserModule,
        RouterModule,
        AppRouteModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
], AppModule);
export { AppModule };
//# sourceMappingURL=app.module.js.map

in tsconfig.json set target: "es2015" , you can also set module to the same value.