Question

我试图在AngularJs 2 + Webpack 2项目中使用ngtemplate-loader。我已经看到这个设置适用于Angular 1.x + Webpack 1.x项目。对于AngularJs 2，它在浏览器中失败并且在控制台中出错：

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（请求外部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>

Angular2 + Webpack2外部模板加载

0 个答案: