Не удается получить относительный шаблон url для работы в Angular 2 с webpack

142
24

Поэтому после нескольких дней тестирования каждого учебника и статьи, которые я смог найти, я все еще оказываюсь в тупике, пытаясь заставить относительные URL-адреса компонентов работать в моем приложении angular2. Я использую webpack 2, и в соответствии с угловой документацией при создании моего компонента я должен просто сделать:

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

Однако я получаю следующие ошибки:

enter image description here

Относительный стиль отлично работает. .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-адресом.

спросил(а) 2021-01-25T18:36:37+03:00 4 месяца, 4 недели назад
1
Решение
63

Так вот, как мне удалось решить мою проблему, на всякий случай это могло помочь кому угодно. После того, как вы опробовали приведенные выше предложения, я заметил, что я использовал Typcript ~ 1.8 и большинство руководств, которые рекомендовали использовать

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

использовали ^ 2.0, поэтому я обновил машинопись, а после добавления

  "types": ["node"]

к моему tsconfig.json, я смог сделать относительные URL-адреса компонентов с указанным выше синтаксисом, используя "require".

Для справки, вот как заголовок моего компонента выглядел так:

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

Спасибо за помощь! ура

ответил(а) 2021-01-25T18:36:37+03:00 4 месяца, 4 недели назад
45

Вы должны добавить больше загрузчиков для анализа углового кода и извлечения html файла:

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

Вы, очевидно, должны установить эти загрузчики, используя npm. Другой вариант - просто перенести свой проект на использование angular-cli, где все эти неприятные вещи загрузчика обрабатываются кли. А также упаковывать и минимизировать его.

если вы этого не хотите, у углового есть руководство для начинающих по использованию webpack

ответил(а) 2021-01-25T18:36:37+03:00 4 месяца, 4 недели назад
45

добавьте moduleId = module.id в компонентный декоратор, подобный этому

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

угловое использование для модульной загрузки

ответил(а) 2021-01-25T18:36:37+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема