Question

我有一个很好的简单组件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: `./src/app/app.component.html`,
  styleUrls: ['./src/app/app.component.css']
})
export class AppComponent {  }

问题是路径是绝对的。我改成了这个：

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {  }

它给了我一个错误：

获取http://localhost:7000/app.component.html 404（未找到）

问题是我如何使用webpack的相对路径（moduleId：module.id不能在这里工作）而没有第三部分加载器或类似的东西：

template: require('...')

顺便说一句，我正在使用webpack 2.2.1和这个加载器：

module: {
        rules: [
            {
                test: /\.js/,
                include: srcPath,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', { "modules": false }],
                    cacheDirectory: true,
                    optional: 'runtime'
                }
            },
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                use: 'raw-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },

Answer 1

不幸的是，我认为你将不得不使用另一个第三方装载机。我在最近的一个项目中使用angular2-template-loader来获取webpack来加载我们的模板。

https://github.com/TheLarkInn/angular2-template-loader

与webpack的Angular 2相对路径

1 个答案: