Angular 17 SSR 浏览器和服务器的独立 tsconfig

Question

在最新版本的 Angular 中，只有 tsconfig.app.json 继承自 tsconfig.json。该文件用于浏览器和服务器。 不再有单独的 tsconfig.server.json。

我安装了一个使用

document

对象的模块，SSR 不支持该模块。为了绕过这个，我创建了一个存根模块，我想在 tsconfig 中替换它，简而言之，如下所示：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "paths": {
      "ng2-dragula": [
        "./src/app/stubs/dragula/dragula.module"
      ]
    },
  },
}

因此浏览器将使用真实模块，但 SSR 使用存根模块。 但是，我无法指定为 SSR 使用单独的 tsconfig。

我使用最新的 Angular 版本 17.2。

Answer 1

无法为应用程序的服务器版本使用单独的

tsconfig.json

，因为不再有单独的服务器版本。但这似乎是一个 A/B 问题，您想要做的是让您的应用程序使用 ng2-dragula 与 SSR 一起工作。

您可以按照以下方法执行此操作。 如果您使用导入

DragulaModule

的独立组件，您可以将它们包装到

@defer

块中，以便 Angular 将它们提取到不会在服务器上运行的单独块中。

示例：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WithDragulaComponent],
  template: `
    @defer{
      <app-with-dragula/>
    } @error {
      Something went wrong :(
    }`,
  styleUrl: './app.component.scss'
})
export class AppComponent {}

@Component({
  selector: 'app-with-dragula',
  standalone: true,
  imports: [DragulaModule],
  template: `
    <div class="container" dragula="DRAGULA_FACTS">
      <div>You can move these elements between these two containers</div>
      <div>Moving them anywhere else isn't quite possible</div>
      <div>There's also the possibility of moving elements around in the same container, changing their position</div>
    </div>
  `,
  styleUrl: './with-dragula.component.scss'
})
export class WithDragulaComponent {

}

不要忘记向 main.ts 添加另一个

ng2-dragula required

解决方法：

(window as any).global = window;