Question

我开始使用Angular 2 / Typescript / Webpack构建个人项目（我使用的是节点v6.2.1）

我无法使用'templateUrl'属性将模板作为外部资源加载。

下面是一个重现问题和错误输出的hello world项目：

我的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"
  }
}

我的主要内容（切入点）

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组件）

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中的内容。

如果我在组件中使用带有“template”属性的内联模板，它就可以工作。

任何帮助将不胜感激。

干杯，维森斯

Answer 1

如powerbuoy所述，templateUrl属性应引用路径字符串，例如'./app.component.html'。

如果您想使用require内联html，可以尝试使用

template: require('./app.component.html')

请注意templateUrl和template：

之间的区别

template：应该是HTML字符串，无论是内联还是从外部文件加载

templateUrl：应该是外部HTML模板的路径

Answer 2

尝试template: require('!raw!./app.component.html')

在我的webpack配置中，我使用raw-loader来加载.html文件，所以我只需要template: require('./app.component.html')。它也可能适合你，但我没有使用html-loader来确认这一点。

使用webpack，templateUrl资源加载不起作用

2 个答案: