working examples

ngx-metaui · Mar 22, 2020 · 5e0efa2 · 5e0efa2
1 parent 1fe4af9
commit 5e0efa2
Show file tree

Hide file tree

Showing 15 changed files with 147 additions and 129 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,6 +1,8 @@
 # Editor configuration, see https://editorconfig.org
 root = true
 
+[*.ts]
+
 [*]
 charset = utf-8
 indent_style = space

diff --git a/angular.json b/angular.json
@@ -23,7 +23,10 @@
               "libs/core/tsconfig.lib.json",
               "libs/core/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**", "!libs/core/**"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/core/**"
+            ]
           }
         },
         "test": {
@@ -53,8 +56,14 @@
             "polyfills": "apps/my-app/src/polyfills.ts",
             "tsConfig": "apps/my-app/tsconfig.app.json",
             "aot": true,
-            "assets": ["apps/my-app/src/favicon.ico", "apps/my-app/src/assets"],
-            "styles": ["apps/my-app/src/styles.css"],
+            "assets": [
+              "apps/my-app/src/favicon.ico",
+              "apps/my-app/src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "apps/my-app/src/styles.css"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -112,7 +121,10 @@
               "apps/my-app/tsconfig.app.json",
               "apps/my-app/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**", "!apps/my-app/**"]
+            "exclude": [
+              "**/node_modules/**",
+              "!apps/my-app/**"
+            ]
           }
         },
         "test": {
@@ -126,6 +138,43 @@
         }
       }
     },
+    "ui-lib": {
+      "projectType": "library",
+      "root": "libs/ui-lib",
+      "sourceRoot": "libs/ui-lib/src",
+      "prefix": "dynamic-renderer",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:package",
+          "options": {
+            "tsConfig": "libs/ui-lib/tsconfig.lib.json",
+            "project": "libs/ui-lib/ng-package.json"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/ui-lib/tsconfig.lib.json",
+              "libs/ui-lib/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/ui-lib/**"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/ui-lib/src/test.ts",
+            "tsConfig": "libs/ui-lib/tsconfig.spec.json",
+            "karmaConfig": "libs/ui-lib/karma.conf.js"
+          }
+        }
+      },
+      "schematics": {}
+    }
   },
   "defaultProject": "my-app",
   "cli": {
@@ -140,4 +189,4 @@
       "unitTestRunner": "jest"
     }
   }
-}
+}
diff --git a/apps/my-app/src/app/app.component.html b/apps/my-app/src/app/app.component.html
@@ -1,107 +1,7 @@
-<header class="flex">
-  <img
-    alt="Nx logo"
-    width="75"
-    src="https://nx.dev/assets/images/nx-logo-white.svg"
-  />
-  <h1>Welcome to {{ title }}!</h1>
-</header>
-<main>
-  <h2>Resources &amp; Tools</h2>
-  <p>
-    Thank you for using and showing some ♥ for Nx.
-  </p>
-  <div class="flex github-star-container">
-    <a
-      href="https://github.com/nrwl/nx"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      If you like Nx, please give it a star:
-      <div class="github-star-badge">
-        <svg
-          class="material-icons"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-          />
-        </svg>
-        Star
-      </div>
-    </a>
-  </div>
-  <p>
-    Here are some links to help you get started.
-  </p>
-  <ul class="resources">
-    <li class="col-span-2">
-      <a
-        class="resource flex"
-        href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
-      >
-        Nx video course
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a
-        class="resource flex"
-        href="https://nx.dev/angular/getting-started/what-is-nx"
-      >
-        Nx video tutorial
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a
-        class="resource flex"
-        href="https://nx.dev/angular/tutorial/01-create-application"
-      >
-        Interactive tutorial
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a class="resource flex" href="https://connect.nrwl.io/">
-        <img
-          height="36"
-          alt="Nrwl Connect"
-          src="https://connect.nrwl.io/assets/img/CONNECT_ColorIcon.png"
-        />
-        <span class="gutter-left">Nrwl Connect</span>
-      </a>
-    </li>
-  </ul>
-  <h2>Next Steps</h2>
-  <p>Here are some things you can do with Nx.</p>
-  <details open>
-    <summary>Add UI library</summary>
-    <pre>
-# Generate UI lib
-ng g @nrwl/angular:lib ui
+<h1>Dynamic Component</h1>
 
-# Add a component
-ng g @nrwl/angular:component xyz --project ui</pre
-    >
-  </details>
-  <details>
-    <summary>View dependency graph</summary>
-    <pre>nx dep-graph</pre>
-  </details>
-  <details>
-    <summary>Run affected commands</summary>
-    <pre>
-# see what's been affected by changes
-ng affected:dep-graph
+<m-renderer [name]="'MatInput'" [path]="'@angular/material/input'">
+</m-renderer>
 
-# run tests for current changes
-ng affected:test
-
-# run e2e tests for current changes
-ng affected:e2e
-</pre
-    >
-  </details>
-</main>
+<!--<m-renderer [name]="'MyInputComponent'" [path]="'@dynamic-renderer/ui-lib'">-->
+<!--</m-renderer>-->
diff --git a/apps/my-app/src/app/app.module.ts b/apps/my-app/src/app/app.module.ts
@@ -2,11 +2,23 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CoreModule } from '@dynamic-renderer/core';
+import { MyInputModule } from '@dynamic-renderer/ui-lib';
+import { MatInputModule } from '@angular/material/input';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CoreModule,
+    MyInputModule,
+    MatInputModule
+
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+}
diff --git a/apps/my-app/src/index.html b/apps/my-app/src/index.html
@@ -6,7 +6,9 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
   <body>
     <dynamic-renderer-root></dynamic-renderer-root>
   </body>

diff --git a/apps/my-app/src/styles.css b/apps/my-app/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
diff --git a/libs/core/src/index.ts b/libs/core/src/index.ts
@@ -1 +1,2 @@
 export * from './lib/core.module';
+export * from './lib/renderer/renderer.component';
diff --git a/libs/core/src/lib/core.module.ts b/libs/core/src/lib/core.module.ts
@@ -1,8 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RendererComponent } from './renderer/renderer.component';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: []
+  declarations: [RendererComponent],
+  exports: [RendererComponent]
 })
-export class CoreModule {}
+export class CoreModule {
+}
diff --git a/libs/core/tslint.json b/libs/core/tslint.json
@@ -1,8 +1,8 @@
 {
   "extends": "../../tslint.json",
   "rules": {
-    "directive-selector": [true, "attribute", "dynamicRenderer", "camelCase"],
-    "component-selector": [true, "element", "dynamic-renderer", "kebab-case"]
+    "directive-selector": [true, "attribute", "m", "camelCase"],
+    "component-selector": [true, "element", "m", "kebab-case"]
   },
   "linterOptions": {
     "exclude": ["!**/*"]

diff --git a/libs/ui-lib/src/lib/my-input/my-input.module.ts b/libs/ui-lib/src/lib/my-input/my-input.module.ts
@@ -0,0 +1,25 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MyInputComponent } from './my-input.component';
+import { MatInputModule } from '@angular/material/input';
+
+@NgModule({
+  declarations: [
+    MyInputComponent
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatInputModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  exports: [
+    MyInputComponent
+  ]
+})
+export class MyInputModule {
+}
diff --git a/nx.json b/nx.json
@@ -13,6 +13,9 @@
     },
     "my-app": {
       "tags": []
+    },
+    "ui-lib": {
+      "tags": []
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,19 +30,21 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.0.6",
+    "@angular/cdk": "^9.1.3",
     "@angular/common": "~9.0.6",
     "@angular/compiler": "~9.0.6",
     "@angular/core": "~9.0.6",
     "@angular/forms": "~9.0.6",
+    "@angular/material": "^9.1.3",
     "@angular/platform-browser": "~9.0.6",
     "@angular/platform-browser-dynamic": "~9.0.6",
     "@angular/router": "~9.0.6",
+    "@nrwl/angular": "9.1.2",
     "@nrwl/workspace": "^9.1.2",
+    "core-js": "^2.5.4",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2",
-    "@nrwl/angular": "9.1.2",
-    "core-js": "^2.5.4"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.900.6",

diff --git a/tsconfig.json b/tsconfig.json
@@ -11,15 +11,10 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
-    "lib": [
-      "es2018",
-      "dom"
-    ],
+    "lib": ["es2018", "dom"],
     "paths": {
-      "@dynamic-renderer/core": [
-        "dist/libs/core",
-        "libs/core/src/index.ts"
-      ]
+      "@dynamic-renderer/core": ["dist/libs/core", "libs/core/src/index.ts"],
+      "@dynamic-renderer/ui-lib": ["libs/ui-lib/src/index.ts"]
     },
     "rootDir": "."
   },
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './lib/core.module';
		export * from './lib/renderer/renderer.component';