Render2 не работает в базовом проекте Angular ⇐ CSS

[Anonymous]

У меня есть угловое приложение angular-tour-of-heroes со следующей структурой:

источник -> приложение -> ваш компонент ->ваш-компонент.компонент.html ->ваш-компонент.компонент.less ->ваш-компонент.comComponent.ts ->default.less ->custom.less ->app.comComponent.html ->app.comComponent.ts ->app.module.ts ->app-routing.module.ts ->style-manager.service.ts Теперь я поделюсь файлами:

app.comComponent.html

app.module.ts

// src/app/app.module.ts импортировать { BrowserModule } из @angular/platform-browser; импортировать { NgModule } из '@angular/core'; импортировать { AppRoutingModule } из './app-routing.module'; импортировать {AppComponent} из './app.comComponent'; импортировать {YourComponent} из './ваш-компонент/ваш-компонент.компонент'; @NgModule({ декларации: [ AppComponent, ВашКомпонент ], импорт: [ Браузерный модуль, Модуль AppRoutingModule ], провайдеры: [], начальная загрузка: [AppComponent] }) класс экспорта AppModule { } angular.json

{ "стили": [ "src/styles.less", "src/app/ваш-компонент/default.less", "src/app/ваш-компонент/custom.less"] } style-manager.service.ts

// src/app/common_modules/common_services/style-manager.service.ts import { Injectable, Renderer2, RendererFactory2 } из '@angular/core'; @Инъекционный({ предоставлено: 'корень' }) класс экспорта StyleManagerService { частный рендерер: Renderer2; частные добавленные таблицы стилей: HTMLLinkElement[] = []; конструктор (rendererFactory: RendererFactory2) { this.renderer = rendererFactory.createRenderer(null, null); } addStylesheets (ссылки: строка []) { link.forEach(ссылка => { const styleLink = this.renderer.createElement('link'); this.renderer.setAttribute(styleLink, 'rel', 'таблица стилей'); this.renderer.setAttribute(styleLink, «тип», «текст/css»); this.renderer.setAttribute(styleLink, 'href', 'custom.less'); this.renderer.setAttribute(styleLink, 'app-dynamic-style', 'true'); this.renderer.appendChild(document.head, styleLink); this.addedStylesheets.push(styleLink); }); } удалитьStylesheets() { // Удаляем все динамически добавленные элементы стиля this.addedStylesheets.forEach(ссылка => { this.renderer.removeChild(document.head, ссылка); }); this.addedStylesheets = []; } } ваш-компонент.компонент.ts

// src/app/ваш-компонент/ваш-компонент.comComponent.ts import { Component, OnInit, OnDestroy } из '@angular/core'; импортировать { StyleManagerService } из '../style-manager.service'; @Компонент({ селектор: 'приложение-ваш-компонент', templateUrl: './ваш-компонент.компонент.html', styleUrls: ['./default.less'] // Использовать стили по умолчанию по умолчанию }) класс экспорта YourComponent реализует OnInit, OnDestroy { конструктор (частный styleManager: StyleManagerService) {} ngOnInit() { // Некоторое условие для определения, какой файл Less загружать константное условие = Истина; // Измените это условие по мере необходимости если (условие) { // Загружаем пользовательский файл Less this.styleManager.addStylesheets(['./ваш-компонент/custom.less']); } } ngOnDestroy() { // Удалить динамически добавленные таблицы стилей при уничтожении компонента this.styleManager.removeStylesheets(); } } ваш-компонент.html Ваш компонент работает!

default.less

p{ цвет: бирюзовый; } custom.less

p{ цвет: желтый; } Я попробовал приведенный выше код и сообщил, что при выполнении ng service я получаю ошибку 404 для файла custom.less. Может кто-нибудь помочь мне, что и где я делаю не так