无法通过webpack获取相对模板URL在Angular 2中工作

Question

因此，经过几天尝试我可以找到的每个教程和文章，我仍然发现自己陷入僵局，试图让我的angular2应用程序中的组件相对URL工作。 我正在使用webpack 2，根据角度文档，在创建我的组件时我应该能够做到：

@Component({
    selector: 'language-selector',
    templateUrl: './language-selector.html',
    styles: ["./language-selector.less"]
})

但是我收到以下错误：

相对风格完美无缺。 .html与.ts和.less文件位于同一文件夹中。任何帮助将不胜感激！

大卫

我的webpack.config.js：

    var webpack = require('webpack');

module.exports = {
  entry: './main.ts',
  watch: false,
  watchOptions: {
    ignored: "**/*.{js,ts}",
    aggregateTimeout: 0,
    poll: 10
  },
  output: {
    path: './dist',
    filename: "app.bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          'ts-loader'
        ]
      },
       {
        test: /\.less$/,
        exclude: /node_modules/,
        use: [ 'style-loader', 'css-loader', 'less-loader' ],
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [ 'style-loader', 'css-loader' ]
      },
    ]
  },
  resolve: {
    extensions: ['.js', '.json']
  },

};

至于.html，它只是一个包含服务数据的简单下拉列表，可以使用绝对URL。

Answer 1

所以这就是我如何设法解决我的问题，以防它可以帮助任何人。 在尝试了上面的建议之后，我注意到我的使用的是Typescript~1.8，以及大多数推荐使用

的指南

template: require('./language-selector.html')

正在使用^ 2.0，所以我升级了typescript，之后我添加了

  "types": ["node"]

到我的tsconfig.json，我能够使用上述语法使用'require'来执行组件相对模板URL。

作为参考，这里是我的组件的标题最终看起来像：

@Component({
    selector: 'language-selector',
    template: require('./language-selector.html'),
    styles: ["./language-selector.less"]
})

感谢您的帮助！干杯

Answer 2

你应该添加更多的加载器来解析角度代码并提取html文件：

  {
    test: /\.ts$/,
    use: ['awesome-typescript-loader', 'angular2-template-loader']
  },
  {
    test: /\.html$/,
    use: ['html-loader']
  }

你显然必须使用npm安装这些加载器。另一种选择是将项目移植到angular-cli，其中所有这些麻烦的加载程序都由cli处理。以及包装和缩小它。

如果你不想这样，angular有一个starters guide来使用webpack

Answer 3

在组件装饰器中添加moduleId = module.id，如下所示

@Component({
 moduleId = module.id,
 selector: 'language-selector',
 templateUrl: './language-selector.html',
 styles: ["./language-selector.less"]
})

angular将它用于模块相对加载