2017-02-22 33 views
0

AngularJs 2 + Webpack 2プロジェクトでngtemplate-loaderを使用しようとしています。 Angular 1.x + Webpack 1.xプロジェクトでこの設定がうまく動作しているのを見ました。 AngularJs 2のためには、コンソールにエラーブラウザに失敗:Angular2 + Webpack2外部テンプレート読み込み

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未定義であることを意味する:WebPACKの中休閑コードに

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

エラー点は、バンドルを生成コードが実行された時刻(外部AngularJs 2コンポーネントHTMLテンプレートが要求された)。

モジュールのロードを開始する前に、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> 

答えて

0

私はあなたの同様のセットアップを持って、私は唯一の操作を行います。

templateUrl: "./app.component.html" 

しかし、私の中でwebpack、htmlファイル用:

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

あなたのHTMLテンプレートは、webpackまたはAngularJsによって構築されたバンドルに含まれていますか? – marius

+0

私が私を変更した –

+0

を構築バンドルに含まれています: { テスト:/\.html$/、 ローダー:?!? 'ngtemplate-ローダーrelativeToで= $ {__ dirnameは}/htmlのローダをattrsに=偽'、 は除外する:/index\.html$/を }あなたへ : {テスト:/\.html$/、ローダー:[ '生-ローダー']} 、今私が取得エラー: GET http:// localhost:9000/app.component.html 404(見つからない) これは、HTMLファイルがバンドルに含まれていないかのようです。そのため、すべてのHTMLテンプレートに対してHTTP要求を避けるためにngtemplate-loaderを使用しようとしています。 – marius

関連する問題