向 Asp.Net Core 2 SPA 添加 Angular Material [英] Adding Angular Material to Asp.Net Core 2 SPA
问题描述
我似乎无法让它发挥作用.我在 SO 和网上找到的点点滴滴都已过时，而且似乎不完整.
I cant seem to get this to work. The bits and pieces I find on SO and the net are out of date and seem incomplete.
这是我的 package.json:
Here is my package.json:
{
"name": "MyProj.Site",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"@angular/animations": "5.1.1",
"@angular/common": "5.1.1",
"@angular/compiler": "5.1.1",
"@angular/compiler-cli": "5.1.1",
"@angular/core": "5.1.1",
"@angular/forms": "5.1.1",
"@angular/http": "5.1.1",
"@angular/platform-browser": "5.1.1",
"@angular/platform-browser-dynamic": "5.1.1",
"@angular/platform-server": "5.1.1",
"@angular/router": "5.1.1",
"@ngtools/webpack": "1.9.1",
"@types/chai": "4.0.1",
"@types/jasmine": "2.5.53",
"@types/webpack-env": "1.13.3",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"@angular/material": "5.0.1",
"@angular/cdk": "5.0.1",
"awesome-typescript-loader": "3.4.1",
"bootstrap": "4.0.0-beta.2",
"chai": "4.0.2",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"preboot": "5.1.7",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.6.1",
"url-loader": "0.5.9",
"webpack": "3.10.0",
"webpack-hot-middleware": "2.21.0",
"webpack-merge": "4.1.1",
"zone.js": "0.8.12",
"hammerjs": "2.0.8"
}
}
我的 webpack.config.vendor.js:
my webpack.config.vendor.js:
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',
'zone.js',
'@angular/cdk'
];
const nonTreeShakableModules = [
'hammerjs/hammer',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
'@angular/material/prebuilt-themes/indigo-pink.css',
];
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 to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig = 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,
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];
}
和我的 app.shared.module.ts:
and my app.shared.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
]),
MatButtonModule
]
})
export class AppModuleShared {
}
我的 vendor.config 编译得很好.当我在 VS2017 中调试项目时，出现此错误:
My vendor.config compiles fine. When I debug the project in VS2017, I get this error:
NodeInvocationException:预渲染失败，因为错误:错误:在 webpackMissingModule 中找不到模块rxjs/operators/take"(C:\Users\Mike\Source\MyProj\ClientApp\dist\main-server.js:15733:140)
NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "rxjs/operators/take" at webpackMissingModule (C:\Users\Mike\Source\MyProj\ClientApp\dist\main-server.js:15733:140)
任何有关我应该在何处引用 rxjs 模块的帮助将不胜感激.
Any help on where I should reference the rxjs modules would be appreciated.
推荐答案
可以在 package.json，@angular/material 有如下依赖:
As can be seen in the package.json, @angular/material has the following dependency:
"rxjs": "^5.5.5"
您的 package.json 中有 "rxjs": "5.4.2" ，这显然有点落后.我实际上为 flex-layout angular 包找到了一个 Github issue，它建议将 rxjs 升级到 5.5 解决了该包中的相同问题.我刚刚在你的设置中尝试了这个，可以确认它使用 5.5.5 如上所述.
You have "rxjs": "5.4.2" in your package.json, which is obviously a little behind this. I actually found a Github issue for the flex-layout angular package, which suggested uprading rxjs to 5.5 solves the same issue in that package. I just tried this with your setup and can confirm that it works using 5.5.5 as above.
安装更新版本后，您需要让 webpack 以正确的顺序重建.您可以通过项目的解决方案级重建来实现这一点，但如果没有，您可以运行以下命令以强制 webpack 正确构建:
Once you've installed the updated version, you'll need to get webpack to rebuild in the correct order. You might be able to get that to happen with a solution-level rebuild of the project(s), but if not, you can run the following to force webpack to build correctly:
webpack --config webpack.config.vendor.js
webpack
您可能没有全局安装 webpack - 如果没有，您可以使用以下(假设为 Windows):
You might not have webpack installed globally - if not, you can use the following (assuming Windows):
.\node_modules\.bin\webpack --config webpack.config.vendor.js
.\node_modules\.bin\webpack
这篇关于向 Asp.Net Core 2 SPA 添加 Angular Material的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
