Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

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

Closed

Description

@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

Activity

  1. SteveSandersonMS commented on Apr 11, 2017

    @SteveSandersonMS
    Member

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions