feat: 增加 angular 模块封装 和 主应用的支持

examples/main-angular/angular.json

@@ -0,0 +1,124 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "main-angular": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/main-angular",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "allowedCommonJsDependencies": [
+              "@babel/runtime/regenerator"
+            ],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "2mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "main-angular:build:production"
+            },
+            "development": {
+              "browserTarget": "main-angular:build:development"
+            }
+          },
+          "options": {
+            "port": 4400,
+            "open": true
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "main-angular:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "main-angular",
+  "cli": {
+    "analytics": false
+  }
+}

examples/main-angular/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "main-angular",
+  "version": "1.0.0-rc.20",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "dependencies": {
+    "@angular/animations": "~12.2.0",
+    "@angular/common": "~12.2.0",
+    "@angular/compiler": "~12.2.0",
+    "@angular/core": "~12.2.0",
+    "@angular/forms": "~12.2.0",
+    "@angular/platform-browser": "~12.2.0",
+    "@angular/platform-browser-dynamic": "~12.2.0",
+    "@angular/router": "~12.2.0",
+    "@ant-design/icons-angular": "~12.0.3",
+    "ng-zorro-antd": "~12.1.0",
+    "rxjs": "^6.6.3",
+    "tslib": "^2.3.0",
+    "wujie": "workspace:^1.0.0-rc.20",
+    "wujie-angular": "workspace:1.0.0-rc.20",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~12.2.9",
+    "@angular/cli": "~12.2.9",
+    "@angular/compiler-cli": "~12.2.0",
+    "@types/jasmine": "~3.8.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.8.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.3.5"
+  }
+}

examples/main-angular/src/app/app-routing.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { Angular12Component } from "./pages/angular12.component";
+import { HomeComponent } from "./pages/home.component";
+import { React16Component } from "./pages/react16.component";
+import { React17Component } from "./pages/react17.component";
+import { ViteComponent } from "./pages/vite.component";
+import { Vue2Component } from "./pages/vue2.component";
+import { Vue3Component } from "./pages/vue3.component";
+import { MultipleComponent } from "./pages/multiple.component";
+
+const routes: Routes = [
+  { path: "react16", component: React16Component, data: { name: "react16" } },
+  { path: "react16-sub/:path", component: React16Component, data: { name: "react16-sub" } },
+  { path: "react17", component: React17Component, data: { name: "react17" } },
+  { path: "react17-sub/:path", component: React17Component, data: { name: "react17-sub" } },
+  { path: "vue2", component: Vue2Component, data: { name: "vue2" } },
+  { path: "vue2-sub/:path", component: Vue2Component, data: { name: "vue2-sub" } },
+  { path: "vue3", component: Vue3Component, data: { name: "vue3" } },
+  { path: "vue3-sub/:path", component: Vue3Component, data: { name: "vue3-sub" } },
+  { path: "vite", component: ViteComponent, data: { name: "vite" } },
+  { path: "vite-sub/:path", component: ViteComponent, data: { name: "vite-sub" } },
+  { path: "angular12", component: Angular12Component, data: { name: "angular" } },
+  { path: "all", component: MultipleComponent, data: { name: "all" } },
+  { path: "home", component: HomeComponent, data: { name: "home" } },
+  { path: "**", redirectTo: "/home" },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

examples/main-angular/src/app/app.component.css

@@ -0,0 +1,118 @@
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100vw;
+}
+
+#nav {
+  background-color: white;
+  flex-shrink: 0;
+  font-size: 20px;
+  display: flex;
+  position: relative;
+  z-index: 1;
+  flex-direction: column;
+  padding: 30px 0;
+  width: 210px;
+  height: 100vh;
+  box-sizing: border-box;
+  box-shadow: 3px 0px 9px 2px #e6e6e6;
+  transition: transform 0.1s linear;
+  transform: translate(0, 0);
+  overflow: auto;
+}
+
+#nav .menu-icon {
+  display: none;
+  border: none;
+  background: var(--theme) !important;
+}
+
+.main-icon {
+  padding: 0 10px;
+  transition: transform 0.2s ease-in;
+}
+
+.main-icon.active {
+  transform: rotate(180deg);
+}
+
+.sub-menu {
+  font-size: 16px;
+  padding: 0 10px;
+}
+
+@media screen and (max-width: 768px) {
+  #nav {
+    position: absolute;
+    box-shadow: none;
+    transform: translate(-100%, 0);
+  }
+
+  #nav.active {
+    transform: translate(0, 0);
+    box-shadow: 3px 0px 9px 2px #e6e6e6;
+  }
+  #nav .menu-icon {
+    position: absolute;
+    left: 100%;
+    display: block;
+  }
+}
+
+.wujie_iframe {
+  width: 100%;
+  height: 100%;
+}
+
+iframe {
+  border: none;
+}
+
+h3 {
+  padding-bottom: 0.3rem;
+  border-bottom: 1px solid #eaecef;
+}
+
+.content {
+  flex: 1;
+  height: 100vh;
+  overflow: hidden scroll;
+  width: 1px;
+}
+
+#nav a {
+  display: flex;
+  align-items: center;
+  padding: 10px 30px;
+  font-weight: bold;
+  color: #2c3e50;
+  text-decoration: none;
+  transition: all 0.2s linear;
+}
+
+#nav a:hover {
+  color: var(--theme);
+}
+
+.alive {
+  display: inline-block;
+  white-space: nowrap;
+  background-color: var(--theme);
+  border-radius: 8px;
+  margin-left: 4px;
+  font-size: 10px;
+  vertical-align: top;
+  padding: 1px 4px;
+  color: white;
+}
+
+#nav a.router-link-active {
+  color: var(--theme);
+  background: rgba(0, 0, 0, 0.05);
+}