You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
Repository navigation
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
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 {
}
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:
... 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.
Activity
SteveSandersonMS commentedon Apr 11, 2017
The
json2typescriptpackage is highly unusual in that it exports TypeScript files rather than precompiled.jsfiles like basically every other NPM package.To use this, you'll need to amend your Webpack config so that
awesome-typescript-loaderis used to build all.tsfiles, not just those in/ClientApp. On this line:... simply remove the
include: /ClientApp/,part. Thenawesome-typescript-loaderwill build the.tsfiles in thejson2typescriptpackage as well as in your/ClientAppdir.