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

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

<app>... Loading </app>

больше не показывается. До того, как я попытался использовать веб-пакет, я использовал 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", но не Template.

Источник

3 ответа

Решение

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

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

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

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

Используйте обычные кавычки, как показано ниже:

templateUrl: './app.component.html'
templateUrl: "./app.component.html"
Источник

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

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

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

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

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

Источник

Вам нужно использовать template: require("./app.component.html") вместо templateUrl:"..." чтобы заставить это работать.

Webpack scans your files and searches for eg require(...) tags.

Источник
Другие вопросы по тегам