add mini app for test

Author: xpioneer

conf/webpack.config.js

@@ -173,10 +173,8 @@ const config = {
   // plugins
   plugins: [
     new AngularWebpackPlugin({
-      // tsConfigPath: path.resolve(__dirname, '../tsconfig.json'),
-      // entryModule: path.resolve(__dirname, '../src/app/app.module#AppModule'),
-      // skipCodeGeneration: true,
-      // sourceMap: _DEV_ ? true : false
+      tsconfig: path.resolve(__dirname, '../tsconfig.json'),
+      jitMode: true,
     }),
     new MiniCssExtractPlugin({
       filename: "static/css/[name].[contenthash].css",

demos/app.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { RouterOutlet } from '@angular/router'
+
+@Component({
+  selector: 'app-root',
+  encapsulation: ViewEncapsulation.Emulated,
+  imports: [
+    RouterOutlet
+  ],
+  template: `
+    <h1>Angular Router Sample</h1>
+    <h2>Hello, Angular</h2>
+    <app-crisis-list></app-crisis-list>
+    <app-heroes-list></app-heroes-list>
+    <router-outlet></router-outlet>
+  `,
+})
+export class AppComponent implements OnInit {
+
+  constructor () {
+  }
+
+  public ngOnInit () {
+    console.log('demo app entry')
+  }
+}

demos/app.module.ts

@@ -0,0 +1,35 @@
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+import { LOCALE_ID, NgModule, OnInit } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { AppComponent }   from './app.component';
+import { AppRoutingModule }     from './app.routes';
+import { CrisisModule } from './crisis-list/module'
+import { HeroesModule } from './heroes-list/module'
+
+
+registerLocaleData(zh);
+
+@NgModule({
+  // schemas: [],
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    CommonModule,
+    CrisisModule,
+    HeroesModule,
+    AppRoutingModule,
+  ],
+  exports: [
+  ],
+  providers: [
+    // provideRouter(routes),
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {
+
+}

demos/app.routes.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CrisisListComponent } from './crisis-list/component';
+import { HeroesListComponent } from './heroes-list/component';
+
+export const routes: Routes = [
+  { path: 'crisis-list', component: CrisisListComponent },
+  { path: 'heroes-list', component: HeroesListComponent },
+  { path: '', redirectTo: '/crisis-list', pathMatch: 'full' },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule { }

demos/app.ts

@@ -0,0 +1,5 @@
+import 'zone.js';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule).catch((e) => console.error(e));

demos/crisis-list/component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-crisis-list',
+  encapsulation: ViewEncapsulation.Emulated,
+  templateUrl: `./crisis-list.component.html`,
+})
+export class CrisisListComponent implements OnInit {
+
+  constructor () {
+  }
+
+  public ngOnInit () {
+    console.log('CrisisListComponent')
+  }
+}

demos/crisis-list/crisis-list.component.html

@@ -0,0 +1,2 @@
+<h3>CRISIS CENTER</h3>
+<p>Get your crisis here</p>

demos/crisis-list/module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+import { CrisisListComponent } from './component'
+
+@NgModule({
+  declarations: [CrisisListComponent],
+  exports: [CrisisListComponent], // 导出组件
+  // imports: [CommonModule],
+})
+export class CrisisModule { }

demos/heroes-list/component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-heroes-list',
+  encapsulation: ViewEncapsulation.Emulated,
+  templateUrl: `./heroes-list.component.html`,
+})
+export class HeroesListComponent implements OnInit {
+
+  constructor () {
+  }
+
+  public ngOnInit () {
+    console.log('HeroesListComponent')
+  }
+}

demos/heroes-list/heroes-list.component.html

@@ -0,0 +1,2 @@
+<h3>HEROES</h3>
+<p>Get your heroes here</p>

demos/heroes-list/module.ts

@@ -0,0 +1,10 @@
+import { Component, NgModule, OnInit, ViewEncapsulation } from '@angular/core';
+import { HeroesListComponent } from './component'
+// import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [HeroesListComponent],
+  exports: [HeroesListComponent], // 导出组件
+  // imports: [CommonModule]
+})
+export class HeroesModule { }

demos/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>CMS-管理后台</title>
+  <base href="/">
+  <!-- <link rel="manifest" href="/manifest.json"> -->
+</head>
+<body>
+  <app-root>
+    <div class="ant-spin ant-spin-spinning ant-spin-lg">
+      <span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span>
+      <div class="ant-spin-text"></div>
+    </div>
+  </app-root>
+</body>
+</html>

demos/miniapp/about.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  template: `<h2>About Page</h2>`
+})
+export class AboutComponent {}

demos/miniapp/app-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home.component';
+import { AboutComponent } from './about.component';
+
+const routes: Routes = [
+  { path: '', component: HomeComponent }, // 根路径显示 HomeComponent
+  { path: 'about', component: AboutComponent } // /about 显示 AboutComponent
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

demos/miniapp/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Angular Routing Example</h1>
+    <nav>
+      <a routerLink="/">Home</a>
+      <a routerLink="/about">About</a>
+    </nav>
+    <router-outlet></router-outlet> <!-- 用于渲染路由匹配的组件 -->
+  `
+})
+export class AppComponent {}

demos/miniapp/app.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home.component';
+import { AboutComponent } from './about.component';
+import { AppRoutingModule } from './app-routing.module'; // 导入路由模块
+
+@NgModule({
+  declarations: [AppComponent, HomeComponent, AboutComponent],
+  imports: [BrowserModule, AppRoutingModule], // 引入 BrowserModule 和 AppRoutingModule
+  bootstrap: [AppComponent]
+})
+export class AppModule {}

demos/miniapp/home.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `<h2>Home Page</h2>`
+})
+export class HomeComponent {}

demos/miniapp/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Angular Routing Example</title>
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

demos/miniapp/index.ts

@@ -0,0 +1,2 @@
+import "@angular/compiler"
+import("./main")

demos/miniapp/main.ts

@@ -0,0 +1,6 @@
+import 'zone.js';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

demos/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "ESNext",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2017", "dom"],
+    "baseUrl": "./demos",
+  },
+  "include": ["./**/*.ts"]
+}

demos/webpack.config.js

@@ -0,0 +1,50 @@
+const { AngularWebpackPlugin } = require('@ngtools/webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require("html-webpack-plugin")
+
+module.exports = {
+  devServer: {
+    port: '9101',
+    historyApiFallback: true, // 如果你使用的是 Angular 路由，推荐加上这个
+  },
+  mode: 'development', // 或者 'development'
+  entry: './demos/app.ts', // 入口文件
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/',
+    assetModuleFilename: 'static/assets/[hash][ext][query]',
+  },
+  resolve: {
+    extensions: ['.ts', '.js'], // 解析 .ts 和 .js 文件
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: [
+          {
+            loader: '@ngtools/webpack',
+          },
+        ],
+      },
+      {
+        test: /\.html$/,
+        use: 'html-loader',
+      },
+    ],
+  },
+  plugins: [
+    new AngularWebpackPlugin({
+      tsconfig: './demos/tsconfig.json',
+      jitMode: true,
+    }),
+    new HtmlWebpackPlugin({
+      title: 'CMS-FE DEV',
+      filename: 'index.html',
+      template: './demos/index.html',
+      inject: 'body',
+      templateParameters: false,
+    })
+  ],
+};

package.json

@@ -16,6 +16,7 @@
     "start": "NODE_ENV=development webpack-dev-server --config conf/webpack.dev.conf.js",
     "dev": "yarn start",
     "clean": "rm -rf dist",
+    "demo": "webpack-dev-server --config ./demos/webpack.config.js",
     "build": "NODE_ENV=production webpack --config conf/webpack.prod.conf.js",
     "test": "NODE_ENV=development yarn run dll && webpack --config conf/webpack.dev.conf.js",
     "lint": "NODE_ENV=development node_modules/.bin/tslint -c tslint.json -p tsconfig.json",

src/app/app.component.ts

@@ -11,5 +11,6 @@ export class AppComponent implements OnInit {
   }
 
   public ngOnInit () {
+    console.log('app entry')
   }
 }

src/app/app.routing.ts

@@ -4,7 +4,7 @@ import { AuthGuard } from '../utils/auth/auth-guard.service';
 import { HomeComponent } from './home';
 import { LoginComponent } from './login/login.component';
 
-const appRoutes: Routes = [
+export const appRoutes: Routes = [
   {
     path: 'login',
     component: LoginComponent,

src/app/demos/app.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  encapsulation: ViewEncapsulation.Emulated,
+  template: `
+    <h1>Angular Router Sample</h1>
+    <app-crisis-list></app-crisis-list>
+    <app-heroes-list></app-heroes-list>
+  `,
+})
+export class AppComponent implements OnInit {
+
+  constructor () {
+  }
+
+  public ngOnInit () {
+    console.log('demo app entry')
+  }
+}