You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Apr 8, 2020. It is now read-only.
constpath=require('path');constwebpack=require('webpack');constExtractTextPlugin=require('extract-text-webpack-plugin');constmerge=require('webpack-merge');consttreeShakableModules=['@angular/animations','@angular/common','@angular/compiler','@angular/core','@angular/forms','@angular/http','@angular/platform-browser','@angular/platform-browser-dynamic','@angular/router',"@angular/cdk","@angular/material","@angular/flex-layout",'zone.js',"hammerjs"];constnonTreeShakableModules=["@angular/material/prebuilt-themes/deeppurple-amber.css",'es6-promise','es6-shim','event-source-polyfill','jquery'];constallModules=treeShakableModules.concat(nonTreeShakableModules);module.exports=(env)=>{constextractCSS=newExtractTextPlugin('vendor.css');constisDevBuild=!(env&&env.prod);constsharedConfig={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: [newwebpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'}),// Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)newwebpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/,path.join(__dirname,'./ClientApp')),// Workaround for https://github.com/angular/angular/issues/11580newwebpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/,path.join(__dirname,'./ClientApp')),// Workaround for https://github.com/angular/angular/issues/14898newwebpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,path.join(__dirname,'./ClientApp')),// Workaround for https://github.com/angular/angular/issues/20357newwebpack.IgnorePlugin(/^vertx$/)// Workaround for https://github.com/stefanpenner/es6-promise/issues/100]};constclientBundleConfig=merge(sharedConfig,{entry: {// To keep development builds fast, include all vendor dependencies in the vendor bundle.// But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a 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,newwebpack.DllPlugin({path: path.join(__dirname,'wwwroot','dist','[name]-manifest.json'),name: '[name]_[hash]'})].concat(isDevBuild ? [] : [newwebpack.optimize.UglifyJsPlugin()])});constserverBundleConfig=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: [newwebpack.DllPlugin({path: path.join(__dirname,'ClientApp','dist','[name]-manifest.json'),name: '[name]_[hash]'})]});return[clientBundleConfig,serverBundleConfig];}
boot.server.ts (default)
import'reflect-metadata';import'zone.js';import'rxjs/add/operator/first';import{APP_BASE_HREF}from'@angular/common';import{enableProdMode,ApplicationRef,NgZone,ValueProvider}from'@angular/core';import{platformDynamicServer,PlatformState,INITIAL_CONFIG}from'@angular/platform-server';import{createServerRenderer,RenderResult}from'aspnet-prerendering';import{AppModule}from'./app/app.server.module';enableProdMode();exportdefaultcreateServerRenderer(params=>{constproviders=[{provide: INITIAL_CONFIG,useValue: {document: '<app></app>',url: params.url}},{provide: APP_BASE_HREF,useValue: params.baseUrl},{provide: 'BASE_URL',useValue: params.origin+params.baseUrl},];returnplatformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef=>{constappRef: ApplicationRef=moduleRef.injector.get(ApplicationRef);conststate=moduleRef.injector.get(PlatformState);constzone=moduleRef.injector.get(NgZone);returnnewPromise<RenderResult>((resolve,reject)=>{zone.onError.subscribe((errorInfo: any)=>reject(errorInfo));appRef.isStable.first(isStable=>isStable).subscribe(()=>{// Because 'onStable' fires before 'onError', we have to delay slightly before// completing the request in case there's an error to reportsetImmediate(()=>{resolve({html: state.renderToString()});moduleRef.destroy();});});});});});
The text was updated successfully, but these errors were encountered:
It sounds like there are additional config steps needed for Angular Material. Since that's a third-party package, I don't know what those steps are, so you'd need to check Angular Material docs for details.
However to make this easier, you might want to consider using our newer Angular CLI-based template. This means you have a completely standard Angular project, so whatever setup steps are most commonly used for third-party packages will be sure to work just the same for your project. For installation info, please see: https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio
I have created asp.net core Angular template project in Visual studio 2017 (15.5.6). I added and configured Angular Material 2.
But when a page loads, I see a common html button. But after loading all js files, styles are applied to the button.
Also I have created GIF.
I import material module in "app.shared.module.ts".
Snapshots:
package.json
webpack.config.vendor.js
boot.server.ts (default)
The text was updated successfully, but these errors were encountered: