angular - 如何为 templateUrl 和 styleUrls 使用绝对路径？- 角 6

Question

我有一个包含多个components. 最近，应用程序的一项要求发生了变化，这意味着我必须将所有现有的相对Url 转换为absolute。

到目前为止，一切都按计划顺利进行，直到我遇到templateUrl了styleUrls. components下面显示了组件的一个示例及其绝对路径。不幸的是，当我尝试为这两个属性输入绝对路径而不是相对路径时，它给了我一个错误（也附上）。我尝试查看issuesgithub 上的各种以及stackoverflow和stackexchange上的一些示例，但我无法让它们为我工作

src/app/views/login/login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { OauthService } from 'src/app/services/oauth/oauth.service';
import { LoggerService } from 'src/app/services/logger/logger.service';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
/*
methods and properties etc etc
.
.
.
*/

这是我的应用程序的层次结构以供参考：

此应用程序的tsconfig.json（包含baseUrl）：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

当我尝试在浏览器上运行应用程序同时使用absolute这两个属性的路径时收到的错误：

标签： angulartypescript

Answer 1

这是一个古老的问题，但我只是设法使它与'/'一起工作。

例如：templateUrl: '/src/app/common/templates/enquiry-page/enquiry-page.html',

我在 Angular 8 上运行。