Angular 2 - Webpack 2 - шаблон-загрузчик не работает с templateUrl

Question

Я создал минимальный пример веб-пакета для своего приложения, и я пытаюсь использовать templateUrl с «./file.name.html» для компиляции. Но единственное, что показывает мое приложение, - это имя файла templateUrl «./file.name.html» на моей странице индекса. Приложения, похоже, работают, потому что ошибок нет в консоли, и

<app>... Loading </app> 

больше не показан. Прежде чем я попытался использовать webpack, я использовал systemJs, и My App работало очень хорошо. Поэтому я не думаю, что это проблема с приложением.

мое имя файла отправным является 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-маршрутизатор, и я вижу, что загружен правильный URL, но его только показывает шаблон, как «Имена файлов ./appHeader.component.html», но нет Шаблон.

Answer 1

Я нашел свою проблему!

не используют ES6 кавычки, как

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

это сделает только "./app.component.html" в приложении

использовать обычные кавычки, как следующее:

templateUrl: './app.component.html' 
templateUrl: "./app.component.html" 

Answer 2

Для того, чтобы это сработало, необходимо использовать template: require("./app.component.html") вместо templateUrl:"...".

Webpack сканирует ваши файлы и ищет, например. требуют (...) тегов.

Answer 3

Другая причина, по которой это не сработает, - это то, что вы уже скомпилировали .js файлы, соответствующие вашему .ts файлам. Некоторые IDE создадут их сами при сохранении или компиляции.

Это означает, что когда запрашивается «модуль», он сначала находит файл .js и не обрабатывает файл .ts вообще, поэтому он не пройдет через эту «цепочку».

Редактировать ваш .csproj файл и добавить это как новую группу свойств (поиск сначала, что он еще не существует). Это не позволит Visual Studio автоматически генерировать файл .js при сохранении.

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

Убедитесь, чтобы удалить все сгенерированные .js и .js.map файлы, которые имеют соответствующий .ts файл под папку ClientApp (компоненты и т.д.). Сначала проверьте исходный контроль/резервное копирование.