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

New Issue

fergalmoran · 2025-08-09T17:17:54Z

fergalmoran commented

2025-08-09 17:17:54 +00:00

Originally created by @rpedretti on 4/7/2017

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

*Originally created by @rpedretti on 4/7/2017* 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: ``` ERROR in ./~/json2typescript/src/json2typescript/json-convert.ts 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

fergalmoran closed this issue

2025-08-09 17:17:54 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#848