angular standalone

angular-standalone/.eslintrc.json

@@ -1,13 +1,62 @@
 {
+  "root": true,
   "ignorePatterns": ["!**/*"],
+  "plugins": ["@nx"],
   "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    },
     {
       "files": ["*.ts"],
       "extends": [
         "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              },
+              {
+                "sourceTag": "type:feature",
+                "onlyDependOnLibsWithTags": ["type:feature", "type:ui"]
+              },
+              {
+                "sourceTag": "type:ui",
+                "onlyDependOnLibsWithTags": ["type:ui"]
+              },
+              {
+                "sourceTag": "scope:orders",
+                "onlyDependOnLibsWithTags": [
+                  "scope:orders",
+                  "scope:products",
+                  "scope:shared"
+                ]
+              },
+              {
+                "sourceTag": "scope:products",
+                "onlyDependOnLibsWithTags": ["scope:products", "scope:shared"]
+              },
+              {
+                "sourceTag": "scope:shared",
+                "onlyDependOnLibsWithTags": ["scope:shared"]
+              }
+            ]
+          }
+        ],
         "@angular-eslint/directive-selector": [
           "error",
           {
@@ -31,6 +80,5 @@
       "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
-  ],
-  "extends": ["./.eslintrc.base.json"]
+  ]
 }

angular-standalone/.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner",
-    "dbaeumer.vscode-eslint"
+    "firsttris.vscode-jest-runner"
   ]
 }

angular-standalone/README.md

@@ -1,36 +1,69 @@
-# Tutorial: Building Angular Apps with the Nx Standalone Projects Setup
+# Myngapp
 
-[![standalone application](https://img.shields.io/static/v1?label=Nx%20setup&message=standalone%20app&color=blue)](https://nx.dev/concepts/integrated-vs-package-based#standalone-applications)
+<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
 
+✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨
 
-Source code for the Angular standalone application tutorial on the Nx docs:
-- Tutorial: https://nx.dev/getting-started/angular-standalone-tutorial
 
-## What's inside?
+## Start the app
 
-This example contains a single Angular application that has been generated with the `angular-standalone` preset. 
+To start the development server run `nx serve myngapp`. Open your browser and navigate to http://localhost:4200/. Happy coding!
 
+
+## Generate code
+
+If you happen to use Nx plugins, you can leverage code generators that might come with it.
+
+Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list <plugin-name>` to see what generators are available.
+
+Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).
+
+## Running tasks
+
+To execute tasks with Nx use the following syntax:
+
+```
+nx <target> <project> <...options>
 ```
-npx create-nx-workspace@latest myngapp --preset=angular-standalone
+
+You can also run multiple targets:
+
 ```
+nx run-many -t <target1> <target2>
+```
+
+..or add `-p` to filter specific projects
+
+```
+nx run-many -t <target1> <target2> -p <proj1> <proj2>
+```
+
+Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).
+
+## Want better Editor Integration?
+
+Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
+
+## Ready to deploy?
 
-It contains 
+Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.
 
-- a single root-level Angular application (in `src`)
-- an e2e project based on Cypress
-- two local libraries, `modules/products`, `modules/orders` and `modules/shared/ui` to demo how to modularize a codebase
-- uses [Nx module boundary rules](https://nx.dev/core-features/enforce-project-boundaries) to enforce architectural constraints
+## Set up CI!
 
-Follow through the tutorial linked above for more details.
+Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
 
-## How to run it
+- [Set up remote caching](https://nx.dev/core-features/share-your-cache)
+- [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution)
+- [Learn more how to setup CI](https://nx.dev/recipes/ci)
 
-Clone it locally, install all dependencies using `npm install`. You can then run commands Like
+## Explore the Project Graph
+Run `nx graph` to show the graph of the workspace.
+It will show tasks that you can run with Nx.
 
-- `npx nx build` to build the Angular application
-- `npx nx serve` to serve the app
-- you can use `npx nx graph` to visualize the structure
+- [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph)
 
-Alternatively 👇
+## Connect with us!
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/nrwl/nx-recipes/tree/main/angular-standalone?file=README.md)
+- [Join the community](https://nx.dev/community)
+- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
+- [Follow us on Twitter](https://twitter.com/nxdevtools)

angular-standalone/e2e/.eslintrc.json

@@ -1,18 +1,21 @@
 {
-  "extends": [
-    "plugin:cypress/recommended",
-    "../.eslintrc.json",
-    "../.eslintrc.base.json"
-  ],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": ["*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {}
     },
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     }
-  ]
+  ],
+  "plugins": ["@nx"],
+  "extends": ["plugin:cypress/recommended"]
 }

angular-standalone/e2e/cypress.config.ts

@@ -1,6 +1,17 @@
-import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
+import { defineConfig } from 'cypress';
+
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname),
+  e2e: {
+    ...nxE2EPreset(__filename, {
+      cypressDir: 'src',
+      webServerCommands: {
+        default: 'nx run myngapp:serve:development',
+        production: 'nx run myngapp:serve:production',
+      },
+      ciWebServerCommand: 'nx run myngapp:serve-static',
+    }),
+    baseUrl: 'http://localhost:4200',
+  },
 });

angular-standalone/e2e/project.json

@@ -1,33 +1,9 @@
 {
   "name": "e2e",
   "$schema": "../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "e2e/src",
   "projectType": "application",
-  "targets": {
-    "e2e": {
-      "executor": "@nx/cypress:cypress",
-      "options": {
-        "cypressConfig": "e2e/cypress.config.ts",
-        "devServerTarget": "myngapp:serve:development",
-        "testingType": "e2e"
-      },
-      "configurations": {
-        "production": {
-          "devServerTarget": "myngapp:serve:production"
-        },
-        "ci": {
-          "devServerTarget": "myngapp:serve-static"
-        }
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["e2e/**/*.{js,ts}"]
-      }
-    }
-  },
+  "sourceRoot": "e2e/src",
+  "targets": {},
   "tags": [],
   "implicitDependencies": ["myngapp"]
 }

angular-standalone/e2e/src/e2e/app.cy.ts

@@ -1,13 +1,13 @@
 import { getGreeting } from '../support/app.po';
 
-describe('myngapp', () => {
+describe('e2e', () => {
   beforeEach(() => cy.visit('/'));
 
   it('should display welcome message', () => {
     // Custom command example, see `../support/commands.ts` file
     cy.login('[email protected]', 'myPassword');
 
     // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains('Welcome myngapp');
+    getGreeting().contains(/Welcome/);
   });
 });

angular-standalone/e2e/src/fixtures/example.json

@@ -1,4 +1,5 @@
 {
   "name": "Using fixtures to represent data",
-  "email": "[email protected]"
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
 }

angular-standalone/e2e/src/support/commands.ts

@@ -1,5 +1,7 @@
+/// <reference types="cypress" />
+
 // ***********************************************
-// This example commands.js shows you how to
+// This example commands.ts shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
@@ -15,7 +17,7 @@ declare namespace Cypress {
     login(email: string, password: string): void;
   }
 }
-//
+
 // -- This is a parent command --
 Cypress.Commands.add('login', (email, password) => {
   console.log('Custom command example: Login', email, password);

angular-standalone/e2e/src/support/e2e.ts

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -13,5 +13,5 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
+// Import commands.ts using ES2015 syntax:
 import './commands';