如何无需ng serve，用纯JavaScript运行含mat-select的Angular项目

我之前搭了个Angular + Material的项目，创建步骤很常规：

$ mkdir angular-material-select
$ cd angular-material-select
$ git clone git@github.com:napolev/angular-material-select.git .
$ npm install
$ ng serve

项目里用到了Material的<mat-select>下拉选择组件，现在我想跳开Angular的项目构建流程——不用ng serve、不用打包，就像AngularJS（Angular 1）那样，写一个单独的HTML文件，直接在浏览器里打开就能用这个组件。

直接可用的单页实现方案 #

下面是完整的HTML代码，把所有依赖、Angular配置和组件逻辑都整合在一起了，保存成.html文件直接打开就能运行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>纯HTML用MatSelect</title>
    <!-- 引入Material样式和字体依赖 -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css">
    
    <!-- Angular核心及必要依赖库 -->
    <script src="https://unpkg.com/core-js@2.5.4/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.26/dist/zone.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.47/dist/system.src.js"></script>
    
    <!-- SystemJS配置 + Angular应用逻辑 -->
    <script>
        // 配置SystemJS加载Angular的UMD模块
        System.config({
            map: {
                '@angular/core': 'https://unpkg.com/@angular/core@5.2.11/bundles/core.umd.js',
                '@angular/common': 'https://unpkg.com/@angular/common@5.2.11/bundles/common.umd.js',
                '@angular/compiler': 'https://unpkg.com/@angular/compiler@5.2.11/bundles/compiler.umd.js',
                '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@5.2.11/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@5.2.11/bundles/platform-browser-dynamic.umd.js',
                '@angular/material': 'https://unpkg.com/@angular/material@5.2.11/bundles/material.umd.js',
                '@angular/cdk': 'https://unpkg.com/@angular/cdk@5.2.11/bundles/cdk.umd.js',
                '@angular/animations': 'https://unpkg.com/@angular/animations@5.2.11/bundles/animations.umd.js',
                '@angular/animations/browser': 'https://unpkg.com/@angular/animations@5.2.11/bundles/animations-browser.umd.js',
                'rxjs': 'https://unpkg.com/rxjs@5.5.11/bundles/Rx.js'
            },
            packages: {
                '.': { defaultExtension: 'js' }
            }
        });

        // 定义组件和模块（内联写法，不用单独文件）
        System.register('app', [], function(_export, _context) {
            return {
                setters: [],
                execute: function() {
                    _export('AppComponent', AppComponent);
                    _export('AppModule', AppModule);
                }
            };
        });

        // 组件逻辑
        function AppComponent() {
            this.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado'];
        }
        AppComponent.annotations = [
            new ng.core.Component({
                selector: 'my-app',
                template: `
                    <mat-form-field>
                        <mat-select placeholder="State">
                            <mat-option>None</mat-option>
                            <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                `
            })
        ];

        // 根模块配置
        function AppModule() {}
        AppModule.annotations = [
            new ng.core.NgModule({
                imports: [
                    ng.platformBrowser.BrowserModule,
                    ng.platformBrowser.BrowserAnimationsModule,
                    ng.material.MatSelectModule,
                    ng.material.MatFormFieldModule
                ],
                declarations: [AppComponent],
                bootstrap: [AppComponent]
            })
        ];

        // 启动Angular应用
        System.import('@angular/platform-browser-dynamic').then(function(platform) {
            platform.platformBrowserDynamic().bootstrapModule(AppModule);
        }).catch(err => console.error('加载出错:', err));
    </script>
</head>
<body>
    <my-app>加载中...</my-app>
</body>
</html>

关键细节说明 #

• 这里用SystemJS来加载Angular的UMD格式模块，不需要任何构建工具，浏览器直接就能解析
• 必须引入zone.js和core-js来支持Angular的运行时特性
• 样式部分不能少：Material的主题样式、Roboto字体和Material Icons是组件正常显示的前提
• 内联了组件和模块的定义，整个应用逻辑都在一个HTML文件里，不需要拆分多个JS文件

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