Angular Сервер универсальной платформы Первоначально не показывает некоторые стили css компонентов - PullRequest
Новая
       81

Angular Сервер универсальной платформы Первоначально не показывает некоторые стили css компонентов

0 голосов
/ 07 августа 2020

Некоторые стили компонентов в моем angular универсальном приложении не работают, пока приложение не загрузится полностью.

Ниже вы можете видеть, что html, исходящий из AppServerModuleNgFactory , не будет связан на его css, потому что HTML не включает тот же шаблон, что и везде (serverApp)

Как я могу получить html, исходящий с сервера, как _ngcontent-serverApp-... вместо _ngcontent-s как css ожидает ???

Рендеринг, отправленный с server.ts (AppServerModuleNgFactory)

css: .copy[_ngcontent-serverApp-c16]

html: <div _ngcontent-sc16="" class="copy">

После загрузки приложения (предварительная загрузка завершена)

css: .copy[_ngcontent-serverApp-c16]

html: <div _ngcontent-serverapp-c16="" class="copy">

Единственное упоминание serverApp было в app.module.ts 

imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    PrebootModule.withConfig({ appRoot: 'app-root' }),
    ...
]

browser.d.ts 

export declare class BrowserModule {
    constructor(parentModule: BrowserModule | null);
    /**
     * Configures a browser-based app to transition from a server-rendered app, if
     * one is present on the page.
     *
     * @param params An object containing an identifier for the app to transition.
     * The ID must match between the client and server versions of the app.
     * @returns The reconfigured `BrowserModule` to import into the app's root `AppModule`.
     */
    static withServerTransition(params: {
        appId: string;
    }): ModuleWithProviders<BrowserModule>;
}

Я думаю, что этот файл комментарии говорят мне, что именно не так, но я не знаю, что делать с этой информацией. Идентификатор должен совпадать между клиентской и серверной версиями приложения.

1 Ответ

0 голосов
/ 16 августа 2020

Я не думаю, что безопасно использовать атрибуты, генерируемые angular, используйте только класс .copy. Если вам нужно более подробное правило c, вы можете получить его из своего html: 

CSS: .copy{}    
HTML: <div class="copy"></div>
        
CSS: .copy{}    
CSS: .copy2{} // will be triggered only if condition is true
HTML: <div class="copy" [class.copy2]="condition"></div>
...