在 .NET Aspire 中运行 Angular 前端样例AspireJavaScript.Angular 开发工作流全解析【免费下载链接】aspireAspire is the tool for code-first, extensible, observable dev and deploy.项目地址: https://gitcode.com/GitHub_Trending/as/aspire本文以 Aspire 仓库中 AspireJavaScript.Angular/README.md 为骨架结合playground/AspireWithJavaScript多语言前端演示项目中的真实源码系统讲解该 Angular 天气应用从开发调试、代码生成、构建打包到单测/端到端测试的完整工作流并深入剖析其与 .NET Aspire 应用宿主AppHost的集成方式——包括服务引用、端口注入、开发代理与 Docker 部署。读完你将掌握在 Aspire 编排体系下如何用标准 Angular CLI 命令驱动一个前端样例以及这些命令在仓库中是如何被配置、增强和接入编排的。一、样例定位Aspire 多语言前端生态中的 Angularplayground/AspireWithJavaScript是 Aspire 仓库中专门用于验证 JavaScript/前端技术栈与 Aspire 编排能力集成的演示区域其中AspireJavaScript.Angular目录承载了 Angular 版本的天气预报Weather前端样例。该目录本质上是一个由 Angular CLI 初始化的标准工程其 README.md 沿用了 Angular CLI 生成器自带的开发手册涵盖六大主题开发服务器Development server、代码脚手架Code scaffolding、构建Build、单元测试Running unit tests、端到端测试Running end-to-end tests与更多帮助Further help。但这份 README 描述的并非一个孤立的 Angular 工程——在 Aspire 场景中它由 AppHost.cs 统一编排。前端与后端AspireJavaScript.MinimalApi提供的weatherapi服务通过服务发现连接运行端口由编排器注入最终还能以 Docker 镜像形式发布。因此下文将逐节还原 README 的原始内容并用仓库源码展示其在 Aspire 环境下的真实落地形态。二、开发服务器ng serve与 Aspire 端口注入README 原文指出运行ng serve启动开发服务器访问http://localhost:4200/修改源文件后应用会自动热重载。这是 Angular 开发的核心循环CLI 内置 dev server 监听变更并即时刷新浏览器。不过在 Aspire 演示工程中开发服务器并非在 4200 固定端口裸跑而是被包装进了 npm 脚本并把端口交给 Aspire 注入。查看 package.json 中的 scripts 定义scripts: { ng: ng, start: run-script-os, start:win32: ng serve --port %PORT%, start:default: ng serve --port $PORT, build: ng build, watch: ng build --watch --configuration development, test: ng test }这里有三处关键设计跨平台端口注入start使用run-script-os工具按操作系统分发——Windows 上执行ng serve --port %PORT%其他平台执行ng serve --port $PORT端口号统一来自环境变量PORTPORT由编排器提供在 AppHost.cs 中Angular 应用通过AddJavaScriptApp注册并显式声明端口环境变量builder.AddJavaScriptApp(angular, ../AspireJavaScript.Angular, runScriptName: start) .WithReference(weatherApi) .WaitFor(weatherApi) .WithHttpEndpoint(env: PORT) .WithExternalHttpEndpoints() .PublishAsDockerFile();WithHttpEndpoint(env: PORT)意味着 Aspire 会分配一个空闲端口写入PORT环境变量start脚本再把它透传给ng serve --port从而避免端口冲突、实现自动化编排WithExternalHttpEndpoints()则将该端点暴露为外部可访问。Node 版本约束package.json的engines字段要求node 20.12这与 Dockerfile 中使用node:20作为构建基镜像保持一致。三、代码脚手架ng generate的用法README 原文指出运行ng generate component component-name生成新组件也可用ng generate directive|pipe|service|class|guard|interface|enum|module生成其他类型的构件。这对应 Angular CLI 的 Schematics 代码生成能力可生成组件、指令、管道、服务、类、守卫、接口、枚举与模块九类构件。在当前样例中可以看到实际生成结果src/app/下包含app.component.ts、app.component.html、app.component.css、app.component.spec.ts、app.config.ts与app.routes.tssrc/types/weatherForecast.ts 则是手写的 TypeScript 类型定义文件。值得注意当前组件采用standalone 模式见 app.component.ts 中的standalone: true与imports: [CommonModule, RouterOutlet]无需 NgModule 即可独立使用这也是现代 Angular 推荐写法。四、构建与产物ng build及 Docker 化部署README 原文指出运行ng build构建项目构建产物存放在dist/目录。ng build会执行 AOT 编译、Tree-shaking、资源内联与产物哈希等优化。在本样例中构建产物路径为dist/weather/browserAngular 21 默认输出布局该路径被 Dockerfile 直接引用# DisableDockerDetector Playground/demo application used for testing Aspire features FROM node:20 as build WORKDIR /app COPY package.json package.json COPY package-lock.json package-lock.json RUN npm install COPY . . RUN npm run build FROM nginx:alpine COPY --frombuild /app/default.conf.template /etc/nginx/templates/default.conf.template COPY --frombuild /app/dist/weather/browser /usr/share/nginx/html EXPOSE 80 CMD [nginx, -g, daemon off;]该 Dockerfile 采用典型的多阶段构建构建阶段基于node:20先复制package.json与package-lock.json执行npm install利用层缓存再复制全部源码并执行npm run build运行阶段基于nginx:alpine把构建产物dist/weather/browser拷贝到 Nginx 静态目录并将 Nginx 配置模板与默认端口 80 一同打包Nginx 模板default.conf.template使用环境变量渲染读取PORT监听端口并把/api/路径反向代理到天气 APIserver { listen ${PORT}; listen [::]:${PORT}; server_name localhost; access_log /var/log/nginx/server.access.log main; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass ${WEATHERAPI_HTTPS}; proxy_http_version 1.1; proxy_ssl_server_name on; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }try_files $uri $uri/ /index.html是 SPA 路由回退的关键浏览器直接刷新/detail这类前端路由时Nginx 会回退到index.html交给 Angular Router 处理。结合 AppHost 中的PublishAsDockerFile()整个 Angular 应用在发布时会被构建为上述 Nginx 容器镜像与weatherapi一起被 Aspire 编排部署。五、单元测试ng test与 KarmaREADME 原文指出运行ng test通过 Karma 执行单元测试。从 package.json 的devDependencies可以看到完整的测试工具链jasmine-core、karma、karma-chrome-launcher、karma-coverage、karma-jasmine、karma-jasmine-html-reporter以及类型定义types/jasmine——即 Karma 测试运行器 Jasmine 断言框架 Chrome 无头/有头执行器 覆盖率报告的标准组合。样例工程自带一个最小单测src/app/app.component.spec.ts 针对根组件AppComponent验证title等基础行为。执行npm test即可触发 Karma 启动浏览器运行全部*.spec.ts。六、端到端测试ng e2e的前置条件README 原文指出运行ng e2e通过所选平台执行端到端测试。使用该命令前需要先添加一个实现端到端测试能力的包。这是 Angular CLI 的一个既定约束ng e2e本身不捆绑任何 E2E 框架需要开发者自行安装 Cypress、Playwright 或 Protractor 等实现。本样例未配置具体的 E2E 依赖因此在 Aspire 演示场景中Angular 前端的验证以单元测试为主。若要在该项目中补充 E2E可按 Angular 官方指引自行引入对应测试包并编写测试配置。七、更多帮助ng helpREADME 原文指出获取更多 Angular CLI 帮助可运行ng help或查阅 Angular CLI 命令参考文档。ng help会在本地输出所有 CLI 命令的速览ng command --help则展示单个命令的参数细节。这在排查angular.json配置、构建目标或生成器选项时非常实用。八、源码视角Angular 前端如何与 Aspire 后端通信README 虽然只字未提 Aspire但仓库源码揭示了这个前端样例与编排体系的关键连接点——这也是本文档在实际项目中最核心的应用场景。1. 运行时数据请求根组件 app.component.ts 在构造函数中通过HttpClient请求相对路径api/weatherforecastconstructor(private http: HttpClient) { http.getWeatherForecasts(api/weatherforecast).subscribe({ next: result this.forecasts result, error: console.error }); }前端自身不关心后端地址只约定/api前缀具体转发由开发代理或生产环境网关完成。2. 开发阶段的代理proxy.conf.js 配置了 Angular dev server 的代理规则module.exports { /api: { target: process.env[WEATHERAPI_HTTPS] || process.env[WEATHERAPI_HTTP], secure: process.env[NODE_ENV] ! development }, };target优先取WEATHERAPI_HTTPS、回退到WEATHERAPI_HTTP——这两个环境变量正是 Aspire 通过WithReference(weatherApi)服务发现机制注入的连接信息与 AppHost 中builder.AddProjectProjects.AspireJavaScript_MinimalApi(weatherapi)对应。secure依据NODE_ENV决定是否校验 HTTPS 证书开发环境development下自动关闭校验。3. 编排层的依赖与顺序AppHost 中WaitFor(weatherApi)保证前端在天气 API 就绪后才启动WithReference(weatherApi)把后端的 HTTP 端点以WEATHERAPI_HTTP/WEATHERAPI_HTTPS形式注入前端进程环境。生产环境Nginx 容器则通过default.conf.template中的proxy_pass ${WEATHERAPI_HTTPS}完成同样的/api反向代理因此开发与生产采用了一致的“同源代理”模式规避了 CORS 问题。九、版本与兼容性说明README 开头注明工程由Angular CLI 17.0.7生成但仓库当前 package.json 中angular/*、angular/cli、angular-devkit/build-angular等均已升级到21.2.19typescript为~5.9.3且通过overrides字段固定了vite、webpack-dev-server、esbuild等传递依赖版本以消除供应链风险。这说明 README 中描述的 CLI 命令语义ng serve/ng generate/ng build/ng test/ng e2e/ng help在 Angular 21 中保持兼容但具体输出布局如dist/weather/browser与依赖版本以仓库当前锁定版本为准。十、小结AspireJavaScript.Angular的 README 是一份标准的 Angular CLI 工程手册而在 Aspire 仓库的语境下它实际上演示了一条完整的前端接入链路标准 CLI 开发命令serve/build/test→ 端口与连接信息由 Aspire 注入PORT / WEATHERAPI_*→ 服务发现关联后端WithReference→ Docker 化发布PublishAsDockerFile Nginx。读者若要在自己的 Aspire 应用中接入 Angular或其他 npm 前端可直接对照以下仓库资源复用编排声明AppHost.csAddJavaScriptAppWithHttpEndpoint(env: PORT)WithReferencePublishAsDockerFilenpm 脚本与端口注入package.json开发代理与后端连接proxy.conf.js生产容器方案Dockerfile 与 default.conf.template前端数据请求示例app.component.ts【免费下载链接】aspireAspire is the tool for code-first, extensible, observable dev and deploy.项目地址: https://gitcode.com/GitHub_Trending/as/aspire创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
在 .NET Aspire 中运行 Angular 前端样例：AspireJavaScript.Angular 开发工作流全解析
在 .NET Aspire 中运行 Angular 前端样例AspireJavaScript.Angular 开发工作流全解析【免费下载链接】aspireAspire is the tool for code-first, extensible, observable dev and deploy.项目地址: https://gitcode.com/GitHub_Trending/as/aspire本文以 Aspire 仓库中 AspireJavaScript.Angular/README.md 为骨架结合playground/AspireWithJavaScript多语言前端演示项目中的真实源码系统讲解该 Angular 天气应用从开发调试、代码生成、构建打包到单测/端到端测试的完整工作流并深入剖析其与 .NET Aspire 应用宿主AppHost的集成方式——包括服务引用、端口注入、开发代理与 Docker 部署。读完你将掌握在 Aspire 编排体系下如何用标准 Angular CLI 命令驱动一个前端样例以及这些命令在仓库中是如何被配置、增强和接入编排的。一、样例定位Aspire 多语言前端生态中的 Angularplayground/AspireWithJavaScript是 Aspire 仓库中专门用于验证 JavaScript/前端技术栈与 Aspire 编排能力集成的演示区域其中AspireJavaScript.Angular目录承载了 Angular 版本的天气预报Weather前端样例。该目录本质上是一个由 Angular CLI 初始化的标准工程其 README.md 沿用了 Angular CLI 生成器自带的开发手册涵盖六大主题开发服务器Development server、代码脚手架Code scaffolding、构建Build、单元测试Running unit tests、端到端测试Running end-to-end tests与更多帮助Further help。但这份 README 描述的并非一个孤立的 Angular 工程——在 Aspire 场景中它由 AppHost.cs 统一编排。前端与后端AspireJavaScript.MinimalApi提供的weatherapi服务通过服务发现连接运行端口由编排器注入最终还能以 Docker 镜像形式发布。因此下文将逐节还原 README 的原始内容并用仓库源码展示其在 Aspire 环境下的真实落地形态。二、开发服务器ng serve与 Aspire 端口注入README 原文指出运行ng serve启动开发服务器访问http://localhost:4200/修改源文件后应用会自动热重载。这是 Angular 开发的核心循环CLI 内置 dev server 监听变更并即时刷新浏览器。不过在 Aspire 演示工程中开发服务器并非在 4200 固定端口裸跑而是被包装进了 npm 脚本并把端口交给 Aspire 注入。查看 package.json 中的 scripts 定义scripts: { ng: ng, start: run-script-os, start:win32: ng serve --port %PORT%, start:default: ng serve --port $PORT, build: ng build, watch: ng build --watch --configuration development, test: ng test }这里有三处关键设计跨平台端口注入start使用run-script-os工具按操作系统分发——Windows 上执行ng serve --port %PORT%其他平台执行ng serve --port $PORT端口号统一来自环境变量PORTPORT由编排器提供在 AppHost.cs 中Angular 应用通过AddJavaScriptApp注册并显式声明端口环境变量builder.AddJavaScriptApp(angular, ../AspireJavaScript.Angular, runScriptName: start) .WithReference(weatherApi) .WaitFor(weatherApi) .WithHttpEndpoint(env: PORT) .WithExternalHttpEndpoints() .PublishAsDockerFile();WithHttpEndpoint(env: PORT)意味着 Aspire 会分配一个空闲端口写入PORT环境变量start脚本再把它透传给ng serve --port从而避免端口冲突、实现自动化编排WithExternalHttpEndpoints()则将该端点暴露为外部可访问。Node 版本约束package.json的engines字段要求node 20.12这与 Dockerfile 中使用node:20作为构建基镜像保持一致。三、代码脚手架ng generate的用法README 原文指出运行ng generate component component-name生成新组件也可用ng generate directive|pipe|service|class|guard|interface|enum|module生成其他类型的构件。这对应 Angular CLI 的 Schematics 代码生成能力可生成组件、指令、管道、服务、类、守卫、接口、枚举与模块九类构件。在当前样例中可以看到实际生成结果src/app/下包含app.component.ts、app.component.html、app.component.css、app.component.spec.ts、app.config.ts与app.routes.tssrc/types/weatherForecast.ts 则是手写的 TypeScript 类型定义文件。值得注意当前组件采用standalone 模式见 app.component.ts 中的standalone: true与imports: [CommonModule, RouterOutlet]无需 NgModule 即可独立使用这也是现代 Angular 推荐写法。四、构建与产物ng build及 Docker 化部署README 原文指出运行ng build构建项目构建产物存放在dist/目录。ng build会执行 AOT 编译、Tree-shaking、资源内联与产物哈希等优化。在本样例中构建产物路径为dist/weather/browserAngular 21 默认输出布局该路径被 Dockerfile 直接引用# DisableDockerDetector Playground/demo application used for testing Aspire features FROM node:20 as build WORKDIR /app COPY package.json package.json COPY package-lock.json package-lock.json RUN npm install COPY . . RUN npm run build FROM nginx:alpine COPY --frombuild /app/default.conf.template /etc/nginx/templates/default.conf.template COPY --frombuild /app/dist/weather/browser /usr/share/nginx/html EXPOSE 80 CMD [nginx, -g, daemon off;]该 Dockerfile 采用典型的多阶段构建构建阶段基于node:20先复制package.json与package-lock.json执行npm install利用层缓存再复制全部源码并执行npm run build运行阶段基于nginx:alpine把构建产物dist/weather/browser拷贝到 Nginx 静态目录并将 Nginx 配置模板与默认端口 80 一同打包Nginx 模板default.conf.template使用环境变量渲染读取PORT监听端口并把/api/路径反向代理到天气 APIserver { listen ${PORT}; listen [::]:${PORT}; server_name localhost; access_log /var/log/nginx/server.access.log main; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass ${WEATHERAPI_HTTPS}; proxy_http_version 1.1; proxy_ssl_server_name on; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }try_files $uri $uri/ /index.html是 SPA 路由回退的关键浏览器直接刷新/detail这类前端路由时Nginx 会回退到index.html交给 Angular Router 处理。结合 AppHost 中的PublishAsDockerFile()整个 Angular 应用在发布时会被构建为上述 Nginx 容器镜像与weatherapi一起被 Aspire 编排部署。五、单元测试ng test与 KarmaREADME 原文指出运行ng test通过 Karma 执行单元测试。从 package.json 的devDependencies可以看到完整的测试工具链jasmine-core、karma、karma-chrome-launcher、karma-coverage、karma-jasmine、karma-jasmine-html-reporter以及类型定义types/jasmine——即 Karma 测试运行器 Jasmine 断言框架 Chrome 无头/有头执行器 覆盖率报告的标准组合。样例工程自带一个最小单测src/app/app.component.spec.ts 针对根组件AppComponent验证title等基础行为。执行npm test即可触发 Karma 启动浏览器运行全部*.spec.ts。六、端到端测试ng e2e的前置条件README 原文指出运行ng e2e通过所选平台执行端到端测试。使用该命令前需要先添加一个实现端到端测试能力的包。这是 Angular CLI 的一个既定约束ng e2e本身不捆绑任何 E2E 框架需要开发者自行安装 Cypress、Playwright 或 Protractor 等实现。本样例未配置具体的 E2E 依赖因此在 Aspire 演示场景中Angular 前端的验证以单元测试为主。若要在该项目中补充 E2E可按 Angular 官方指引自行引入对应测试包并编写测试配置。七、更多帮助ng helpREADME 原文指出获取更多 Angular CLI 帮助可运行ng help或查阅 Angular CLI 命令参考文档。ng help会在本地输出所有 CLI 命令的速览ng command --help则展示单个命令的参数细节。这在排查angular.json配置、构建目标或生成器选项时非常实用。八、源码视角Angular 前端如何与 Aspire 后端通信README 虽然只字未提 Aspire但仓库源码揭示了这个前端样例与编排体系的关键连接点——这也是本文档在实际项目中最核心的应用场景。1. 运行时数据请求根组件 app.component.ts 在构造函数中通过HttpClient请求相对路径api/weatherforecastconstructor(private http: HttpClient) { http.getWeatherForecasts(api/weatherforecast).subscribe({ next: result this.forecasts result, error: console.error }); }前端自身不关心后端地址只约定/api前缀具体转发由开发代理或生产环境网关完成。2. 开发阶段的代理proxy.conf.js 配置了 Angular dev server 的代理规则module.exports { /api: { target: process.env[WEATHERAPI_HTTPS] || process.env[WEATHERAPI_HTTP], secure: process.env[NODE_ENV] ! development }, };target优先取WEATHERAPI_HTTPS、回退到WEATHERAPI_HTTP——这两个环境变量正是 Aspire 通过WithReference(weatherApi)服务发现机制注入的连接信息与 AppHost 中builder.AddProjectProjects.AspireJavaScript_MinimalApi(weatherapi)对应。secure依据NODE_ENV决定是否校验 HTTPS 证书开发环境development下自动关闭校验。3. 编排层的依赖与顺序AppHost 中WaitFor(weatherApi)保证前端在天气 API 就绪后才启动WithReference(weatherApi)把后端的 HTTP 端点以WEATHERAPI_HTTP/WEATHERAPI_HTTPS形式注入前端进程环境。生产环境Nginx 容器则通过default.conf.template中的proxy_pass ${WEATHERAPI_HTTPS}完成同样的/api反向代理因此开发与生产采用了一致的“同源代理”模式规避了 CORS 问题。九、版本与兼容性说明README 开头注明工程由Angular CLI 17.0.7生成但仓库当前 package.json 中angular/*、angular/cli、angular-devkit/build-angular等均已升级到21.2.19typescript为~5.9.3且通过overrides字段固定了vite、webpack-dev-server、esbuild等传递依赖版本以消除供应链风险。这说明 README 中描述的 CLI 命令语义ng serve/ng generate/ng build/ng test/ng e2e/ng help在 Angular 21 中保持兼容但具体输出布局如dist/weather/browser与依赖版本以仓库当前锁定版本为准。十、小结AspireJavaScript.Angular的 README 是一份标准的 Angular CLI 工程手册而在 Aspire 仓库的语境下它实际上演示了一条完整的前端接入链路标准 CLI 开发命令serve/build/test→ 端口与连接信息由 Aspire 注入PORT / WEATHERAPI_*→ 服务发现关联后端WithReference→ Docker 化发布PublishAsDockerFile Nginx。读者若要在自己的 Aspire 应用中接入 Angular或其他 npm 前端可直接对照以下仓库资源复用编排声明AppHost.csAddJavaScriptAppWithHttpEndpoint(env: PORT)WithReferencePublishAsDockerFilenpm 脚本与端口注入package.json开发代理与后端连接proxy.conf.js生产容器方案Dockerfile 与 default.conf.template前端数据请求示例app.component.ts【免费下载链接】aspireAspire is the tool for code-first, extensible, observable dev and deploy.项目地址: https://gitcode.com/GitHub_Trending/as/aspire创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考