Code Monkey home page Code Monkey logo

angular.examples.monorepo's Introduction

Angular.Examples.MonoRepo

This is a mono-repo containing several Angular applications, but sharing one node modules folder. For info about the mono-repo used in these examples see Nx Workspace. The command to run each example is below in "Running a project" section.

Running a project

In the client folder run the following command to install the necessary packages: npm install

In the Client folder, run one of these commands:

  • ag-grid-example
    • What: Demostrates basic usage of the of the Ag Grid component
    • Requires server? Yes, you'll also need to run the server project
    • Run it: nx run ag-grid-example:serve:development --watch ornx serve ag-grid-example
  • akita-example
    • What: Demostrates using Akita state management
    • Requires server? Yes, you'll also need to run the server project
    • Run it: nx run akita-example:serve:development --watch or nx serve akita-example
  • dark-mode
    • What: Demostrates switching between light and dark mode using CSS variables
    • Requires server? No
    • Run it: nx run dark-mode:serve:development --watch or nx serve dark-mode
  • simple-examples
    • What: Miscellanous examples that show different simplier concepts
    • Requires server? Yes
    • Run it: nx run simple-examples:serve:development --watch or nx serve simple-examples

Creating a new project

From the client directory, I had to execute the two commands listed here and here in the main folder (the one where the package.json and angular.json live):

  1. npm install -D @nrwl/angular
  2. nx g @nrwl/angular:app appName

Afterwards, I changed directories into the apps and then appName and finally ran this command nx serve appName. npm install -D @nrwl/angular

Relationships between projects

Run this command nx graph in the client directory (see also).

Modules installed

Outside the defaults that come with NxWorkspace, I've installed these packages:

  • @datorama/akita
    • CMD: npm install @datorama/akita
    • Used by: akita-example
  • @angular/material
    • CMD: npm install @angular/material
    • Used by: akita-example
  • ag-grid-community (generic library for any JavaScript app)
    • CMD: npm install --save ag-grid-community
    • Used by: ag-grid-example
  • ag-grid-angular (specific code for Angular)
    • CMD: npm install --save ag-grid-angular
    • Used by: ag-grid-example

Errors

Error 1: More than one version of Angular found

If you see this error Workspace config file cannot be loaded: \Angular.Examples.MonoRepo\Client\angular.json Invalid format version detected - Expected:[ 1 ] Found: [ 2 ]

Creating from scratch

create-nx-workspace yates --preset=angular

Run all the module installs again.

Upgrading notes

Be sure to delete node_modules folder Be sure to delete .angular directory

Branching scheme

  • Main branch: Angular 14
  • [Future] I will create a branch for older Angular code

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.