[Q&A] Using different typescript instance?

[luchillo17]

Here's the thing, i have a loader like this:

loaders: [

      /*
       * Typescript loader support for .ts and Angular 2 async routes via .async.ts
       *
       * See: https://github.com/s-panferov/awesome-typescript-loader
       */
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
        exclude: [/\.(spec|e2e)\.ts$/]
      },
]

I'm trying to implement angular2's Static Template Compiler feature in my project, according with their docs in @angular/compiler-cli the command itself is a drop-in replacement for tsc which means to run it would i have to make a loader for it to replace this one?, prepend it to this one?, or make a plugin?

[luchillo17]

I think i got it, i need to call the ngc in tsconfig-json and set it as the compiler option, but i have an issue, Ng2 projects usually have 1 main file that manages bootstrap and 1 root component that get's imported into the main file, the Ng2 feature expects that i use ngc in the root component, that generates a factory that get's imported in the main file and that one gets compiled as well, basically it's a 2 step process, how would i do that in webpack?

Here's my tsconfig.json just in case:

{
  "compilerOptions": {
    "charset": "utf8",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "pretty": true,
    "newLine": "LF",
    "sourceMap": true,
    "noEmitHelpers": true
  },
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "compiler": "ngc",
    "forkChecker": true,
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}