Я начинаю строить собственный проект, используя угловой 2/Машинопись/Webpack (я использую узел v6.2.1)templateUrl нагрузка ресурса не работает, используя Webpack
Я не могу загрузить шаблон в качестве внешнего ресурса с помощью " templateUrl '.
Внизу привет мир проекта, который воспроизвести проблему и вывод сообщения об ошибке:
Мой package.json
{
"name": "angular2-whatafuck",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "NODE_ENV=development webpack -d --progress",
"start": "webpack-dev-server --progress --colors --port 3100 -- inline",
"lite": "lite-server",
"postinstall": "typings install",
"typings": "typings"
},
"author": "",
"dependencies": {
"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/forms": "0.1.0",
"@angular/http": "2.0.0-rc.2",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "3.0.0-alpha.7",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.2",
"angular2-in-memory-web-api": "0.0.12",
"angular2-moment": "^0.8.0",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.0.0-beta.9",
"zone.js": "^0.6.12"
},
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.13.0",
"browser-sync-webpack-plugin": "^1.0.3",
"html-loader": "^0.4.3",
"raw-loader": "^0.5.1",
"ts-loader": "^0.8.2",
"typescript": "^1.8.10",
"typings": "^1.3.0",
"webpack": "^1.13.1"
}
}
My main.ts (точка входа)
import 'reflect-metadata';
require('zone.js/dist/zone');
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(<any>AppComponent);
Мои app.component.ts (hello world component)
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: require('./app.component.html')
})
export class AppComponent { }
Мой app.component.html (привет мир шаблон)
<h1>My First Angular 3 App</h1>
Мой index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>Loading...</my-app>
<script src="js/bundle.js"></script>
</body>
</html>
Мои webpack.config.js
var webpack = require("webpack");
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: {
main: "./src/main.ts", //main app entry point
},
output: {
//filename: './app/js/bundle.js'
path: __dirname,
filename: "./app/js/bundle.js"
},
resolve: {
extensions: ['' , '.js' , '.ts']
},
module: {
loaders: [
{ test: /\.ts?$/, loader: 'ts-loader' , exclude: /node_modules/ },
{test: /\.html$/, loader: 'html'}
]
},
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
proxy: 'http://localhost:3100/app/',
})
]
}
консоли стека ошибок (фрагмент кода)
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/app/%3Ch1%3EMy%20First%20Angular%203%20App%3C/h1%3E
bundle.js:55829EXCEPTION: Failed to load %3Ch1%3EMy%20First%20Angular%203%20App%3C/h1%3E
bundle.js:55820EXCEPTION: Failed to load %3Ch1%3EMy%20First%20Angular%203%20App%3C/h1%3EBrowserDomAdapter.logError @ bundle.js:55820
bundle.js:55829EXCEPTION: Error: Uncaught (in promise): Failed to load %3Ch1%3EMy%20First%20Angular%203%20App%3C/h1%3E
bundle.js:55820EXCEPTION: Error: Uncaught (in promise): Failed to load %3Ch1%3EMy%20First%20Angular%203%20App%3C/h1%3EBrowserDomAdapter.logError @ bundle.js:55820
bundle.js:55820STACKTRACE:BrowserDomAdapter.logError @ bundle.js:55820
bundle.js:55820Error: Uncaught (in promise): Failed to load %3Ch1%3EMy%20First%20Angular%203%20App%3C/h1%3E
Ясно пытается загрузить неправильный ресурс http://localhost:3000/app/%3Ch1%3EMy%20First%20Angular%203%20App%3C/h1%3E. Это выглядит совершенно неправильно. Он должен быть включен в комплект и необходим Webpack и НЕ как внешний ресурс. Но я не мог найти правильное решение. Я не уверен, что что-то в Webpack не сконфигурировано или в Angular 2.
Он работает, если я использую встроенный шаблон в компоненте с свойством «шаблон».
Любая помощь будет оценена по достоинству.
Приветствия, Висенс
Вы не должны использовать 'require', если используете' templateUrl'. Просто укажите путь к шаблону в виде строки. Или, еще лучше, используйте 'template' вместе с' require'. – powerbuoy