Question

import {Component} from 'angular2/core';

@Component({
  selector: 'app',
  styleUrls: ['./app.component.less'],
  templateUrl: './app.component.html'
})
export class AppComponent {
  name:string = 'Demo'
}

当使用templateUrl和styleUrls的相对路径时，我得到：错误404，找不到文件：

zone.js：101获取http://localhost/app.component.html 404（未找到）

代码：https://github.com/Dreampie/angular2-demo

我认为这不是好设计，因为在不同的情况下可能会建立目录不一样，我可以把它改成相对当前的路径吗？

raw-loader可以解决此问题，但html-loader，less-loader不适用于template，styles，它只适用于string，所以为什么不支持他们？

import {Component} from 'angular2/core';

@Component({
  selector: 'app',
  styles: [require('./app.component.less')],
  template: require('./app.component.html')
})
export class AppComponent {
  name:string = 'Demo'
}

得到其他错误：

browser_adapter.js:77 EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!.BrowserDomAdapter.logError
browser_adapter.js:77 ORIGINAL EXCEPTION: Expected 'styles' to be an array of strings.

Answer 1

让我补充一些信息。

为什么Angular无法从组件文件的位置计算HTML和CSS网址？

不幸的是，这个位置并不为人所知。 Angular应用程序可以通过多种方式加载：从单个文件，SystemJS软件包或CommonJS软件包，仅举几例。有了这种多样化的加载策略，在运行时就不容易告诉这些文件实际存在的位置。

Angular唯一可以确定的位置是index.html主页的URL。因此，默认情况下，它会解析相对于index.html的URL的模板和样式路径。这就是我们之前使用app / base路径前缀编写CSS文件URL的原因。

Official Angular Docu

Answer 2

./（单点）表示法仅适用于ts路径，它不适用于html或css路径。

这些路径与index.html相关，因此根据您的文件结构，这应该有效

@Component({
  selector: 'app',
  styleUrls: ['app.component.less'],
  templateUrl: 'app.component.html'
})

Answer 3

你需要尝试

@Component({
  selector: 'app',
  template: require('./app.component.html'),
  styles: [
    require('./app.component.less').toString()
      or
    String(require('./app.component.less'))
      or
    add css-to-string in your webpack conf ({test: /\.css$/, loaders: ['css-to-string', 'style', 'css']})
})

Answer 4

将moduleId属性设置为module.id以进行模块相对加载，以便url相对于组件。

@Component({
  moduleId: module.id,
  selector: 'app',
  styleUrls: ['app.component.less'],
  templateUrl: 'app.component.html'
})

Answer 5

如果您使用的是SystemJS，请在此处查看我的答案：https://stackoverflow.com/a/40694657/986160

您可以使用model.id并将其从构建路径（使用js）转换为具有ts，css和html的路径。这样你可以在Angular 2中使用模板和样式的相对路径没问题

@Component({
   moduleId: module.id.replace("/dist/", "/"),
...
});

Answer 6

在我的情况下，我注意到了同样的错误。

的原因

预期的'styles'是一个字符串数组

在我的案例中，

是css-loader，用于加载CSS文件并通过管道传输到angular2-template-loader。

我从调试中了解到css-loader对CSS文件中的更改有一些“智能”检测，如果没有更改，CSS文件就不会被webpack模块导出为字符串。

因为它只是hello word app我的解决方案非常简单：将css-loader替换为raw-loader。这是我的装载机版本：

loaders: [
    {
        include: [srcPath],
        test: /\.js$/,
        loader: 'babel',
        query: {
            presets: ['es2015']
        }
    },
    {
        include: [srcPath],
        test: /\.js$/,
        loader: 'angular2-template-loader',
        query: {
            keepUrl: true
        }
    },
    {
        include: [srcPath],
        test: /\.(html|css)$/,
        loader: 'raw',
        query: {
            minimize: true
        }
    }
]

Answer 7

WebPack2不再需要此moduleId

在Angular2 + Webpack中使用templateUrl的相对路径

7 个答案: