Asp.Net Core SpaTemplate永遠無法獲取Angular Material

Question

我一直在嘗試數週，以便將Angular Material從Microsoft中獲取到SpaTemplate中。有人可以幫助我理解爲什麼我無法遵循Angular Material的啓動指南並使其工作？有人可以幫助我獲得一個項目，以便我可以從SpaTemplate開始使用Angular Material。

我已經關閉服務器端預渲染，因爲我知道，會引起問題。但除此之外，我嘗試安裝Angular Material，我在cmd中看到一些錯誤。我導入並添加MaterialModule，然後我看到更多的錯誤在談論'ng-template' is not a known element。我已從導入數組中刪除UniversalModule，並導致更多問題。

如果有人可以請求幫助，請在此回覆。 Repo

而且我是誰從1.x的角度來的唯一的開發和誠實不感興趣？ Angular 1很容易開發，設置並不困難，添加外部代碼就像複製和粘貼一樣簡單。 Angular 2覺得他們製作了這個非常棒的框架，然後在服務器上託管時，沒有人知道如何使用它。

Answer 1

我開始用新的模板剛與核心2發佈我所擁有的一切工作，除了表......不知道爲什麼，但在那一個。

嘗試啓動和其他，沒有成功。材料最近..沒有表還沒有確定我理解數據源。

希望這有助於...這個東西還是一個新手。

不要忘記手動重建的WebPack進行更改後。 的WebPack --config webpack.config.vendor.js

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', 
    'hammerjs/hammer', 
    "@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|gif|jpg)(\?|$)/, 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]; 
} 

我使用與ASP渲染從索引移除app.module.shared。

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule, ReactiveFormsModule} from '@angular/forms'; 
import { HttpClientModule } from '@angular/common/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 { HttpTestComponent } from './components/Httptest/httptest.component'; 
import { MaterialTesterComponent } from './components/Httptest/materialTester.component'; 
import { MaterialGridComponent } from './components/Httptest/materialgrid.component'; 



import { MaintService } from './Services/maint.service'; 


import { 
    MdButtonModule, 
    MdChipsModule, 
    MdProgressSpinnerModule, 
    MdCardModule, 
    MdDatepickerModule, 
    MdInputModule, 
    MdAutocompleteModule, 
    MdNativeDateModule, 
    MdCheckboxModule, 
    MdRadioModule, 
    MdSelectModule, 
    MdSliderModule, 
    MdSlideToggleModule, 
    MdMenuModule, 
    MdListModule, 
    MdGridListModule, 
    MdTabsModule, 
    MdProgressBarModule, 
    MdTableModule, 
    MdCoreModule, 
    MdExpansionModule, 


} from '@angular/material'; 

import { CdkTableModule } from '@angular/cdk'; 


@NgModule({ 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     HomeComponent, 
     HttpTestComponent, 
     MaterialTesterComponent, 
     MaterialGridComponent, 

    ], 
    imports: [ 
     CommonModule, 
     HttpClientModule, 
     FormsModule, 
     ReactiveFormsModule, 
     CdkTableModule, 
     MdButtonModule, 
     MdChipsModule, 
     MdProgressSpinnerModule, 
     MdCardModule, 
     MdInputModule, 
     MdTabsModule, 
     MdExpansionModule, 
     MdDatepickerModule, 
     MdNativeDateModule, 
     MdCheckboxModule, 
     MdRadioModule, 
     MdListModule, 
     MdCoreModule, 
     MdProgressBarModule, 
     MdSelectModule, 
     MdSliderModule, 
     MdSlideToggleModule, 
     MdMenuModule, 
     MdGridListModule, 
     MdTableModule, 
     MdAutocompleteModule, 
      RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ], 
    providers: [ 
     MaintService 
    ] 
}) 
export class AppModuleShared { 
}