asp.net - .Net Core 2 Spa Template with Angular Material -
struggling trying angular material , or 3rd party control set really, work new template. in new template, webpack broken treeshakable , nontreeshakable. in addition app.module app.module.shared, app.module.browser, app.module.server.
as have attempted work, app run modules configured in app.module.browser, material tags not getting processed. trying simple , trying button. don't errors not work. went example in plunker, copied generated, , displays right telling me got css in right, @ least.
including webpack vendor configuration starting point, seems key because how bundles css , js.
tia
webpack.vendor const path = require('path'); const webpack = require('webpack'); const extracttextplugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge'); const treeshakablemodules = [ '@angular/animations', '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/material', '@angular/cdk', 'zone.js' ]; const nontreeshakablemodules = [ 'bootstrap', 'jqwidgets-framework', "@angular/material/prebuilt-themes/indigo-pink.css", 'bootstrap/dist/css/bootstrap.css', 'font-awesome/css/font-awesome.css', 'es6-promise', 'es6-shim', 'event-source-polyfill', 'jquery', ]; const allmodules = treeshakablemodules.concat(nontreeshakablemodules); module.exports = (env) => { const extractcss = new extracttextplugin('vendor.css'); const isdevbuild = !(env && env.prod); const sharedconfig = { stats: { modules: false }, resolve: { extensions: [ '.js' ] }, module: { rules: [ { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } ] }, output: { publicpath: 'dist/', filename: '[name].js', library: '[name]_[hash]' }, plugins: [ new webpack.provideplugin({ $: 'jquery', jquery: 'jquery' }), // maps these identifiers jquery package (because bootstrap expects global variable) new webpack.contextreplacementplugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './clientapp')), // workaround https://github.com/angular/angular/issues/11580 new webpack.contextreplacementplugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './clientapp')), // workaround https://github.com/angular/angular/issues/14898 new webpack.ignoreplugin(/^vertx$/) // workaround https://github.com/stefanpenner/es6-promise/issues/100 ] }; const clientbundleconfig = merge(sharedconfig, { entry: { // keep development builds fast, include vendor dependencies in vendor bundle. // production builds, leave tree-shakable ones out aot compiler can produce smaller bundle. vendor: isdevbuild ? allmodules : nontreeshakablemodules }, output: { path: path.join(__dirname, 'wwwroot', 'dist') }, module: { rules: [ { test: /\.css(\?|$)/, use: extractcss.extract({ use: isdevbuild ? 'css-loader' : 'css-loader?minimize' }) } ] }, plugins: [ extractcss, new webpack.dllplugin({ path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name]_[hash]' }) ].concat(isdevbuild ? [] : [ new webpack.optimize.uglifyjsplugin() ]) }); const serverbundleconfig = merge(sharedconfig, { target: 'node', resolve: { mainfields: ['main'] }, entry: { vendor: allmodules.concat(['aspnet-prerendering']) }, output: { path: path.join(__dirname, 'clientapp', 'dist'), librarytarget: 'commonjs2', }, module: { rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isdevbuild ? 'css-loader' : 'css-loader?minimize' ] } ] }, plugins: [ new webpack.dllplugin({ path: path.join(__dirname, 'clientapp', 'dist', '[name]-manifest.json'), name: '[name]_[hash]' }) ] }); return [clientbundleconfig, serverbundleconfig]; }
you need include angular material , cdk in nontreeshakablemodules like:
const treeshakablemodules = [ '@angular/animations', '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', 'zone.js', ]; const nontreeshakablemodules = [ 'bootstrap', 'bootstrap/dist/css/bootstrap.css', '@angular/material', '@angular/material/prebuilt-themes/indigo-pink.css', '@angular/cdk', 'es6-promise', 'es6-shim', 'event-source-polyfill', 'jquery', ]; make sure have installed both angular material , cdk modules npm following 2 commands (animations module optional):
npm install --save @angular/material @angular/cdk npm install --save @angular/animations this should add following lines in package.json:
"@angular/animations": "https://registry.npmjs.org/@angular/animations/-/animations-4.2.5.tgz", "@angular/cdk": "^2.0.0-beta.8", "@angular/material": "^2.0.0-beta.8", you should try executing webpack build following command in cmd or powershell:
webpack --config webpack.config.vendor.js if there no errors can include components want use in app.module.shared.ts:
// angular material modules import { mdautocompletemodule, mdbuttonmodule, mdbuttontogglemodule, mdcardmodule, mdcheckboxmodule, mdchipsmodule, mdcoremodule, mddatepickermodule, mddialogmodule, mdexpansionmodule, mdgridlistmodule, mdiconmodule, mdinputmodule, mdlistmodule, mdmenumodule, mdnativedatemodule, mdpaginatormodule, mdprogressbarmodule, mdprogressspinnermodule, mdradiomodule, mdripplemodule, mdselectmodule, mdsidenavmodule, mdslidermodule, mdslidetogglemodule, mdsnackbarmodule, mdsortmodule, mdtablemodule, mdtabsmodule, mdtoolbarmodule, mdtooltipmodule, } '@angular/material'; import { cdktablemodule } '@angular/cdk'; and add them imports in @ngmodule
there still components bugged until next fixes. checkbox component breaks server-side rendering when refresh page. fixed in next release (it has been on master branch).
Comments
Post a Comment