I am facing a challenge with my angular-typescript project managed by webpack. The issue arises when I attempt to integrate the angular-material library, and I am encountering significant difficulties.
Currently, the html portion of my code appears as follows:
<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>
My initial hurdle was that no matter where I placed the <script> tags pointing to angular-aria, animate, and material, Chrome consistently displayed the error:
Cannot read property 'module' of undefined angular-aria.js:57 etc.
for all three angular-material libraries. I then suspected that Angular was loaded at a later stage, which hindered the proper functioning of the material libraries. In an attempt to resolve this, I wrote a function that would execute on
<body onload="loadAngMat()">require() on each of the angular-material libraries, and initially, it seemed to work.
Subsequently, I created a simple <md-input-container> in the template of one of my Angular components. However, I was unable to determine the URL from which to load the ngMaterial Module within my app's namespace. The structure, following a standard node install for installing the material libraries, is somewhat condensed as illustrated below:
> 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
To incorporate the library into my Angular project, I assumed that I could simply employ:
import { ngMaterial } from 'angular-material';
Unfortunately, this was unsuccessful, and Chrome now returns the error message:
Template parse errors: md-input-container is not a known element.Therefore, my query is how can I effectively load all the libraries and have app.module.ts successfully import ngMaterial?
Below is my 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'
};
It is worth mentioning that I attempted to load the material libraries using this configuration file, which resulted in a
a dependency to an entry point is not allowed