Category Archives

3 Articles
Update Asp net core 2 Angular SPA template to work with Angular 5

Update Asp net core 2 Angular SPA template to work with Angular 5

The source code of this project is added into GitHub, you can download, clone or submit your changes to this repository.
Link to GitHub repository
https://github.com/shibut12/ng5-netcore

The project is added to Travis CI to auto build.
Tavis ci build status

My system configuration

  • @angular/cli: version 1.5.5
  • Node: Version 6.11.0
  • npm: Version 3.10.10
  • dotnet: Version 2.0.2

First things first

Before you begin creating a project and updating, let’s look into preparing the environment before we create the project. Run following commands in Command Prompt or shell.

mkdir ng-netcore
cd ng5-netcore
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
npm install -g npm-check-updates

Read More

Dotnet core 2 Angular 5 : Error “app.browser.module.ngfactory” while publishing

Dotnet core 2 Angular 5 : Error “app.browser.module.ngfactory” while publishing

This article talks about ” Can’t resolve ‘./../$$_gendir/ClientApp/app/app.browser.module.ngfactory'” error while publishing a dot net core 3, angular 5 application created from SPA template and how to fix it.
When I was building my aspnet core web applciation, I got following errors in my Gitlab CI pipeline, in this article, we will try to resolve them.

  • Module not found : error : Can’t resolve ‘./../$$_gendir/ClientApp/app/app.browser.module.ngfactory’
  • error MSB3073: The command “node node_modules/webpack/bin/webpack.js –env.prod” exited with code 2.

My setup

@angular/cli - Version 1.5.5
Node: Version 8.2.1
npm: Version 5.5.1
dotnet code: Version 2.1.1-preview-007165

Step 1: Create a new Dotnet core 2 Angular application from SPA

Run following commands in a shell

mkdir ng5-app
cd ng5-app
dotnet new angular
npm install

Step 2. Verify the angular version and upgrade to angular 5

At the command prompt, run following command to install a utility to check outdated packages (Note: to run these commands, you should have npm installrun as explained in step 1).
Read More

Use Material 2 with Dotnet core 2 Angular 4 spa template

Use Material 2 with Dotnet core 2 Angular 4 spa template

With Dotnet core 2, Microsoft included new Single-Page-Application (SPA) templates for client-side javascript frameworks like Angular, React etc.. In this blog post, I’m going over the steps that require integrating Angular Material 2 into the Angular 4 web application created using dot net core 2.0 angular spa template.

TypeScript

The web applications that created from Dotnet core spa templates (anglar, react etc..) contain a folder called “ClientApp”. This folder holds all the javascript framework components. These applications use TypeScript by default.

Webpack

Webpack is a module bundler, it takes modules with dependencies and generates static assets representing those modules. Read more about Webpack in this link

The SPAs now support webpack module bundler right out of the box. Web pack runs as part of the build and it does minifications of Javascript and css files as well.
In dotnet core spa template, webpack.config.vendor.js defines all the modules that are relevant to the application. You can add your own css/javascript files to this configuration file. We will use this file to include material javascript components and material theme files. The webpack.config.js file defines all the rules for bundling file, you can add your own rule here as well.
Read More