Angular 17 SSR集成Ngx-Editor报错求助：Unexpected token ':'

1. 配置Vite服务器端排除ngx-editor依赖 #

在项目根目录的server.ts文件中，修改defineServerConfig，添加external配置，告诉Vite在服务器端构建时跳过ngx-editor的打包，由客户端处理：

import { defineServerConfig } from '@angular/build';

export default defineServerConfig({
  external: ['ngx-editor'],
});

2. 动态导入编辑器组件（避免服务器端加载） #

将封装的EditorComponent改为仅在浏览器环境下动态加载ngx-editor相关模块：

import { Component, Inject, PLATFORM_ID, OnInit, OnDestroy } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-editor',
  standalone: true,
  template: `
    <div *ngIf="isBrowser">
      <ngx-editor [editor]="editor" [(ngModel)]="content"></ngx-editor>
    </div>
  `,
})
export class EditorComponent implements OnInit, OnDestroy {
  isBrowser = false;
  editor?: any;
  content = '';

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    this.isBrowser = isPlatformBrowser(this.platformId);
    if (this.isBrowser) {
      // 动态导入ngx-editor核心模块
      import('ngx-editor').then(({ Editor }) => {
        this.editor = new Editor();
      });
      // 导入编辑器样式
      import('ngx-editor/style.css');
    }
  }

  ngOnDestroy() {
    if (this.isBrowser && this.editor) {
      this.editor.destroy();
    }
  }
}

3. 在客户端配置中注册ngx-editor模块 #

修改app.config.ts，仅在客户端环境下注册NgxEditorModule：

import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { isPlatformBrowser } from '@angular/common';
import { inject } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    // 仅在客户端注入NgxEditorModule
    ...(isPlatformBrowser(inject(PLATFORM_ID)) ? [importProvidersFrom(import('ngx-editor').then(m => m.NgxEditorModule))] : [])
  ]
};

4. 路由懒加载（可选兜底方案） #

如果上述配置仍有问题，将编辑器组件通过路由懒加载，确保仅在客户端加载：
修改app.routes.ts：

import { Routes } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';
import { inject } from '@angular/core';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('./editor/editor.component').then(m => m.EditorComponent),
    // 仅允许浏览器环境访问该路由
    canActivate: [() => isPlatformBrowser(inject(PLATFORM_ID))]
  }
];

同时将app.component.html改为<router-outlet></router-outlet>。

验证操作 #

执行npm run clean（若未配置该命令则手动删除node_modules和dist目录），重新执行npm install，最后启动SSR服务npm run dev:ssr验证错误是否消除。

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