新手求助：能否在非Node.js环境的普通HTML页面使用Angular Material组件？

嘿，作为Angular新手，你这个需求其实是可以实现的！虽然大部分教程都是基于Node.js和npm的，但Angular确实支持通过UMD包（通用模块定义）在纯HTML页面中运行，Angular Material也同样提供了UMD版本的文件。下面我给你一步步拆解怎么做：

一、需要引入的CDN资源 #

首先得在HTML的<head>里加载所有必要的依赖，注意Angular和Angular Material的版本必须严格匹配（比如都用16.x版本），否则会出现兼容性问题：

<!-- 基础依赖：Zone.js（Angular变更检测必需） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.13.3/zone.min.js"></script>

<!-- Angular核心UMD包 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/16.2.10/core.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/16.2.10/common.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/16.2.10/forms.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/16.2.10/platform-browser.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/16.2.10/platform-browser-dynamic.umd.min.js"></script>

<!-- Angular CDK（Material组件的基础依赖） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-cdk/16.2.10/cdk.umd.min.js"></script>

<!-- Angular Material相关组件的UMD包 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/16.2.10/material.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/16.2.10/material-input.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/16.2.10/material-button.umd.min.js"></script>

<!-- Angular Material的样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/16.2.10/angular-material.min.css">
<!-- 还需要引入Material Icons字体（如果用到图标） -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

二、编写Angular应用代码 #

在HTML的<body>里，你需要定义组件模板，然后写JS代码来创建Angular模块和组件：

<body>
  <!-- Angular应用的根组件模板 -->
  <my-app></my-app>

  <script>
    // 导入Angular和Material的模块
    const { NgModule, Component } = ng.core;
    const { BrowserModule } = ng.platformBrowser;
    const { ReactiveFormsModule, FormsModule } = ng.forms;
    const { MatFormFieldModule, MatInputModule, MatButtonModule } = ng.material;

    // 创建根组件
    @Component({
      selector: 'my-app',
      template: `
        <mat-form-field appearance="fill">
          <mat-label>输入你的名字</mat-label>
          <input matInput [(ngModel)]="username" required>
          <mat-error>名字不能为空！</mat-error>
        </mat-form-field>
        <button mat-raised-button color="primary" (click)="greet()">打招呼</button>
        <p *ngIf="username">你好，{{ username }}！</p>
      `
    })
    class AppComponent {
      username = '';

      greet() {
        alert(`嘿，${this.username}！`);
      }
    }

    // 创建Angular模块，导入所需的Material模块
    @NgModule({
      imports: [
        BrowserModule,
        FormsModule, // 模板驱动表单必需
        ReactiveFormsModule, // 响应式表单可选
        MatFormFieldModule,
        MatInputModule,
        MatButtonModule
      ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    class AppModule {}

    // 引导Angular应用
    ng.platformBrowserDynamic.bootstrapModule(AppModule);
  </script>
</body>

三、注意事项 #

• 版本匹配：一定要确保Angular核心、CDK、Material的版本完全一致，否则会出现各种奇怪的错误。
• 适用场景：这种方式适合快速原型验证、小型演示项目，如果是大型应用，还是建议使用Node.js+Angular CLI，因为CDN方式无法进行构建优化、依赖版本管理也比较麻烦。
• 组件覆盖：上面的示例只引入了输入框、按钮组件，如果你需要其他Material组件（比如mat-select、mat-checkbox），要额外引入对应的UMD包（比如material-select.umd.min.js）。
• 样式兼容性：Angular Material的样式依赖Google的Material Icons字体，所以记得引入对应的字体文件，否则图标会显示异常。

内容的提问来源于stack exchange，提问作者hbourchi