如何将AngularJS 2（TypeScript）单页应用集成至WordPress主题页面？

没问题！我来一步步教你把用TypeScript开发的Angular 2+应用集成到已有的WordPress主题里，完全不用换主题，步骤其实很清晰：

1. 先准备好编译后的Angular应用文件 #

Angular不像AngularJS 1那样可以直接跑源码，必须先完成编译。在你的Angular项目根目录下，运行生产环境构建命令：

ng build --prod

这个命令会默认开启AOT编译，生成优化后的文件，全部放在项目的dist/文件夹里。你会看到类似main.js、polyfills.js、styles.css、runtime.js、vendor.js这些文件，这些就是我们要用到的核心资源。

2. 将编译文件放到WordPress主题目录 #

打开你的WordPress主题文件夹（一般路径是wp-content/themes/你的主题名称/），新建一个专门的文件夹，比如叫angular-app，然后把dist/里的所有文件都复制到这个文件夹里。

3. 在WordPress中引入Angular资源 #

为了正确加载Angular的资源，避免和主题其他脚本冲突，我们用WordPress的官方函数来注册和加载这些文件。打开主题的functions.php，添加以下代码：

function enqueue_angular_app_assets() {
    // 只在指定页面加载Angular资源，这里替换成你的页面slug或ID
    if (is_page('angular-integration-page')) {
        // 加载Angular的样式文件
        wp_enqueue_style('angular-app-styles', get_template_directory_uri() . '/angular-app/styles.css', array(), '1.0.0');
        
        // 按顺序加载JS文件（Angular对加载顺序有要求，别乱换）
        wp_enqueue_script('angular-runtime', get_template_directory_uri() . '/angular-app/runtime.js', array(), '1.0.0', true);
        wp_enqueue_script('angular-polyfills', get_template_directory_uri() . '/angular-app/polyfills.js', array(), '1.0.0', true);
        wp_enqueue_script('angular-vendor', get_template_directory_uri() . '/angular-app/vendor.js', array(), '1.0.0', true);
        wp_enqueue_script('angular-main', get_template_directory_uri() . '/angular-app/main.js', array(), '1.0.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_angular_app_assets');

这里的is_page('angular-integration-page')要替换成你要嵌入Angular的页面的slug或者ID，确保只有这个页面会加载Angular资源，不影响其他页面的性能。

4. 在WordPress页面中添加Angular根节点 #

编辑你指定的那个页面，在页面内容里添加Angular应用的根组件标签。如果你用的是Angular默认的项目结构，根组件的选择器是<app-root></app-root>，直接把这个标签插入到页面的合适位置就行。如果你的根组件自定义了选择器，就换成你自己的，比如<my-custom-app></my-custom-app>。

5. 处理Angular路由冲突（如果你的应用带路由） #

如果你的Angular应用是带路由的单页应用，要避免和WordPress的 permalink 冲突。最简单的办法是开启Angular的哈希路由：
打开Angular项目的app-routing.module.ts，修改路由配置，添加useHash: true：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这样Angular的路由会变成你的WordPress页面URL/#/angular-route的形式，不会被WordPress的路由规则拦截，完美解决冲突。

6. 调用WordPress数据（如果需要） #

如果你的Angular应用需要获取WordPress的内容，直接用WordPress自带的REST API就行。比如要获取文章列表，在Angular里发起GET请求到https://你的站点域名/wp-json/wp/v2/posts，就能拿到结构化的文章数据，不需要额外配置（WordPress默认开启REST API）。

一些额外注意事项 #

• 每次更新Angular应用后，都要重新运行ng build --prod，然后把新的dist/文件替换到WordPress主题的angular-app文件夹里。
• 记得更新functions.php里资源的版本号（比如把1.0.0改成1.0.1），避免浏览器缓存旧的资源文件。
• 如果遇到样式冲突，可以给Angular根组件添加一个独特的类名，然后用:host选择器在Angular的组件样式里隔离样式，比如：

:host(.angular-app-container) {
  /* 这里写你的样式，只会作用于Angular应用内部 */
}

然后把根节点改成<app-root class="angular-app-container"></app-root>。

内容的提问来源于stack exchange，提问作者João Lourenço