Angular CLI New Project and Component

  1. Creating New Project Options:

1

Details Here

2. If you see the project did not created the templete as seperate html file, open angular.json file and setup these 2 line to false like this:

“schematics”: {
“@schematics/angular:component”: {
“inlineTemplate”: false,
“inlineStyle”: false
3. cd to inside the project.

 

4. Adding New Component:

ng g c test2

 

3 layer architecture of Angular Project

Layer 1: WebUI (Angular)

https://monirblog.wordpress.com/2018/08/29/setup-angular-2-environment-in-a-new-computer/ 

Layer 2: ASP.NET Web API Service

https://monirblog.wordpress.com/2018/09/11/asp-net-web-api-service/

Video: https://www.youtube.com/watch?v=FQ__z26TsHU

Layer 3: Data Access Layer

https://monirblog.wordpress.com/2018/09/11/data-access-layer/

Deploy angular Cli app to IIS

If not installed, install urlrewrite for IIS from here: https://www.iis.net/downloads/microsoft/url-rewrite

You may need to reboot your computer.

step 1: Build angular application

Option 1: If you want to deploy the application in root folder,

ng build –prod

double infront of prod

Option 2: If you want to deploy the application inside a folder:

ng build –prod –base-href /FOLDERNAME/

double infront of prod and base-href

Either option will create a dist folder inside your angular application

 

Step 2: Create a folder(FOLDERNAME) in your c drive (or anywhere) and copy all content from dist folder to this newly created folder FOLDERNAME.

step 3: Setup new application in IISMANAGER

a1a2

Angular Cli base href

To change base href from root folder to a subfolder:

 

  1. In root level index.html change
    <base href=”/MFGlist/”>
  2. Run the project using this command:

ng serve -o –base-href /MFGlist/