Skip to content

Cuates/angularmoviefeed

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
src
src
 
 
README.md
README.md
 
 
angular.json
angular.json
 
 

Repository files navigation

angularmoviefeed

Angular Moviefeed

Table of Contents

Version

  • 0.0.1

Important Note

  • This script was written with Angular 13.2.5 methods on NodeJS 17.6.0
  • Updates to script with Angular 16.0.3 methods on NodeJS 18.16.0

Prerequisite Environment

  • Install
    • NodeJS
      • Use the following web site to download for your operating system (Windows/Mac OS/Linux)
  • Npm
    • npm install -g npm@latest
    • npm -v
    • Update package.json file
      • Install ncu package globally
        • npm install -g npm-check-updates
      • Checks for updates from the package.json file
        • ncu
      • Update the package.json file
        • ncu -u
      • Update your package-lock.json file from the package.json file
        • npm update --save

Generating Angular app with extra features

  • Generate Angular App
    • Navigate to project
      • cd /path/of/project/location/
        • Execute any of the commands below
          • ng new <project-name>
            • Type Yes for routing
            • Choose SCSS
          • ng new <project-name> --style=scss/css/... --skipTests --routing=true/false
            • NOTE: A newer flag will be utilized from now on
              • ng new <project-name> --style=scss/css/... --skip-tests=true/false --routing=true/false
            • WAIT FOR THIS TO FINISH
  • Open Command Prompt without Administrator
    • Navigate to project
      • cd /path/inside/parent/directory
        • Serve Angular project (default HTTP host and port number)
          • ng serve
  • Start Angular which opens in a web browser
    • ng serve -o
  • Check for outdated packages
    • Make sure you are in the correct directory to install the font in the new angular project
      • Open a terminal and navigate to the project location
        • Execute the following command in the powershell terminal
          • npm outdated
  • Update packages
    • Make sure you are in the correct directory to install the font in the new angular project
      • Open a terminal and navigate to the project location
        • Execute the following command in the powershell terminal
          • ng update <package_name>
          • i.e. ng update @angular/material
        • Not sure if this works but a website says if you are updating from an existing lower version to a newer version, then remove the package first and then add the new package to the project again
          • Remove existing package
            • npm remove <package_name>
            • i.e. npm remove @angular/material
          • Add new package
            • npm add <package_name>
            • i.e. npm add @angular/material
  • Install package
    • Make sure you are in the correct directory for nexus to install the font in the new angular project
      • Open a terminal and navigate to the project location
        • Execute the following command in the powershell terminal
          • ng add <package_name>
          • i.e. ng add @angular/material
  • Bootstrap (Make sure you are in the Angular project folder)
    • Install Bootstrap
      • npm install --save bootstrap
        • WAIT FOR THIS TO FINISH
    • Reconfigure the angular.json file to include the new bootstrap files
      • Open the angular.json file in the scripts sections and add the two lines for bootstrap. 
        •   "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
  ],
  "scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]
      • Save and exit
  • FontAwesome
    • Install
    • Utilize the font awesome in your project add the following lines to your app.module.ts file. Your icons will differ from what is shown below. 
      •   import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
  import { faBars as faBars } from '@fortawesome/free-solid-svg-icons';
  import { faTimes as faTimes } from '@fortawesome/free-solid-svg-icons';
  import { faHome as faHome } from '@fortawesome/free-solid-svg-icons';
  import { faPlus as faPlus } from '@fortawesome/free-solid-svg-icons';
  import { faSearch as faSearch } from '@fortawesome/free-solid-svg-icons';
  import { faInfo as faInfo } from '@fortawesome/free-solid-svg-icons';
  import { faEdit as faEdit } from '@fortawesome/free-solid-svg-icons';
  import { faSpinner as faSpinner } from '@fortawesome/free-solid-svg-icons';
  import { faTrashAlt as faTrashAlt } from '@fortawesome/free-solid-svg-icons';
  import { faThumbsUp as faThumbsUp } from '@fortawesome/free-solid-svg-icons';
  import { faThumbsDown as faThumbsDown } from '@fortawesome/free-solid-svg-icons';
  import { faExternalLinkAlt as faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
  import { faFilm as faFilm } from '@fortawesome/free-solid-svg-icons';
  import { faNewspaper as faNewspaper } from '@fortawesome/free-solid-svg-icons';
  import { faExclamationTriangle as faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
    • Add the following lines of code to your app.module.ts file as well. Create a constructor function to retrieve the font awesome icon(s) of choice. Put the constructor into the export class AppModule section at the bottom of the page 
      •   // Add font awesome to the constructor
  constructor(library: FaIconLibrary) {
    // Adding the icons to be utilized throughout the web pages
    library.addIcons(faBars, faTimes, faHome, faInfo, faSearch, faPlus, faEdit, faSpinner, faTrashAlt, faThumbsUp, faThumbsDown, faExternalLinkAlt, faFilm, faNewspaper, faExclamationTriangle);
  }
  • Angular Material Package
    • ng add @angular/material 
      •   Would you like to proceed? (Y/n) Yes
  (You can customize the following color if the prebuilt colors do not meet your style)
  Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys) Pick either Indigo/Pink or Custom
  ❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
    Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]
    Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]
    Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]
    Custom
  ? Set up global Angular Material typography styles? (y/N) Yes
  ? Include the Angular animations module?
  > Include and enable animations
  ? Set up browser animations for Angular Material? (Y/n) Yes
      • The above will automatically be inserted into the angular.json file under the styles sections of the file
        • "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  • Install Material Datepicker and Time Picker Package NOT COMPATIBLE WITH ANGULAR 16+ AT THE MOMENT
    • npm install @angular-material-components/datetime-picker
  • Install Material Moment Adapter Package NOT COMPATIBLE WITH ANGULAR 16+ AT THE MOMENT
    • npm install @angular-material-components/moment-adapter
  • Utilize the Material Datepicker and Time Picker and Material Moment Adapter in your project, add the following lines to your app.module.ts file. Your settings will differ from what is shown below.
    • Add the following into the import section of the src/app/app.module.ts file 
      •   import { FormsModule, ReactiveFormsModule } from '@angular/forms';

  import { MatDatepickerModule } from '@angular/material/datepicker';
  import { MatInputModule } from '@angular/material/input';
  import { MatSelectModule } from '@angular/material/select';
  import { MatButtonModule } from '@angular/material/button';
  import { MatNativeDateModule } from '@angular/material/core';
  import { MatIconModule } from '@angular/material/icon';
  import { MatFormFieldModule } from '@angular/material/form-field';

  import { NgxMatMomentAdapter } from '@angular-material-components/moment-adapter';
  import {NgxMatDateFormats, NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS, NgxMatDateAdapter } from '@angular-material-components/datetime-picker';

  Add the following customer date formats under the import section at the top
  // Setting custom date time display for date time pickers input field
  export const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
    parse: {
      dateInput: "YYYY-MM-DD HH:mm:ss"
    },
    display: {
      dateInput: "YYYY-MM-DD HH:mm:ss",
      monthYearLabel: "MMM YYYY",
      dateA11yLabel: "LL",
      monthYearA11yLabel: "MMMM YYYY"
    }
  };
    • Add the following to the NgModule import section 
      •   FormsModule,
  HttpClientModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatSelectModule,
  MatButtonModule,
  NgxMatDatetimePickerModule,
  NgxMatTimepickerModule,
  NgxMatNativeDateModule,
  ReactiveFormsModule
    • Add the following to the NgModule providers section towards the bottom of the page 
      •   {
    provide: NgxMatDateAdapter,
    useClass: NgxMatMomentAdapter,
  },
  {
    provide: NGX_MAT_DATE_FORMATS,
    useValue: CUSTOM_DATE_FORMATS
  }
  • Include the following to your code to get date time picker displaying properly
    • Navigate to the .ts component of choice file and add the following to the import section 
      •   import { FormControl } from '@angular/forms';
    • Add the following to the export class component name section 
      •   public dateControl = new FormControl(new Date());
      • Save and Exit
    • Navigate to the .html component of choice file and add the following to the html code 
      •   <mat-form-field>
    <input class="inputStyleDateTimePicker" matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date & time" [formControl]="dateControl">
    <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="true" [stepHour]="1" [stepMinute]="1" [stepSecond]="1" [touchUi]="false" [enableMeridian]="false"
    [disableMinute]="false" [hideTime]="false"></ngx-mat-datetime-picker>
  </mat-form-field>
      • Save and Exit
    • Navigate to the .scss component of choice file and add the following to the css code 
      •   // Input field styling
  .mat-form-field {
    font-size: .3em;
  }

  // Date Time Picker input field style
  .inputStyleDateTimePicker {
    font-size: 3.5em;
  }

  // Input field icon styling
  .mat-datepicker-toggle {
    font-size: 3.5em;
  }
      • Save and Exit
  • Scroll To Top of Page
    • ng add ngx-scrolltop 
      •   ℹ Using package manager: npm
  ✔ Found compatible package version: ngx-scrolltop@4.1.2.
  ✔ Package information loaded.

  The package ngx-scrolltop@4.1.2 will be installed and executed.
  Would you like to proceed? (Y/n) Y
      • The following tag will be added to the app.component.html
        • <ngx-scrolltop></ngx-scrolltop>
          • NOTE: If you do not want the scroll top on all pages, then remove the ngx-scrolltop tags from app.component.html. Add the tags to the specific component pages of choice.
      • The following will be added to the app.module.ts file
        • import { NgxScrollTopModule } from 'ngx-scrolltop';
        • Also, to the NgModule imports section
          • NgxScrollTopModule

Basic Commands

  • Generate component
    • Spelled out flags
      • ng generate component <name-of-component> --skip-tests=true
    • Short version flags
      • ng g c <name-of-component> --skip-tests=true
    • If you want the component to be placed into a folder
      • ng g c <folder_name>/<name-of-component> --skip-tests=true
  • Generate service
    • Spelled out flags
      • ng generate service <name-of-service> --skip-tests=true
    • Short version flags
      • ng g s <name-of-service> --skip-tests=true
    • If you want the service to be placed into a folder
      • ng g s <folder_name>/<name-of-service> --skip-tests=true
  • Generate Interface
    • Spelled out flags
      • ng generate interface <name-of-interface> [type]
    • Short version flags
      • ng g i <name-of-interface> [type]
    • i.e. ng g i <name-of-interface> interface
  • Generate Class
    • Spelled out flags
      • ng generate class <name-of-class> --skip-tests=true
    • Short version flags
      • ng g cl <name-of-class> --skip-tests=true
    • i.e. ng g cl <name-of-class> --skip-tests=true
  • Generate Enum (Enumerator)
    • Spelled out flags
      • ng generate enum <name-of-enum> --type=enum
    • Short version flags
      • ng g e <name-of-enum> --type=enum
    • i.e. ng g e <name-of-class> --type=enum
  • Generate Directive
    • Spelled out flags
      • ng generate directive <name-of-directive>
    • Short version flags
      • ng g d <name-of-directive>
    • i.e. ng g d <name-of-directive>

Change Page Title

  • Get the title to display for each component
    • Add the following line to the app.module.ts file 
      •   import { BrowserModule, Title } from '@angular/platform-browser';
    • Add the following to the NgModule providers section 
      •   Title
    • Add the following line to the component.ts of choice file 
      •   import { Title } from '@angular/platform-browser';
    • Add the following line in the export class section of the component.ts of choice file 
      •   title = 'page_title';
    • Add the following line in the export class constructor() parameter function of the component.ts of choice file 
      •   constructor(private titleService:Title) { }
    • Add the following line in the export class ngOnIntit() function of the component.ts of choice file 
      •   this.titleService.setTitle(this.title);

Change FavIcon

  • Overwrite the favicon.ico with your icon by replacing the file in src directory

Setup the Angular project in Nginx conf file

  • Open your nginx configuration of choice and add the following two sections to the file in your "server" section 
    •   listen <port_number>
  server_name <domain_name/container_name>
  root /path/to/nginx/html;
  index index.html

  location </angular/base_url> {
    alias </path/to/nginx/html>
    try_files $uri /index.html?$args;
    autoindex off;
  }
    • Save and Exit
  • Test and restart nginx if successful test
    • Test Nginx
      • sudo nginx -t
    • Restart Nginx Service
      • sudo systemctl restart nginx

Modify the following files to change the custom uri

  • If you have a specific URI that you are targeting, then proceed with the following modification
    • Navigate to the angular project src folder and locate the "<base href="">" line in src/index.html file
      • Change line
        • From
          • <base href="/">
        • To
          • <base href="/<uri_name>/">
      • Save and Exit

Build Application for Production

  • Navigate to project directory
    • cd /path/inside/parent/directory
      • Run ng build command in Angular CLI
        • To get the preview of the application, run the following command:
          • ng serve --configuration=production
            • This starts a local HTTP server with production files. Navigate to http://localhost:4200/ to view the application.
        • Execute the following command to get the application ready for deployment
          • ng build --configuration=production
            • If you get the following warning and or error message(s), then you will need to up the maximumWarning and or maximumError in the angular.json file.
              • "Warning: bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 835.05 kB with a total of 1.30 MB.
              • Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 311.05 kB with a total of 1.30 MB."
            • Locate the "configurations" section in angular.json for your type of build (dev/stage/prod). Make the necessary changes to your angular.json file for the configuration build you are trying to execute and all should be fixed.
              • From 
                •   "maximumWarning": "500kb",
  "maximumError": "1mb"
              • To 
                •   "maximumWarning": "2mb",
  "maximumError": "2mb"
            • Save and Exit
            • Re-execute build command above

Links

nvm
how-to-install-node-js-on-centos-8
Angular Error initial exceeded maximum budget Budget 5.00 MB was not met by 197.06 kB with a total of 5.19 MB
angular deployment
how-to-bundle-an-angular-app-for-production
angular build
how-to-use-environment-variable-in-angularexample
when-running-ng-build-the-index-html-does-nothing
how-can-i-declare-a-global-variable-in-angular-2-typescript
ref_pxtoemconversion
what-noopener-noreferrer-nofollow-explained
getbootstrap position
how-do-i-detect-the-user-s-browser-and-apply-a-specific-css-file
sass-use-variables-across-multiple-files
angular-calling-parent-component-function-from-child-component-5dcccdc771d9
how-to-overlay-one-div-over-another
how-to-disable-mat-input-in-angular-code-example
how-to-change-height-in-mat-form-field
changing-border-color-in-mat-form-field
styling-mat-form-field-input-in-angular-material
angular-material-datepicker-validation
how-to-check-form-is-valid-or-not-in-angularexample
how-to-set-a-custom-error-message-to-a-form-in-angular
form-validators
angular-form-control-example
angular.forms/FormControl/setErrors/typescript-formcontrol-seterrors-method-examples
angular FormControl
how-to-clear-an-angular-reactive-form-input-values
angular DatePipe
angular-10-formatdate-method
angular-date-pipe-formatting-date-times-in-angular-with-examples
angular-material-form-validation
input Add example of using mat-error with parent formgroup validation
angular-material-show-mat-error-on-button-click
angular-formcontrol-validators
material angular form field
hex-color-picker
color-picker
color-names
shades-of-white-color-names-html-hex-rgb-codes
html-color-white
angular-regex-url-pattern-validation-example-tutorial
angular-disable-button-example.html
material angular button
angular-material-design-how-to-add-custom-button-color
angular button-types-example
angular-material-and-changing-fonts
spinner-loads-for-every-button-when-clicked-on-a-specific-button
how-to-change-spin-speed-for-fa-icon-element-i
create-button-spinner-when-clicked-in-angular-5
how-to-add-a-loading-spinner-to-an-angular-material-button-step-by-step-guide
how-to-access-json-array-object-in-html-using-angular
elementref-in-angular
angular-viewchild-access-component
angular-material-input-clear-button-icon-lay-out-fails
angular-clear-input-field
material angular input
angular-material-select
angular-material-109-mat-select-tutorial-with-local-and-dynamic-http-response
access-material-select-options
mat-select-in-angular-material
angular-material-109-mat-select-tutorial-with-local-and-dynamic-http-response
how-to-use-mat-select-trigger-with-ngfor
typescript-use-correct-version-of-settimeout-node-vs-window
onchange-equivalent-in-angular2
how-to-match-value-with-regex-in-angular
regexr
angular-how-to-remove-element-from-arrayexample.html
access-key-and-value-of-object-using-ngfor
how-to-loop-through-object-properties-with-ngfor-in-angular-59e8
angular-5-how-to-display-array-of-objects-in-html-by-ngfor
angular app.component.html 01
angular-on-keyup-enter-send-the-current-text-of-an-inpu
angular-5-button-submit-on-enter-key-press
Angular 13 tutorial - event handling & making function part 7
how-to-call-an-angular-component-on-click-event-angular
how-to-get-value-of-input-field-in-typescript-file-angular-4
data-transfer-one-component-to-another-angular-7-c076272c78e1
angular-get-input-value-multiple-ways
mozilla CSS @keyframes
css3-spin-animation
how-to-add-a-body-to-angular-httpclient-delete-function
angular-httpclient-post Body
angular-httpclient-get-example
angular httpclient get-params
angular app.component.html 02
how-to-share-the-http-response-between-two-components-in-angular-6
pass-api-data-from-one-componen
angular-13-httpclient-http-services-tutorial-exampleexample
angular-service-example
angular-13-services-example-tutorial
angular-13-httpclient-http-services-example
angular-service-tutorial-with-example
angular-service-example-crud-operations
Test JSON data string
angular-httpheaders
angular-ngfor-template-element
ngfor-repeating-components
angular generate component-command
do-you-know-how-to-resolve-cors-issues-in-angular-9d818474825f
javascript-how-to-access-the-return-value-of-a-promise-object-1bck
angular/use-ngif-else-on-angular
angular-http-get-with-parameter
show-a-loading-gif-for-each-http-request-angular-4
angular defining-observers
Observable subscribe
subscribe-is-deprecated-use-an-observer-instead-o
Refine subscribe and tap signatures
fix subscribe Deprecate null starting parameter signatures for subscribe
angular-material-components moment-adapter
cannot-find-module-angular-material-moment-adapter
how-to-remove-space-bottom-mat-form-field
momentjsbdisplaying format
material angular form-field
material angular theming
material angular floating-label
custom-theme-for-angular-material-components-series-part-1-create-a-theme
create-angular-material-8-custom-theme
demo-ngx-mat-datetime-picker app.component.html
3-ways-to-fix-property-has-no-initializer-and-is-not-definitely-assigned-i
angular datepicker-formats-example
change-time-format-in-datetime-picker-input-reactive-forms
datepicker-in-angular
mat-datetimepicker
mozilla datetime-local
att_input_type_datetime-local.asp
how-to-set-bootstrap-timepicker-using-datetimepicker-library
format-daty-i-godziny-w-ngx-mat-datetime-picker
how-can-i-customize-date-and-time-format-in-ngx-mat-datetim
angular-moment-picker
angular-moment-picker momentpickerprovider
angular bootstrap datepicker
top-10-date-picker-components-directives-for-angular
material angular /datepicker
angular-material-109-datepicker-timepicker-tutorial
angular-material-datepicker-change-format-of-selected-date
how-to-add-angular-time-picker-in-angular
angular-13-material-datepicker-tutorial-exampleexample
ngxmatdatetimepicker-is-not-assignable-to-type-matdatepickerbase
angular-material-components datetime-picker
angular-ngmodel
Fetching & Displaying Current Date in Angular
Angular Datepicker mat-datepicker How to use angular material datepicker
Angular Material Datepicker mat-datepicker How to use angular material datepicker to show as html
How to add datepicker using angular material
angular-datetime-picker-meeting-calendar-owldatetime
angular-forms-ngmodel-directive
font-awesome-icon-with-an-onclick-event-set
typescript-property-does-not-exist-on-type
visualstudio code remote ssh
set-up-vs-code-with-a-remote
connect-to-your-remote-servers-from-visual-studio-code-eb5a5875e348
angular styleguide folders-by-feature-structure
angular-folder-structure-best-practices
angular-project-structure-best-practice
angular-architecture-best-practices
Bootstrap Image
ngx-scrolltop
Adding-a-Scroll-to-Top-button-in-Angular
what-is-the-difference-between-parseint-and-number
how-to-get-query-string-from-url-in-angularexample
angular-pass-url-parameters-query-strings
angular-13-tutorial-routing-and-navigation
angular-router-tutorial
how-to-take-the-values-from-the-case-sensitive-query-param-variables
typescript_string_tolowercase
angular-query-parameters
routerlinkactive-allow-any-query-params
IsActiveMatchOptions
RouterLinkActive
angular-passing-optional-query-parameters-to-route/
npm update is not updating the version in package.json file
What's the difference between tilde(~) and caret(^) in package.json?

About

Angular Moviefeed

Topics

nodejs javascript css html nginx npm json angular angular-material scss nvm font-awesome angular-cli material-datetimepicker typesccript material-moment-adapter

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages