1

我为我的应用程序创建了一个最小的 webpack 示例，并尝试使用带有“./file.name.html”的 templateUrl 来编译。但我的应用程序显示的唯一内容是我的索引页面上的 templateUrl "./file.name.html" 的名称。这些应用程序似乎可以工作，因为控制台中没有错误，并且

<app>... Loading </app>

不再显示。在我尝试使用 webpack 之前，我使用过 systemJs 并且我的应用程序运行良好。所以我不认为这是一个应用程序问题。

我的起始文件名是 boot.ts

/// <reference path="../typings/index.d.ts" />
import 'core-js/es6';
import 'core-js/es7/reflect';
import "zone.js/dist/zone";

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.component 定义看起来像

.... Imports

@Component({
    selector: 'sxp-app',
    templateUrl: "./app.component.html"
})
export class AppComponent { ... }

我的 webpack.config.js

var path = require('path');

module.exports = {
    entry: "./App/boot.ts",
    output: {
        path: path.join(__dirname, './Scripts/dist'),
        filename: "bundle.js"
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        loaders: [
             {
                 test: /\.ts$/,
                 loader: ['awesome-typescript-loader', 'angular2-template-loader']
             },
             {
                test: /\.html$/, 
                loader: 'raw-loader'
             }
        ]
    }
};

package.json

{
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.26",
    "ui-router-ng2": "1.0.0-beta.3"
  },
  "devDependencies": {
    "@types/node": "^6.0.51",
    "@types/requirejs": "2.3.1",
    "angular2-router-loader": "^0.3.4",
    "angular2-template-loader": "^0.6.0",
    "css-loader": "0.26.0",
    "file-loader": "0.9.0",
    "html-loader": "0.4.4",
    "html-webpack-plugin": "2.24.1",
    "raw-loader": "0.5.1",
    "rimraf": "~2.5.4",
    "style-loader": "0.13.1",
    "typescript": "^2.0.10",
    "typings": "2.0.0",
    "webpack": "2.1.0-beta.27",
    "webpack-dev-server": "2.1.0-beta.12",
    "webpack-merge": "0.17.0",
    "webpack-notifier": "^1.4.1"
  }
}

和 tsconfig.json

 {
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false,
     "types": [
       "node" 
     ]
   },
   "awesomeTypescriptLoaderOptions": {
     "useWebpackText": true
   },
  "exclude": [
       "node_modules",
       "dist",
       "typings/main",
       "typings/index.d.ts"
     ],
     "compileOnSave": true
   }

我正在使用 Ui-router，我看到正确的 url 已加载，但它只显示模板文件名，如“./appHeader.component.html”，但没有模板。

4

3 回答 3

7

这不起作用的另一个原因是，如果您已经编译.js了与您的文件相对应的.ts文件。有些 IDE 会在您保存或编译时自行创建。

这样做的效果是，当请求“模块”时，它首先找到.js文件并且根本不处理.ts文件 - 所以它不会通过这个“链”。

编辑您的.csproj文件并将其添加为新的属性组（首先搜索它不存在）。这将阻止 Visual Studio 在保存时自动生成.js文件。

<PropertyGroup>
  <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>

确保删除所有生成的.js和在您的文件夹下.js.map具有相应.ts文件的ClientApp文件（组件等）。以防万一，首先检查源代码控制/备份。

于 2017-06-19T02:33:58.623 回答
4

我找到了我的问题！

不要使用 ES6 引号，例如

templateUrl: \`./app.component.html`

这将在您的应用程序中仅呈现“./app.component.html”

使用正常的引号，如下所示：

templateUrl: './app.component.html'
templateUrl: "./app.component.html"
于 2016-11-26T12:43:36.027 回答
0

您需要使用template: require("./app.component.html")而不是templateUrl:"..."才能使其工作。

Webpack 扫描您的文件并搜索例如 require(...) 标签。

于 2016-11-25T22:39:33.770 回答