Question

我有一个由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>

我遇到的第一个问题是无论我将<script>标签放在哪里指向棱镜，动画和材质，镀铬总是会出错：

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

要将库加载到我的角度项目中，我想我只会使用：

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错误。

Answer 1

我见过你的代码

import { ngMaterial } from 'angular-material';

我发现你正在使用角度材料，这个存储库仅用于Angular Material v1.x而不是角度2。

对于Angular 2，有一个名为@angular2-material的npm包，请使用它。

让Angular Material与Webpack和typescript

所以我的问题是，如何正确加载所有库并让`app.module.ts`加载`ngMaterial`？

1 个答案:

让Angular Material与Webpack和typescript

所以我的问题是，如何正确加载所有库并让app.module.ts加载ngMaterial？

1 个答案:

所以我的问题是，如何正确加载所有库并让`app.module.ts`加载`ngMaterial`？