Angular2 + Webpack2 внешний шаблон loading

Я пытаюсь использовать ngtemplate-loader в проекте AngularJs 2 + Webpack 2. Я видел, что эта настройка отлично работает для проекта Angular 1.x + Webpack 1.x. Для AngularJs 2 он не в браузере с сообщением об ошибке в консоли:Angular2 + Webpack2 внешний шаблон loading

Uncaught TypeError: Cannot read property 'module' of undefined at eval (eval at <anonymous> (app.4f8e384….js:2380), <anonymous>:3:15)

Точки ошибок в коде парование в Webpack генерироваться сверток:

eval("var path = 'app/app.component.html';\nvar html = \"<h1>Hello from test {{name}}</h1>\\n\";\nwindow.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);\nmodule.exports = path;//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hcHAvYXBwLmNvbXBvbmVudC5odG1sPzAwYjMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQSxrQ0FBa0MsTUFBTTtBQUN4QyxnRUFBZ0Usb0JBQW9CO0FBQ3BGIiwiZmlsZSI6IjMzMi5qcyIsInNvdXJjZXNDb250ZW50IjpbInZhciBwYXRoID0gJ2FwcC9hcHAuY29tcG9uZW50Lmh0bWwnO1xudmFyIGh0bWwgPSBcIjxoMT5IZWxsbyBmcm9tIHRlc3Qge3tuYW1lfX08L2gxPlxcblwiO1xud2luZG93LmFuZ3VsYXIubW9kdWxlKCduZycpLnJ1bihbJyR0ZW1wbGF0ZUNhY2hlJywgZnVuY3Rpb24oYykgeyBjLnB1dChwYXRoLCBodG1sKSB9XSk7XG5tb2R1bGUuZXhwb3J0cyA9IHBhdGg7XG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9hcHAvYXBwLmNvbXBvbmVudC5odG1sXG4vLyBtb2R1bGUgaWQgPSAzMzJcbi8vIG1vZHVsZSBjaHVua3MgPSAwIl0sInNvdXJjZVJvb3QiOiIifQ==");

Это означает, что window.angular не определено в время выполнения кода (запрошен внешний HTML-шаблон HTML-компонента AngularJs 2).

Есть ли способ загрузочной рамки AngularJs 2 перед началом загрузки каких-либо модулей?

Есть мои файлы:

webpack.config.js

const webpack = require("webpack"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 

const path = require("path"); 

const PATHS = { 
    app: path.join(__dirname, "app"), 
    dist: path.join(__dirname, "dist"), 
}; 

module.exports = (function makeWebpackConfig() { 

    const distFolder = "dist"; 
    const port = 9000; 

    const config = {}; 

    config.entry = { 
     app: "./app/main.ts" 
    }; 

    config.output = { 
     path: __dirname + `/${distFolder}`, 
     filename: "[name].[hash].js" 
    }; 

    config.devtool = "eval-source-map"; 

    config.resolve = { 
     extensions: ['.ts', '.tsx', '.js'] 
    }; 

    config.module = { 
     loaders: [{ 
      test: /\.ts?$/, 
      loader: "ts-loader", 
      include: PATHS.app 
     }, { 
      test: /\.html$/, 
      loader: `ngtemplate-loader?relativeTo=${__dirname}/!html-loader?attrs=false`, 
      exclude: /index\.html$/ 
     }] 
    }; 

    config.plugins = []; 

    config.plugins.push(
     new HtmlWebpackPlugin({ 
      filename: "index.html", 
      template: "./app/index.html" 
     }) 
    ); 

    config.devServer = { 
     contentBase: `./${distFolder}`, 
     stats: "minimal", 
     port: port, 
     historyApiFallback: true 
    }; 

    return config; 
    })();

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

app.component .ts

import { Component } from '@angular/core'; 

const view = require('./app.component.html'); 

@Component({ 
    selector: 'my-app', 
    templateUrl: view, 
}) 
export class AppComponent { name = 'Angular2'; }

app.component.html

<h1>Hello from test {{name}}</h1>

index.html

<html> 
<head> 
    <title>Angular 2 First Project</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="./shim.min.js"></script> 
    <script src="./zone.js"></script> 
    <script src="./Reflect.js"></script> 

</head> 

<body> 
<noscript> 
    <div>This site requires JavaScript. It is either disabled or not supported by your browser.</div> 
</noscript> 

<div> 
    <my-app>Loading...</my-app> 
</div> 

</body> 
</html>

источник

2017-02-22 marius

я получил подобную установку твоего и я только сделать:

templateUrl: "./app.component.html"

Но в моем webpack, для html-файлов, которые я получил:

{ test: /\.html$/, loaders: ['raw-loader']},

источник

2017-02-22 16:08:52

Ваши HTML-шаблоны, включенные в комплект, созданный webpack или AngularJs, выполняет отдельный HTTP-запрос на сервер для каждого из них? – marius

Он включен в пакет построить –

Я изменил мой: { тест: /\.html$/, погрузчик:?!? 'Ngtemplate-погрузчик relativeTo = $ {__ имя_директории}/HTML-погрузчик ATTRS = ложь ', исключить: /index\.html$/ } своих: {тест: /\.html$/, погрузчик: [ 'сырого погрузчика']} и теперь я получаю сообщение об ошибке: GET http: // localhost: 9000/app.component.html 404 (не найдено) Так что кажется, что HTML-файл не входит в комплект. Вот почему я пытаюсь использовать ngtemplate-loader, чтобы избежать HTTP-запроса для каждого HTML-шаблона. – marius

ответ

Смежные вопросы