CODEWITHSUNDEEP
javascriptangularwebpack
Arthur Kishinets
Arthur Kishinets

Reputation: 147

Angular 2 relative paths with webpack

I have a simple component that works fine:

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

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

The problem is the paths are absolute. I changed it to this:

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

And it gives me an error:

GET http://localhost:7000/app.component.html 404 (Not Found)

The question is how can I use relative paths with webpack (moduleId: module.id is not working here) without third-part loaders or stuff like:

template: require('...')

By the way I`m using webpack 2.2.1 with this loaders: 

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']
            }
        ]
    },

Upvotes: 1

Views: 1338

Answers (1)

Stout01
Stout01

Reputation: 1126

Unfortunately I think you will have to use another third party loader. I used angular2-template-loader in a recent project to get webpack to load our templates.

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

Upvotes: 2

Related Questions