0
我想在AngularJs 2 + Webpack 2項目中使用ngtemplate-loader。我已經看到這個設置在Angular 1.x + Webpack 1.x項目中工作得很好。對於AngularJs 2在瀏覽器中失敗,並在控制檯一個錯誤:Angular2 + Webpack2外部模板加載
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>
您的HTML模板是否包含在由webpack構建的捆綁包中,或者AngularJs爲每個服務器都執行單獨的HTTP請求? – marius
它包括在集合構建 –
我已經改變了我: { 測試:/\.html$/, 裝載機:?!?'ngtemplate裝載機對於relativeTo = $ {__目錄名}/HTML裝載機ATTRS = FALSE ', 排除:/index\.html$/ } 您: {測試:/\.html$/,裝載機: '原始裝載機']} ,現在我得到錯誤: GET http:// localhost:9000/app.component.html 404(Not Found) 因此,好像該HTML文件未包含在捆綁包中。這就是爲什麼我試圖使用ngtemplate-loader來避免每個HTML模板的HTTP請求。 – marius