templateUrl资源加载不能使用webpack

templateUrl resource load does not work using webpack

本文关键字：webpack 不能 资源 加载 templateUrl      更新时间：2023-09-26

我开始使用Angular 2/Typescript/Webpack构建一个个人项目(我使用的是node 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"
  }
}

我的主。Ts(入口点)

import 'reflect-metadata';
require('zone.js/dist/zone');
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(<any>AppComponent);

My app.component.ts (hello world component)

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: require('./app.component.html')
})
export class AppComponent { }

My app.component.html (hello world template)

<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"属性的内联模板，它就会工作。

任何帮助将不胜感激。

欢呼,目前

如powerbuoy所述，templateUrl属性指的应该是路径字符串，如'./app.component.html'。

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

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

注意templateUrl和template之间的差异:

template:应该是一个HTML字符串，内联或从外部文件加载

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

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

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

相关文章：