"Module parse failed" by just adding new npm package on Angular template

[rpedretti]

I created a project form scratch using the Angular yo generator and added a library using

npm install --save json2typescript

and tried building using both webpack --config .\webpack.config.vendor.js followed by webpack and dotnet msbuild /t:RunWebpack and both return the following error:

      Module parse failed: C:\Users\rpedretti\Documents\Visual Studio Code\Angular2\NetCore
\node_modules\json2typescript\src\json2typescript\json-convert.ts Unexpected token (8:7)
      You may need an appropriate loader to handle this file type.
      |  * @see https://www.npmjs.com/package/json2typescript full documentation
      |  */
      | export abstract class JsonConvert {
      |
      |     /**
       @ ./~/json2typescript/index.ts 1:0-51
       @ ./ClientApp/app/services/baseService.js
       @ ./ClientApp/app/services/productService.js
       @ ./ClientApp/app/app.module.js
       @ ./ClientApp/boot-client.ts

I observed that running webpack --config .\webpack.config.vendor.js is ok, th problem is when i run just webpack.

baseService.ts

import { JsonConvert } from 'json2typescript';
import { Http, Response } from '@angular/http';

export class BaseService {
    protected parseArrayData<T>(res: Response, ctor: {new(): T}): T[] {
        const body = res.json();
        let instanceArray: T[] = [];
        if (body != null) {
            instanceArray = JsonConvert.deserializeArray(body, ctor);
        }
        return instanceArray;
    }

    protected parseObjectData<T>(res: Response, ctor: {new(): T}): T {
        const body = res.json();
        let instance: T;
        if (body != null) {
            instance = JsonConvert.deserializeObject(body, ctor);
        }
        return instance;
    }
}

app.module.ts

import { ProductService } from './services/productService';
import { AccountService } from './services/accountService';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    providers: [
        AccountService,
        ProductService
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

Node version: 6.10.1
awesome-typescript-loader version: 3.1.2

[SteveSandersonMS]

The json2typescript package is highly unusual in that it exports TypeScript files rather than precompiled .js files like basically every other NPM package.

To use this, you'll need to amend your Webpack config so that awesome-typescript-loader is used to build all .ts files, not just those in /ClientApp. On this line:

{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },

... simply remove the include: /ClientApp/, part. Then awesome-typescript-loader will build the .ts files in the json2typescript package as well as in your /ClientApp dir.