无法使用 webpack 获取相关模板 url 在 Angular 2 中工作

Question

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

@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

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

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

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

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

Answer 2

所以这就是我设法解决问题的方法，以防万一它可以帮助任何人。在尝试了上面的建议之后，我注意到我使用的是 Typescript ~1.8，而且大多数指南都建议使用

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

正在使用 ^2.0，所以我升级了打字稿，然后添加了

  "types": ["node"]

对于我的 tsconfig.json，我能够使用 'require'.

使用上述语法完成组件相关模板 url

作为参考，我的组件 header 最终看起来像这样：

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

感谢您的帮助！干杯

Answer 3

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

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

angular 用于 module-relative 加载

无法使用 webpack 获取相关模板 url 在 Angular 2 中工作

Can not get relative template url to work in Angular 2 with webpack

webpack-2

angular