2: add public and protected module, login and register components and add comments in code

Author: TommiCodes

README.md

@@ -1,7 +1,21 @@
 # angular-material-login-and-register-example
 
-# Most important Steps for setting up the project
+## How to run
+First run `npm i` and then `ng serve`, then you can open localhost:4200 in your Browser
 
-<!-- Let the Angular CLI generate the angular starter for you -->
-`ng new login-and-register-example`
+### Commands/Cli Commands that were used to generate this project
+With the Angular CLI we can generate Angular Scaffolds with just one specific command. e.g. generate a component, a module, or a service
 
+Let the Angular CLI generate the angular starter for you  
+`ng new login-and-register-example`  
+
+add angular Material to your Angular app  
+`ng add @angular/material`
+  
+Generate the modules Public, Private and Shared  
+`ng g module public`  
+`ng g module private`  
+
+generate proxy file to proxy/rewrite the `/api` requests
+create file proxy.conf.json and add the config details
+then add it to the angular json under projects....serve.development.proxyConfig...

angular.json

@@ -31,6 +31,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -75,7 +76,8 @@
               "browserTarget": "login-and-register-example:build:production"
             },
             "development": {
-              "browserTarget": "login-and-register-example:build:development"
+              "browserTarget": "login-and-register-example:build:development",
+              "proxyConfig": "src/proxy.conf.json"
             }
           },
           "defaultConfiguration": "development"
@@ -99,6 +101,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -108,4 +111,4 @@
     }
   },
   "defaultProject": "login-and-register-example"
-}
+}

package-lock.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.1.0",
+    "@angular/cdk": "^13.2.2",
     "@angular/common": "~13.1.0",
     "@angular/compiler": "~13.1.0",
     "@angular/core": "~13.1.0",
     "@angular/forms": "~13.1.0",
+    "@angular/material": "^13.2.2",
     "@angular/platform-browser": "~13.1.0",
     "@angular/platform-browser-dynamic": "~13.1.0",
     "@angular/router": "~13.1.0",
@@ -36,4 +38,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.5.2"
   }
-}
+}

package.json

@@ -1,7 +1,19 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    // Lazy Loading the public module (all children routes will be under '/public/{route from lazy loaded module}')
+    path: 'public',
+    loadChildren: () => import('./public/public.module').then(m => m.PublicModule)
+  },
+  {
+    // Redirects all paths that are not matching to the 'public' route/path
+    path: '**',
+    redirectTo: 'public',
+    pathMatch: 'full'
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],