docs: migrate iframe to standalone (#8859)

* docs: migrate iframe to standalone

* docs: remove useless templates

Author: Laffery

scripts/site/_site/iframe/app/app.component.html

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  standalone: true,
+  imports: [RouterOutlet],
+  template: `<router-outlet></router-outlet>`
 })
 export class AppComponent {}

scripts/site/_site/iframe/app/app.component.ts

@@ -0,0 +1,24 @@
+import { provideHttpClient, withFetch, withJsonpSupport } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+import { IconDefinition } from '@ant-design/icons-angular';
+import * as AllIcons from '@ant-design/icons-angular/icons';
+import { provideNzIcons } from 'ng-zorro-antd/icon';
+
+import { routes } from './app.routes';
+
+const antDesignIcons = AllIcons as {
+  [key: string]: IconDefinition;
+};
+const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideNzIcons(icons),
+    provideRouter(routes),
+    provideHttpClient(withJsonpSupport(), withFetch()),
+    provideAnimationsAsync()
+  ]
+};

scripts/site/_site/iframe/app/app.config.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

scripts/site/_site/iframe/app/app.routes.ts

@@ -1,17 +1,6 @@
-import { registerLocaleData } from '@angular/common';
-import zh from '@angular/common/locales/zh';
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-registerLocaleData(zh);
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+bootstrapApplication(AppComponent, appConfig).catch(err => console.log(err));

scripts/site/_site/iframe/main.ts

@@ -1,5 +1,7 @@
 import { Routes } from '@angular/router';
-{{importPart}}
+
+{{imports}}
+
 export const routes: Routes = [
-{{routingPart}}
-];
+  {{routes}}
+];

scripts/site/template/app.module.template.ts

@@ -1,31 +1,22 @@
 const fs = require('fs-extra');
 const path = require('path');
-const routingTemplate = String(fs.readFileSync(path.resolve(__dirname, '../template/app.routing.module.template.ts')));
-const moduleTemplate = String(fs.readFileSync(path.resolve(__dirname, '../template/app.module.template.ts')));
-const zorroModule = String(fs.readFileSync(path.resolve(__dirname, '../template/ng-zorro-antd.module.template.ts')));
+const routesTemplate = String(fs.readFileSync(path.resolve(__dirname, '../template/iframe.routes.template.ts')));
 
 module.exports = function (iframeTargetPath, componentsMap) {
-  let routing = routingTemplate;
-  let module = moduleTemplate;
+  let routes = routesTemplate;
   let importPart = '';
   let routingPart = '';
-  let declarationPart = '';
   for (const key in componentsMap) {
     const demoMap = componentsMap[key];
     for (const innerKey in demoMap) {
       if (demoMap[innerKey].meta.iframe) {
         fs.writeFileSync(path.join(iframeTargetPath, `${key}-${innerKey}.ts`), demoMap[innerKey].ts);
         importPart = `import { ${demoMap[innerKey].name} } from './${key}-${innerKey}';\n${importPart}`;
         routingPart = `  { path: '${key}-${innerKey}', component: ${demoMap[innerKey].name} },\n${routingPart}`;
-        declarationPart = `    ${demoMap[innerKey].name},\n${declarationPart}`;
       }
     }
   }
-  routing = routing.replace(/{{importPart}}/g, importPart);
-  routing = routing.replace(/{{routingPart}}/g, routingPart);
-  module = module.replace(/{{importPart}}/g, importPart);
-  module = module.replace(/{{declarationPart}}/g, declarationPart);
-  fs.writeFileSync(path.join(iframeTargetPath, `app.routing.module.ts`), routing);
-  fs.writeFileSync(path.join(iframeTargetPath, `app.module.ts`), module);
-  fs.writeFileSync(path.join(iframeTargetPath, `ng-zorro-antd.module.ts`), zorroModule);
+  routes = routes.replace(/{{imports}}/g, importPart);
+  routes = routes.replace(/{{routes}}/g, routingPart);
+  fs.writeFileSync(path.join(iframeTargetPath, `app.routes.ts`), routes);
 };