Question

我有一个ts这样的文件

export const environment = {
  production: false,
  profile : './test/test.css'
};

我想导入environment.profile并设置它以便我可以在StyleUrls中使用它

import { Component, OnInit } from '@angular/core';
import { TranslateService } from "@ngx-translate/core";
import {environment} from "../../environments/environment";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: [environment.profile]
})

但我收到错误：

错误：找不到模块“。” main.bundle.js：250：62 webpackMissingModule http://localhost:4200/main.bundle.js:250:62 ../../../../../src/app/header/header.component.ts http://localhost:4200/main.bundle.js:250:29 webpack_require http://localhost:4200/inline.bundle.js:55:12 ../../../../../src/app/app.module.ts http://localhost:4200/main.bundle.js:71:83 webpack_require http://localhost:4200/inline.bundle.js:55:12 ../../../../../src/main.ts http://localhost:4200/main.bundle.js:291:74 webpack_require http://localhost:4200/inline.bundle.js:55:12 [2] http://localhost:4200/main.bundle.js:309:18 webpack_require http://localhost:4200/inline.bundle.js:55:12 webpackJsonpCallback http://localhost:4200/inline.bundle.js:26:23 http://localhost:4200/main.bundle.js:1:1 [WDS]警告编译。 vendor.bundle.js：13428：10 ./src/app/header/header.component.ts 32：17-45严重依赖：请求依赖是表达式vendor.bundle.js：13493：4

我不知道如何修复它可以有人帮助我

Answer 1

因为你的变量'auto'的价值。

请查看它是否指的是您的css的确切路径或将styleUrl的路径指定为String。

如果我误解了你的问题，请纠正我。

--------------------- UPDATE --------------------

根据评论中的讨论，我建议使用基于类而不是Const的方法。

因为Const在组件的构造函数中调用时没有返回任何内容，并且在ngOnInit（）中返回正确的值。

https://www.youtube.com/watch?v=uq4kLWPfosU

以下是我提到的新波士顿Angular教程的视频链接。在那里，他使用名为environment.profile的类来存储各种细节，例如 MAIN_HEADING 等。

因此，据我所知，这将是一种更清洁的方法来解决您的问题。

Answer 2

我正在解决同样的问题。

基本上，你不能直接在你的styleUrls中使用表达式，这就是这个日志告诉你的。

严重依赖：依赖的请求是表达式 vendor.bundle.js：13493：4

要修复它，你可以在styleUrls里面的字符串中使用插值，就像这样。

@Component {
  ……
  styleUrls: `${environment.profile}`
}

请注意，我的调查在此变量被解释为通配符时停止，因此将所有文件映射到main.js内变量的同一级别。

如果我可以解决通配符问题，我会更新我的答案！

如何在Angular 2中为StyleUrls设置变量

2 个答案: