May 21

Written by: Michael Washington
5/21/2017 3:41 PM  RssIcon

image

Upgrading an Angular 2 JavaScriptServices project that uses PrimeNG to Angular 4+ is quite straightforward with a few gotcha’s.

image

We will start with the code from the article: Implementing PrimeNG FileUpload in a .Net Core Application that was created from the code in the article: Hello World Angular 2+ Data Sample Using JavaScriptServices .Net Core and PrimeNg.

Upgrade JavaScriptServices

image

The method we will use to upgrade the project, will be to create a new Angular 4+ project, using JavaScriptServices, and then transfer the code over from the Angular 2 project.

Create a folder on your Microsoft Windows computer (this tutorial was created using Windows 10).

Note: Do not have any special characters in the folder name. For example, and exclamation mark (!) will break the JavaScript code.

image

You can type CMD and press Enter to switch to the command line (and still be in that directory).

image

If you have not already installed JavaScriptServices, or you need to upgrade them from Angular 2 to Angular 4+, run the install by entering (and pressing Enter):

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

image

The screen will display indicating the templates now available.

This process will pull down and install the latest version of the templates on your computer.

image

Create the ASP.NET Core JavaScriptServices application by entering (and pressing Enter):

dotnet new angular

image

The application will be created.

image

If we open up the package.json file that is created…

image

We see that the Angular versions are version 4 (or higher).

Double-click on the *.csproj file to open the project in Visual Studio 2017 (or higher).

image

It will start restoring .Net dependencies and the node_modules (you can view the ../node_modules directory to see the items populated).

(Note: This can take 3-10 minutes or more)

image

Visual Studio will indicate when everything is complete.

image

Build he project.

image

If it takes longer then 1 minute to build…

image

Select File, then Close Solution.

Then try the build again

Install PrimeNG for Angular 4

image

We want to add the following lines to package.json to add PrimeNG for Angular 4 (and it’s dependency, font-awesome):

    "font-awesome": "^4.7.0",
    "primeng": "^4.0.1"

When we save the file, PrimeNG will be installed and added to the node_modules folder.

image

Open the webpack.config.vendor.js file and add:

    'font-awesome/css/font-awesome.css',
    'primeng/primeng',
    'primeng/resources/themes/omega/theme.css',
    'primeng/resources/primeng.min.css', 

image

Also, in rules/test, add:

    |gif

Save the file.

image

At this time, PrimeNg does not support pre-rendering so in ..\Views\Home\Index.cshtml, change:

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

to:

<app>Loading...</app>

Save the file.

image

We altered the webpack.config.vendor.js file (to add PrimeNg and Font Awesome) but it is not updated by the normal build process. We have to run its configuration manually whenever we alter it.

In a command prompt, at the project root, run:

webpack --config webpack.config.vendor.js

(Note: If you don’t already have the webpack tool installed (for example you get an error when you run the code above), you’ll need to run: npm install -g webpack first)

image

Open the file at Views/Shared/_Layout.cshtml and change the base href to the following:

<base href="~/" />

This will allow the Angular code to properly find the root of the application if we publish it to a location where it is not at the root of the web address (for example: http://localhost/HeloWorlData).

Note: This may already be set for you because the JavaScriptServices project will incorporate this automatically in the future.

Copy Server-side Code

In the Solution Explorer, right-click on the project node and select Manage NuGet Packages.

image

Search for and install:

  • Microsoft.EntityFrameworkCore.Tools
  • Microsoft.EntityFrameworkCore.SqlServer

(note: If they don’t install correctly, close and re-open Visual Studio and try again)

image

Create a Data folder and copy the database from the previous project (Implementing PrimeNG FileUpload in a .Net Core Application) into it.

image

Create a Models folder and copy the files from the previous project (Implementing PrimeNG FileUpload in a .Net Core Application) into it.

image

The project should Build without errors.

We can use a tool such as Beyond Compare to help determine the remaining changes we need.

image

In the Startup.cs file, add the following using statements:

 

using HelloWorldData.Models;
using Microsoft.EntityFrameworkCore;

 

Also, add the following code to the ConfigureServices section:

 

        services.AddDbContext<HelloDataContext>(
            options => options.UseSqlServer(
                Configuration.GetConnectionString("HelloWorldDataDatabase")));

 

image

Open the Controllers folder and copy all the files and folders from the previous project (Implementing PrimeNG FileUpload in a .Net Core Application) into it (overwriting any exiting ones).

image

Finally, open the appsettings.json file and add the following connection string for the database:

  "ConnectionStrings": {

"HelloWorldDataDatabase": "Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=

C:\\TEMP\\HelloWorldData\\Data\\HelloData.mdf;Integrated Security=True;"

  },

(Note: The HelloWorldDataDatabase value needs to be on a single line – see the source code for the exact setting)

(Note: Change the connection string to point to the actual location of the .mdf file on your computer)

image

The project should Build without errors.

Copy Angular Code

image

Open the ClientApp/App/components folder and copy all the files and folders from the previous project (Implementing PrimeNG FileUpload in a .Net Core Application) into it (overwriting any exiting ones).

Fix Angular 2 to Angular 4 Code Issues

image

Open boot-client.ts and add the following line:

import "core-js/client/shim";

This adds support for IE 11 to fix errors like “Unable to get property 'apply' of undefined or null reference” (see: https://github.com/aspnet/JavaScriptServices/pull/952).

image

Angular services (classes decorated with @Injectable()) now need to be registered in the app.module.client.ts and app.module.server.ts files.

(However, Mark Pieszak notes: "The shared file should actually be an NgModule itself that's imported into both client and server NgModules, that will fix that issue…You'll have to register them in both app.module.client & app.module.server.")

Make the changes according to the image above.

image

All other Angular components and modules need to be registered in the app.module.shared.ts file.

Make the changes according to the image above.

image

In Angular 4, the template tag was changed to ng-template.

Open the files at: ClientApp\app\components\upload\files.component.html and make all the changes according to the image above.

image

In Angular 4 certain code, like the code above, that worked fine in Angular 2 will no longer work.

In Angular 4this.fileList” cannot be assigned inside the for loop that is inside the subscribe method that is inside the getFiles method.

image

To resolve this, we alter the code, to the image above, where we create a local variable inside the getFiles method and then use its value to assign to “this.fileList”.

Links

Angular 2-4

Hello World Angular 2+ Data Sample Using JavaScriptServices .Net Core and PrimeNg

Implementing PrimeNG FileUpload in a .Net Core Application 

Visual Studio 2017

Node.js

Publishing and Running ASP.NET Core Applications with IIS

Beyond Compare

Download

The project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

You must have Visual Studio 2017 (or higher) installed to run the code.

Note: You will need to alter the appsettings.json file to point to the exact location of the .mdf file on your computer (depending on where you unzip the project to), and build the project before trying to run it.

2 comment(s) so far...


Gravatar

Re: Upgrading JavaScriptServices and PrimeNG From Angular 2 to Angular 4+

nice

By johnstany on   5/23/2017 4:12 AM
Gravatar

Re: Upgrading JavaScriptServices and PrimeNG From Angular 2 to Angular 4+

This is Brilliant. Thanks you so much. I am sincerely grateful.

By Pete on   6/5/2017 9:59 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation