004 CREATING PROJECTS TO START DEVELOPMENT for (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki

Organizing folders

Solution

The web application that we are going to create will consist of two main parts:

Modeling Time Structures and Build Time Structures

Organizing folders

This presentation explains how to create projects for the client and server sides.

  • Let's start by organizing folders:
    • Suppose, the root folder name for all projects will be E:\Development\PhonebookSolution

Solution

  • run Command Prompt and make E:\Development\PhonebookSolution folder active
C:\>e:
e:\>cd E:\Development\PhonebookSolution
E:\Development\PhonebookSolution>
  • create solution
dotnet new sln -n PhonebookSolution

Server side

Entity Framework project

dotnet new classlib -o PhBkEntity
dotnet sln PhonebookSolution.sln add PhBkEntity/PhBkEntity.csproj --solution-folder Server
dotnet add PhBkEntity/PhBkEntity.csproj package Microsoft.EntityFrameworkCore

DbContext project

dotnet new classlib -o PhBkContext
dotnet sln PhonebookSolution.sln add PhBkContext/PhBkContext.csproj --solution-folder Server
dotnet add PhBkContext/PhBkContext.csproj package Microsoft.EntityFrameworkCore
dotnet add PhBkContext/PhBkContext.csproj package Microsoft.EntityFrameworkCore.SqlServer
dotnet add PhBkContext/PhBkContext.csproj package Microsoft.AspNetCore.Identity.EntityFrameworkCore
dotnet add PhBkContext/PhBkContext.csproj reference PhBkEntity/PhBkEntity.csproj

Views or Dto project

dotnet new classlib -o PhBkViews
dotnet sln PhonebookSolution.sln add PhBkViews/PhBkViews.csproj --solution-folder Server

Controllers project

dotnet new classlib -o PhBkControllers
dotnet sln PhonebookSolution.sln add PhBkControllers/PhBkControllers.csproj --solution-folder Server
dotnet add PhBkControllers/PhBkControllers.csproj package Microsoft.EntityFrameworkCore
dotnet add PhBkControllers/PhBkControllers.csproj package LinqKit.Microsoft.EntityFrameworkCore
dotnet add PhBkControllers/PhBkControllers.csproj reference PhBkEntity/PhBkEntity.csproj
dotnet add PhBkControllers/PhBkControllers.csproj reference PhBkContext/PhBkContext.csproj
dotnet add PhBkControllers/PhBkControllers.csproj reference PhBkViews/PhBkViews.csproj

With any text editor open PhBkControllers.csproj and modify <ItemGroup>...<\ItemGroup> as it shown below:

  <ItemGroup>
    ...
    <FrameworkReference Include="Microsoft.AspNetCore.App" />
    ...
  </ItemGroup>

WebApi project

dotnet new webapi -o PhBkWebApp -minimal false
dotnet sln PhonebookSolution.sln add PhBkWebApp/PhBkWebApp.csproj --solution-folder Server
dotnet add PhBkWebApp/PhBkWebApp.csproj package LinqKit.Microsoft.EntityFrameworkCore
dotnet add PhBkWebApp/PhBkWebApp.csproj package Microsoft.AspNetCore.Authentication.JwtBearer
dotnet add PhBkWebApp/PhBkWebApp.csproj package Microsoft.AspNetCore.Identity.EntityFrameworkCore
dotnet add PhBkWebApp/PhBkWebApp.csproj reference PhBkContext/PhBkContext.csproj
dotnet add PhBkWebApp/PhBkWebApp.csproj reference PhBkViews/PhBkViews.csproj
dotnet add PhBkWebApp/PhBkWebApp.csproj reference PhBkControllers/PhBkControllers.csproj

Run Visual Studio 2022

Remove Class1 files
  • In the following projects remove the file Class1.cs:
    • PhBkEntity
    • PhBkContext
    • PhBkViews
    • PhBkControllers
Remove WeatherForecastController
  • In the following project remove the file WeatherForecastController.cs:
    • PhBkWebApp
Remove WeatherForecast
  • In the following project remove the file WeatherForecast.cs:
    • PhBkWebApp

Solution structure

Add PhBk and Auth folders
  • In the following projects add PhBk and Auth folders
    • PhBkEntity
    • PhBkContext
    • PhBkViews

Solution structure

Client side

ANGULAR MATERIAL and MATERIAL DESIGN ICONS

flex layout

localize package

Creating Angular project for Monolithic App

  • run Command Prompt and make E:\Development\PhonebookSolution folder active
C:\>e:
e:\>cd E:\Development\PhonebookSolution
E:\Development\PhonebookSolution>
  • run ng new AngularPhonebook --standalone false command:
E:\Development\PhonebookSolution>ng new AngularPhonebook --standalone false
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
  • run the command:
E:\Development\PhonebookSolution>cd AngularPhonebook
E:\Development\PhonebookSolution\AngularPhonebook>
  • run ng add @angular/material command:
E:\Development\PhonebookSolution\AngularPhonebook>ng add @angular/material
i Using package manager: npm
√ Found compatible package version: @angular/[email protected].
√ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
  • run npm i -s @angular/flex-layout @angular/cdk command (for Angular 15 and earlier):
E:\Development\PhonebookSolution\AngularPhonebook>npm i -s @angular/flex-layout @angular/cdk
  • run npm i -s ngx-flexible-layout @angular/cdk command (for Angular 16 and later):
E:\Development\PhonebookSolution\AngularPhonebook>npm i -s ngx-flexible-layout @angular/cdk
  • run ng add @angular/localize command:
E:\Development\PhonebookSolution\AngularPhonebook>ng add @angular/localize
i Using package manager: npm
√ Found compatible package version: @angular/[email protected].
√ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes

Creating Angular project for Micro frontend App

  • run Command Prompt and make E:\Development\PhonebookSolution folder active
C:\>e:
e:\>cd E:\Development\PhonebookSolution
E:\Development\PhonebookSolution>
  • run the command:
ng new AngularMatPhonebookSolution --no-create-application
  • here is a response
E:\Development\PhonebookSolution>ng new AngularMatPhonebookSolution --no-create-application
CREATE AngularMatPhonebookSolution/angular.json (139 bytes)
CREATE AngularMatPhonebookSolution/package.json (1013 bytes)
CREATE AngularMatPhonebookSolution/README.md (1081 bytes)
CREATE AngularMatPhonebookSolution/tsconfig.json (863 bytes)
CREATE AngularMatPhonebookSolution/.editorconfig (274 bytes)
CREATE AngularMatPhonebookSolution/.gitignore (548 bytes)
CREATE AngularMatPhonebookSolution/.vscode/extensions.json (130 bytes)
CREATE AngularMatPhonebookSolution/.vscode/launch.json (474 bytes)
CREATE AngularMatPhonebookSolution/.vscode/tasks.json (938 bytes)
√ Packages installed successfully.
  • run the command:
E:\Development\PhonebookSolution>cd AngularMatPhonebookSolution
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>
  • for angular 19 run
npm install @angular/animations
npm isntall @angular/platform-browser
  • run ng add @angular/material command:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>ng add @angular/material
i Using package manager: npm
√ Found compatible package version: @angular/[email protected].
√ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview:
https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1079 bytes)
√ Packages installed successfully.
Project name is required.
  • run npm i -s @angular/flex-layout @angular/cdk command (for Angular 14 and earlier):
E:\Development\PhonebookSolution\AngularPhonebook>npm i -s @angular/flex-layout @angular/cdk
  • run npm i -s ngx-flexible-layout@?? @angular/cdk command (for Angular 15 and later):
  • run npm i -s ngx-flexible-layout@15 @angular/cdk command (for Angular 15)
  • run npm i -s ngx-flexible-layout@16 @angular/cdk command (for Angular 16)
  • run npm i -s ngx-flexible-layout@17 @angular/cdk command (for Angular 17)
  • run npm i -s ngx-flexible-layout@18 @angular/cdk command (for Angular 18)
  • run npm i -s ngx-flexible-layout @angular/cdk command (for Angular 19)
E:\Development\PhonebookSolution\AngularPhonebook>npm i -s ngx-flexible-layout @angular/cdk
  • run ng add @angular/localize command:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>ng add @angular/localize
i Using package manager: npm
√ Found compatible package version: @angular/[email protected].
√ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
Option "project" is required.

  • Note:

    • localize and material commands require App project. So, we need to repeat these commands for each Angular App created under the solution. We do not need to run commands for Angular Libraries.

  • Create Angular App project with a command ng generate application AngularPhonebook

    • Here is a response:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>ng generate application AngularPhonebook
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE projects/angular-phonebook/.browserslistrc (600 bytes)
CREATE projects/angular-phonebook/karma.conf.js (1438 bytes)
CREATE projects/angular-phonebook/tsconfig.app.json (295 bytes)
CREATE projects/angular-phonebook/tsconfig.spec.json (341 bytes)
CREATE projects/angular-phonebook/src/favicon.ico (948 bytes)
CREATE projects/angular-phonebook/src/index.html (302 bytes)
CREATE projects/angular-phonebook/src/main.ts (372 bytes)
CREATE projects/angular-phonebook/src/polyfills.ts (2338 bytes)
CREATE projects/angular-phonebook/src/styles.css (80 bytes)
CREATE projects/angular-phonebook/src/test.ts (749 bytes)
CREATE projects/angular-phonebook/src/assets/.gitkeep (0 bytes)
CREATE projects/angular-phonebook/src/environments/environment.prod.ts (51 bytes)
CREATE projects/angular-phonebook/src/environments/environment.ts (658 bytes)
CREATE projects/angular-phonebook/src/app/app-routing.module.ts (245 bytes)
CREATE projects/angular-phonebook/src/app/app.module.ts (393 bytes)
CREATE projects/angular-phonebook/src/app/app.component.html (23115 bytes)
CREATE projects/angular-phonebook/src/app/app.component.spec.ts (1103 bytes)
CREATE projects/angular-phonebook/src/app/app.component.ts (220 bytes)
CREATE projects/angular-phonebook/src/app/app.component.css (0 bytes)
UPDATE angular.json (3458 bytes)
UPDATE package.json (1211 bytes)
√ Packages installed successfully.
  • Instead of the command ng add @angular/localize --project=AngularPhonebook we need to modify polyfills.ts by adding a line to the end of the file:
import '@angular/localize/init';
  • we need to run the commands:
ng add @angular/material --project=AngularPhonebook
  • here is a response:
E:\Development\PhonebookSolution\AngularMatPhonebookSolution>ng add @angular/material --project=AngularPhonebook
Skipping installation: Package already installed
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview:
https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1210 bytes)
√ Packages installed successfully.
UPDATE projects/angular-phonebook/src/app/app.module.ts (502 bytes)
UPDATE angular.json (3622 bytes)
UPDATE projects/angular-phonebook/src/index.html (584 bytes)
UPDATE projects/angular-phonebook/src/styles.css (181 bytes)

Add angular Monolithic App project to the solution

  • Run Visual Studio 2022 and open PhonebookSolution
  • Add Client solution folder
  • right click Client-folder and choose Add/Existing Web Site-menu item

Solution structure

  • In Add existing Web site-dialog choose E:\Development\PhonebookSolution\AngularPhonebook\src-folder
    • DO NOT choose E:\Development\PhonebookSolution\AngularPhonebook-folder
  • the result is shown in the picture below

Solution structure

Add angular Micro frontend App project to the solution

  • Run Visual Studio 2022 and open PhonebookSolution
  • Add Client solution folder
  • right click Client-folder and choose Add/Existing Web Site-menu item
  • In Add existing Web site-dialog choose E:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects-folder
  • the result is shown in the picture below

Solution structure

Modeling Time Structures and Build Time Structures

  • Entity Framework DB Contexts and Entities are used as a modeling tools. And structures during modeling may differ from structures that will be used during assembly. As a result, we need a way with which we can quickly switch all projects from simulation mode to build mode and vice versa. In case of only one project we can use #define-keywords for conditional compiling. But in case of many projects it's not so convenient. Read the articles Customize your build and docker container does not seem to find the directory.build.props and Solution-wide #define
  • With any editor we create the Directory.Build.props-file with the following content.
<Project>
    <PropertyGroup>
        <DefineConstants>NOTMODELING</DefineConstants>
    </PropertyGroup>
</Project>
  • We save Directory.Build.props-file in the E:\Development\PhonebookSolution-folder.
  • As a result, we can write code like below
#if (!NOTMODELING)
// any valid code here that will be ignored at compile and run time 
#endif
⚠️ **GitHub.com Fallback** ⚠️