. Szablon Spa .NET Core 2 z materiałem kątowym

Question

Stara się uzyskać prawdziwy materiał kątowy lub dowolny zestaw sterujący innej firmy do pracy z tym nowym szablonem. W tym nowym szablonie pakiet sieci Web jest podzielony na TreeShakable i NonTreeShakable. Ponadto app.module jest teraz app.module.shared, app.module.browser, app.module.server.

Jak próbowałem to zrobić, aplikacja będzie działać tylko z modułami skonfigurowanymi w app.module.browser, ale znaczniki materiału nie są przetwarzane. Próbowanie czegoś prostego i próbowanie przycisku. Nie dostaję żadnych błędów, ale to nie działa. Poszedłem do ich przykładu w Plunkerze, skopiowałem to, co on wygenerował, i wyświetla się poprawnie mówiąc, że mam przynajmniej css w prawo.

Włączając konfigurację dostawcy pakietu internetowego jako punkt wyjścia, ponieważ wydaje się to kluczowe, ponieważ zawiera pakiety css i 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 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]; 
} 

Answer 1

Musisz zawierać materiał kątową i CDK w nonTreeShakableModules jak:

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', 
]; 

Upewnij się, że zainstalowane zarówno kątowych materialnych i CDK moduły z KMP z następujących 2 komendy (moduł animacji jest opcjonalny):

npm install --save @angular/material @angular/cdk 
npm install --save @angular/animations 

Należy dodać następujące wiersze w 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", 

Teraz należy spróbować zbudować z wykonaniem WebPack następujące polecenie cmd lub PowerShell:

webpack --config webpack.config.vendor.js 

Jeśli nie ma błędów wy może zawierać komponenty, których chcesz użyć w 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, 
} from '@angular/material'; 
import { CdkTableModule } from '@angular/cdk'; 

oraz dodaj je do importu w @NgModule

Istnieje kilka składników, które są błędne do następnych poprawek. Podobnie jak składnik checkbox, który przerywa renderowanie po stronie serwera podczas odświeżania strony. Ale zostanie to naprawione w następnym wydaniu (już było w gałęzi głównej).