Angular 17 SSR Отдельный tsconfig для браузера и сервера
В последних версиях 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 — модуль-заглушку. Однако я не могу указать использование отдельного tsconfig для SSR.
Я использую последнюю версию Angular 17.2.
У меня есть app/app.server.config.ts
Итак, идея состоит в том, чтобы предоставить ваш модуль-заглушку в качестве перезаписи.
Если вы имеете в виду, что я использую { provide: DraguleModule, useClass: StubDragulaModule } - тогда я все равно импортирую DraguleModule для использования в качестве параметра provide. И я все еще получаю ошибку document is not defined.
Вот почему я хочу заменить его на более высоком уровне - в tsconfig.
Ответы 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 {
}
Не забудьте добавить еще один обходной путь ng2-dragula к main.ts:
(window as any).global = window;
1. Пришлось дополнительно установить дополнительные пакеты: dragula и @types/dragula. 2. Я добавил <script>var global = global || window;</script> в index.html. У меня не сработало решение с main.ts. 3. Модули-заглушки больше не нужны. 4. При настройке по умолчанию appConfig расширяется на serverConfig. В данном случае это не сработает. Для этого я создал browserConfig (файл app.config.browser.ts), чтобы разделить поставщиков для browser и server. browserConfig расширяет appConfig и дополнительно предоставляет DragulaModule.forRoot(). Используйте его в main.ts
У вас нет файла server.config.ts..?