VS 2017 + ASP.NET + Angular 2

[rgisParticipant]

Hello JQX-team

Could you help me to start

I am using VS 2017, ASP.NET Core, Angular 2
it works fine.
I installed “npm i jqwidgets-framework”
and added “jqxButtonComponent”

app.module.ts

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';

import { jqxButtonComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxbuttons';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        jqxButtonComponent,

        HomeComponent
    ],
    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 {
}

index.html

@{
    ViewData["Title"] = "Home Page";
}

<link rel="stylesheet" href="~/Styles/jqx.base.css" type="text/css" />

@*<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>*@
<app>Loading...</app>

<script src="~/JQX/jquery-1.11.1.min.js"></script>
<script src="~/JQX/jqxcore.js"></script>
<script src="~/JQX/jqxbuttons.js"></script>
<script src="~/JQX/demos.js"></script>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

and I got error

ERROR in ./~/jqwidgets-framework/jqwidgets-ts/angular_jqxbuttons.ts
Module parse failed: C:\Users\gdovgani\AN2\mytest2\node_modules\jqwidgets-framework\jqwidgets-ts\angular_jqxbuttons.ts Unexpected token (8:8)
You may need an appropriate loader to handle this file type.
| /// <reference path=”jqwidgets.d.ts” />
| import { Component, Input, Output, EventEmitter, ElementRef, forwardRef, OnChanges, SimpleChanges } from ‘@angular/core’;
| declare let $: any;
|
| @Component({
@ ./ClientApp/app/app.module.ts 17:27-89
@ ./ClientApp/boot-client.ts
@ multi event-source-polyfill webpack-hot-middleware/client?path=%2F__webpack_hmr ./ClientApp/boot-client.ts

Thank you

[Ivo ZhulevParticipant]

HI rgis,

This is caused probably because you are missing some package.
Have you done the same configuration as said in out documentation:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angular2/angular2-webpack.htm

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[cflowersParticipant]

rgis Did you solve this?

[cflowersParticipant]

check your webpack.config.js. This is working for me –
module: {
loaders: [
{ test: /\.ts$/, loader: ‘ts’, query: { silent: true } },
…

[rgisParticipant]

I could not make it work.

Here is my test project:

Here is my webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: [ 'awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot-client.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot-server.ts' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ],
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

Thank you

[rgisParticipant]

Forum link does not work.

Here is link to ty test project:
“https://1drv.ms/u/s!Ak3PPyEXKEwJhziqD7rndWvUUX9b”

[rgisParticipant]

Thank you
It works now.
For somebody else in the future.

My changes:

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

==>

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

[chris.oneslager@gmail.comParticipant]

I am having a similar problem, but with the updated version of template that came out with core 2. Core 2 has an updated webpack with treeskakable, etc as well as the app.module is split out between server, browser, and shared.

I’m trying to find the right combination to work. Any help appreciated.

[Ivo ZhulevParticipant]

Hi Chris,

Please share a simple project with the most basic configuration.

Regards,
Ivo

[Author]

Posts