Javascript 角度2+；Webpack2外部模板加载_Javascript_Angular_Webpack_Webpack 2

Javascript 角度2+；Webpack2外部模板加载

javascript angular webpack

Javascript 角度2+；Webpack2外部模板加载,javascript,angular,webpack,webpack-2,Javascript,Angular,Webpack,Webpack 2,我正在尝试在AngularJS2+Webpack2项目中使用NGTemplateLoader。我已经看到这个设置在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), <ano

我正在尝试在AngularJS2+Webpack2项目中使用NGTemplateLoader。我已经看到这个设置在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)

梅因酒店

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>

Hello来自测试{{name}

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>


角2第一个项目
此站点需要JavaScript。您的浏览器已禁用或不支持它。
加载。。。

我得到了与您类似的设置，我只做：

templateUrl: "./app.component.html"

但在我的网页包中，对于html文件，我得到：

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

您的HTML模板是否包含在由webpack或AngularJs生成的捆绑包中？每个捆绑包都向服务器发出单独的HTTP请求？它包含在捆绑包中。我已更改了我的：{test:/\.HTML$/，loader:

ngtemplate loader？relativeTo=${\uu dirname}/！html loader？attrs=false

，exclude:/index\.html$/}到您的：{test:/\.html$/，loader:['raw-loader']}现在我得到错误：get 404（未找到），因此似乎html文件未包含在捆绑包中。这就是为什么我试图使用ngtemplate loader来避免对每个HTML模板的HTTP请求。这是我的网页包模块：{rules:[{test://\.ts$/，use:['@ngtools/webpack']}，{test://\.sass$/，loaders:['raw-loader'，sass-loader']}，{test://\.css$/，loaders:['to-string-loader'，css']}，{test://\.html$/，loaders:['raw-loader']}，]}您使用的@ngtools/webpack版本是什么？我已安装了最新的1.2.10版本，但收到一个webpack错误：TypeError:AotPlugin不是构造函数

templateUrl: "./app.component.html"

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