May 21

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

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

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

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.

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

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::*

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.

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

dotnet new angular

The application will be created.

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

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).

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)

Visual Studio will indicate when everything is complete.

Build he project.

If it takes longer then 1 minute to build…

Select File, then Close Solution.

Then try the build again

Install PrimeNG for Angular 4

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.

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

Also, in rules/test, add:

    |gif

Save the file.

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.

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)

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.

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)

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

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

The project should Build without errors.

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

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")));

 

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).

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)

The project should Build without errors.

Copy Angular Code

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

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).

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.

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.

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.

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

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

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.