如何在Angular组件中不使用CLI少用代码？

Question

我有一个应用程序需要配置和使用less来实现动态主题。问题在于我们没有使用angular-cli，这里的配置有点奇怪，因此我们要手动引导angular模块。

以下是应用程序的配置：

package.json

      "dependencies": {
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "@angular/upgrade": "^4.0.0",
        "@angular/animations": "^4.0.1",
        "bootstrap": "^3.3.7",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.8",
        "rxjs": "^5.0.1",
        "systemjs": "0.19.39",
        "zone.js": "^0.8.4"
      },
and so on..

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { ThemeModule } from "./theme.module";

window.appnamespace.platform = platformBrowserDynamic();
window.appnamespace.AppModule = AppModule
window.appnamespace.ThemeModule = ThemeModule;

theme.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { ThemeComponent } from "./theme.component";
import { ThemeToolbar } from "./Themes/theme-toolbar/theme-toolbar.component";
import { ThemePreview } from "./Themes/theme-preview/theme-preview.component";
import { ThemeService } from "./services/themeManagement.service";

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [
    ThemeComponent,
    ThemeToolbar,
    ThemePreview,
    SetFocusDirective
  ],
  providers: [ThemeService, LocalizeThemeService, CommonService],
  bootstrap: [ThemeComponent]
})

export class ThemeModule { }

它的组件：

@Component({
  selector: "my-theme",
  templateUrl: "../js/divdrawer/Themes/theme.template.html"
})
export class ThemeComponent implements OnInit {
  //
}

您可以通过JavaScript来启动应用程序，如下所示：

window.appnamespace.platform.bootstrapModule(window.appnamespace.ThemeModule);

theme.preview组件

@Component({
  selector: "theme-preview",
  templateUrl: "../theme-preview/theme-preview.component.template.html",
  styleUrls: ['../theme-preview/theme-style.less']
})

export class ThemePreview implements OnInit {
  // some code
}

theme-style.less：包含CSS样式

@import "./theme-variable.less";

// some css

theme-variable.less：包含了less变量。

@header-bg        :red;
@badge-title-bg   : #ddd;

我希望在我的主题预览组件中使用更少的变量和样式来实现动态更改主题。

我该如何仅在主题组件中配置less?

- J.K.A.

---

如果你不使用cli，那么你用什么来进行转译、构建等操作呢？System.js？Webpack？ - Yvan

好的，我看到你的 package.json 中有 system.js。你需要使用一个为 system 写的插件来加载 less 文件。像这个：https://github.com/systemjs/plugin-less。这个包有很好的文档，我认为你可以轻松地复制他们的示例。 - Yvan

@Yvan：Systemjs和Webpack - J.K.A.

所以，你需要一个插件来加载less，systemjs推荐使用这个插件https://github.com/systemjs/plugin-less。 - Yvan

Answer 1

在你的@Component中，属性styleUrl包含需要编译成单个CSS文件的所有样式文件。不过这是由Angular CLI完成的。

如果您打算使用CLI从less生成CSS，请转到名为angular.json的文件，并将schematics.@schematics/angular:component.style的值更改为'less'。

然而，这可能不能帮助您进行动态（运行时）主题设置。对于动态主题设置，

1. 使用@import语句在任意1个主文件中导入所有less文件
2. 对于服务器端编译，当请求CSS时使用node.js server和less.js将其编译。因此，less.js将成为您的node.js项目的生产依赖项。
3. 对于客户端编译，将创建的主less文件放置在html的部分中，如下所示。 <link href="main.less" rel="stylesheet" type="text/less"/> 接下来，在Angular应用程序的main.ts中导入less.js或在HTML body中使用less.js脚本标签。

在@Component中，可以删除styleUrls，因为它没有用处。

此外，所有与组件相关的样式都需要封装在特定于组件的1个类中（HTML和less）。这将确保您实现与Angular CLI相同的行为。

希望这有所帮助。如有其他具体问题，请留言。

- Kumar Sidharth