无法获取相对模板url以在带有Web包的Angular 2中工作

因此，在试用了几天我能找到的每一篇教程和文章之后，我仍然发现自己在尝试让组件相关URL在我的angular2应用程序中工作时陷入僵局。 我正在使用webpack 2，根据angular文档，在创建组件时，我应该能够做到：

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

但是，我得到以下错误：

相对的风格完美地工作。

.html

与

.ts

和

.less

文件位于同一文件夹中。任何帮助都将不胜感激

大卫

My 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一起工作。

您应该添加更多加载程序来解析角度代码并提取html文件：

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

显然，您必须使用npm安装这些加载程序。另一种选择是只移植项目以使用

angularcli

，其中所有这些麻烦的加载程序都由cli处理。以及包装和缩小它

---

如果您不想这样做，angular有一个使用Web包的方法，所以下面是我如何解决我的问题的，以防它可以帮助任何人。 在尝试了上述建议之后，我注意到我使用的是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"]
})

---

谢谢你的帮助！干杯

像这样在组件装饰器中添加moduleId=module.id

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

---

angular将其用于模块相对加载

您可能应该发布您的webpack配置文件和

语言选择器.html

…使用webpack.config编辑帖子，.html只是一个简单的下拉列表，在绝对URL下运行得非常好添加更多加载程序也可以做到同样的事情，在编辑webpack.config时，我确实参考了初学者指南