Question

我具有以下文件结构：

子块是一个继承块组件并共享相同的html文件和scss文件的组件：

/src/
  app/
  components/
    block/
      block.html
      block.scss
      block.ts
      sub-block.ts

当我运行应用程序时，它报告错误：

@Component({
    selector: 'sub-block',
    templateUrl: 'block.html',
    styleUrls: ['./block.scss'],
})
export class SubBlockComponent extends BlockComponent{...}

我尝试了

styleUrls：['block.scss']
styleUrls：['./block.scss']
styleUrls：['/src/components/block/bock.scss']
styleUrls：['src / components / block / bock.scss']
styleUrls：['../ components / block / bock.scss']

全部失败。

我如何使它工作？这对tsconfig或webpack十分重要吗？

Answer 1

由于组件位于app / components / block文件夹中，因此您不必放置整个URL，它应该只是

<PropertyGroup>
    <GetPackageVersionDependsOn>
        UpdateVersion;$(GetPackageVersionDependsOn)
    </GetPackageVersionDependsOn>
</PropertyGroup>

Answer 2

也许您正在遇到此错误？ https://github.com/angular/angular/issues/4974 在您的情况下，解决方案可能就是删除styleUrls声明行（错误问题中的注释表明了这一点）。

Answer 3

您可能要确保在baseUrl中配置了tsconfig.json。这就是为什么找不到文件的原因。

请参阅：https://www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 4

使用块和子块组件创建了一个堆栈闪电弹，可以在两个地方使用相同的HTML和SCSS https://stackblitz.com/edit/angular-vkhz8b

无法在Angular中为styleUrl使用相对路径

4 个答案: