【发布时间】：2016-11-07 18:58:41
【问题描述】：
我有一个由 webpack 管理的 angular-typescript 项目。我想向其中添加角度材料库，但我遇到了很大的问题。
我的代码的 html 部分现在看起来像这样：
<div class="container">
<my-app></my-app>
</div>
<script>
require("zone.js");
</script>
<script src="../build/common.js"></script>
<script src="../build/angular2.js"></script>
<script src="../build/app.js"></script>
我遇到的第一个问题是，无论我将指向 angular-aria、animate 和 material 的 <script> 标签放在哪里，chrome 总是会出错：
Cannot read property 'module' of undefined angular-aria.js:57 etc.
适用于所有三个角度材料库。然后我假设在稍后的某个时间点加载了角度，导致材质库无法正常运行。然后我尝试编写一个可以在<body onload="loadAngMat()"> 上运行的函数，该函数在每个角度材料库上调用require()，起初它似乎工作。
然后我在我的一个角度组件的模板中创建了一个简单的<md-input-container>。我找不到从我的应用程序命名空间中加载 ngMaterial 模块的 URL。我用了一个标准的node install来安装材质库，所以结构（非常简洁）看起来有点像这样：
> app
> app.module.ts
> index.html
> index.js
> etc.
> build
> built project
> node_modules
> angular-material
> index.js
> angular-aria
> angular-aria.js
> angular-animate
> angular-animate.js
> other angular and node modules
要将库加载到我的 Angular 项目中，我想我会简单地使用：
import { ngMaterial } from 'angular-material';
但没有成功。现在铬说
Template parse errors: md-input-container is not a known element.
所以我的问题是，如何正确加载所有库并让app.module.ts 加载ngMaterial？
这是我的 webpack.config：
var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
module.exports = {
devtool: 'source-map',
debug: true,
entry: {
'angular2': [
'rxjs',
'reflect-metadata',
'@angular/core'
],
'app': './app/app.module',
},
output: {
path: __dirname + '/build/',
publicPath: 'build/',
filename: '[name].js',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['','.ts','.js','.json', '.css', '.html']
},
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts',
exclude: [ /node_modules/ ]
}
]
},
plugins: [
new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
new CommonsChunkPlugin({ name: 'common', filename: 'common.js' })
],
target:'node-webkit'
};
我还应该说，我尝试使用此配置文件加载材质库，但在构建项目时出现a dependency to an entry point is not allowed 错误。
【问题讨论】：
-
未来给大家的信息：只要使用Angular-CLI。它将为您节省数小时的地狱般的 webpack 调试。
标签： angular typescript webpack