update angular standalone demo based on new tutorial rewrite (#30)

Author: juristr

standalone-angular-app/.eslintignore

@@ -0,0 +1 @@
+node_modules

standalone-angular-app/.eslintrc.base.json

@@ -1,12 +1,12 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -15,6 +15,30 @@
               {
                 "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"]
               }
             ]
           }
@@ -23,12 +47,12 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {

standalone-angular-app/.eslintrc.json

@@ -4,31 +4,31 @@
     {
       "files": ["*.ts"],
       "extends": [
-        "plugin:@nrwl/nx/angular",
+        "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
           {
             "type": "attribute",
-            "prefix": "store",
+            "prefix": "myngapp",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
             "type": "element",
-            "prefix": "store",
+            "prefix": "myngapp",
             "style": "kebab-case"
           }
         ]
       }
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ],

standalone-angular-app/.prettierignore

@@ -1,4 +1,4 @@
 # Add files here to ignore them from prettier formatting
-
 /dist
 /coverage
+.angular

standalone-angular-app/README.md

@@ -1,24 +1,36 @@
-# Tutorial: Standalone Angular Application
+# Tutorial: Building Angular Apps with the Nx Standalone Projects Setup
 
 [![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)
 
+
 Source code for the Angular standalone application tutorial on the Nx docs:
 - Tutorial: https://nx.dev/getting-started/angular-standalone-tutorial
 
 ## What's inside?
 
-This example contains a single Angular application that has been generated with the `angular-standlone` preset. It contains a single root-level application and two libraries, `cart` and `ui` that are imported into the app.
+This example contains a single Angular application that has been generated with the `angular-standalone` preset. 
+
+```
+npx create-nx-workspace@latest myngapp --preset=angular-standalone
+```
+
+It contains 
+
+- 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
 
 Follow through the tutorial linked above for more details.
 
 ## How to run it
 
-Install all dependencies using `npm install`. You can then run commands Like
+Clone it locally, install all dependencies using `npm install`. You can then run commands Like
 
 - `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
+Alternatively 👇
 
-- [Video: Standalone Applications with Nx](https://youtu.be/qEaVzh-oBBc)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/nrwl/nx-recipes/tree/main/standalone-angular-app?file=README.md)

standalone-angular-app/cart/project.json

@@ -2,24 +2,13 @@
   "extends": ["plugin:cypress/recommended", "../.eslintrc.base.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
     {
       "files": ["*.js", "*.jsx"],
       "rules": {}
     },
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {}
-    },
-    {
-      "files": ["src/plugins/index.js"],
-      "rules": {
-        "@typescript-eslint/no-var-requires": "off",
-        "no-undef": "off"
-      }
     }
   ]
 }

standalone-angular-app/cart/src/index.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: nxE2EPreset(__dirname),

standalone-angular-app/cart/src/lib/cart.module.ts

@@ -5,26 +5,29 @@
   "projectType": "application",
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "e2e/cypress.config.ts",
-        "devServerTarget": "store:serve:development",
+        "devServerTarget": "myngapp:serve:development",
         "testingType": "e2e"
       },
       "configurations": {
         "production": {
-          "devServerTarget": "store:serve:production"
+          "devServerTarget": "myngapp:serve:production"
+        },
+        "ci": {
+          "devServerTarget": "myngapp:serve-static"
         }
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["e2e/**/*.{js,ts}"]
       }
     }
   },
   "tags": [],
-  "implicitDependencies": ["store"]
+  "implicitDependencies": ["myngapp"]
 }

standalone-angular-app/cart/src/lib/cart/cart.component.html

@@ -1,13 +1,13 @@
 import { getGreeting } from '../support/app.po';
 
-describe('store', () => {
+describe('myngapp', () => {
   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 store');
+    getGreeting().contains('Welcome myngapp');
   });
 });

standalone-angular-app/cart/src/lib/cart/cart.component.ts

@@ -12,11 +12,5 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"],
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
+  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
 }