Search This Blog

Tuesday, 17 October 2017

03 - .net core minimal ASP.Net core - Angular 4 ,WebPack 2, JIT and AOT


Hi,

Continuing our project we are going to add the Angular 4 and web pack configuration.

I'm using the example for the angular oficial site https://angular.io/guide/webpack .
If you want know more about webpack have a look in the oficial site https://webpack.js.org/ , basically webpack is a module bundler , webpack generate one unique bundle for your scripts a bundle could include javascript, html, css and etc. In the next part I'm going to do a brief explanation about the files and functions.

Angular 4 JIT (Just in time)

package.json
it has every library required to run the application, using the command npm  install the node pack management will do download for the libraries into your local folder node_modules

src/tsconfig.json
typeScript Configuration

src/polyfills.ts
it says for angular what kind of legacy browser or application will be using, read more in https://angular.io/guide/browser-support

src/vendor.ts
bundle configuration for vendor

webpack.config.js
default file to startup webpack configuration

config/webpack.common.js
webpack common configuration

config/webpack.dev.js
webpack developer or debug configuration

config/webpack.prod.js
webpack production configuration

config/helpers.js
it has file map configuration

Continuing .net project it is require few modification to run the webpack .

We need to add in our aarvanilanAngular4.csproj one new library

<PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="1.1.0" />

and then a new configuration in the startup.cs
doing this we may could run the project and see hello with webpack


Source code git https://github.com/americoa/DotNetAngular4WebPack2/tree/second-step fell free to share.

Thursday, 17 August 2017

02 - .net core minimal ASP.Net core - Angular 4 ,WebPack 2, JIT and AOT

Hi guys,

So continuing our project we are going start  with modification in.net project to run as static files and then start the configuration for webpack and introduction for Angular 4 .

It is necessary to do only few modifications to be able to run ASP .net core project using static pages.

 Add reference for the library to use static files at the project .csproj .

<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" />

and then modify Configure method in startup.cs allow the run time to use StaticFiles also to the webserver identify the standard default file.



https://github.com/americoa/DotNetAngular4WebPack2/tree/second-step

Thursday, 13 July 2017

01- .net core minimal ASP.Net core - Angular 4 ,WebPack 2, JIT and AOT

Hello , Everybody

We are going enjoy together  a new way to developer using .net core without MVC , the idea is do not add some many features which we will not use also I will startup one first page in angular 4 and show the differences between JIT and AOT angular cli compiler.

So lets start.

Check if you have the latest SDK dotnet installed in your machine.
https://www.microsoft.com/net/download/core

Open your prompt or terminal and do the command

Command to check the dotnet version
 dotnet --version 

I'm using 1.0.1

Command to create a folder
 mkdir  aarvanilabAngular4 
Command to go the folder
 cd arvanilabAngular4 
Command to create a new project using a blank web project
 dotnet new web
Command to get the libraries in nuget or npm
 dotnet restore 
Command to run the project 
 dotnet run 

Doing this we could be able to navigate in our new page in the navigator http://localhost:5000 , our hello world page.




Once we have the blank project created in the folder, we could start open our project in VS code or another code editor. 

https://github.com/americoa/DotNetAngular4WebPack2/tree/first-step








Translate