如何添加角材料到asp.net角模板

我很难将角材料添加到asp.net核心2.0角模板。如何添加角材料到asp.net角模板

我都跟着入门here和更新的角度 - > 4.3.0

的package.json

{ 
     "name": "Website", 
     "private": true, 
     "version": "0.0.0", 
     "scripts": { 
     "test": "karma start ClientApp/test/karma.conf.js" 
     }, 
     "dependencies": { 
     "@angular/animations": "4.3.0", 
     "@angular/cdk": "^2.0.0-beta.10", 
     "@angular/common": "4.3.0", 
     "@angular/compiler": "4.3.0", 
     "@angular/compiler-cli": "4.3.0", 
     "@angular/core": "4.3.0", 
     "@angular/forms": "4.3.0", 
     "@angular/http": "4.3.0", 
     "@angular/material": "^2.0.0-beta.10", 
     "@angular/platform-browser": "4.3.0", 
     "@angular/platform-browser-dynamic": "4.3.0", 
     "@angular/platform-server": "4.3.0", 
     "@angular/router": "4.3.0", 
     "@ngtools/webpack": "1.5.0", 
     "@types/webpack-env": "1.13.0", 
     "angular2-template-loader": "0.6.2", 
     "aspnet-prerendering": "^3.0.1", 
     "aspnet-webpack": "^2.0.1", 
     "awesome-typescript-loader": "3.2.1", 
     "bootstrap": "3.3.7", 
     "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", 
     "jquery": "3.2.1", 
     "json-loader": "0.5.4", 
     "preboot": "4.5.2", 
     "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.4.1", 
     "url-loader": "0.5.9", 
     "webpack": "2.5.1", 
     "webpack-hot-middleware": "2.18.2", 
     "webpack-merge": "4.1.0", 
     "zone.js": "0.8.12" 
     }, 
     "devDependencies": { 
     "@types/chai": "4.0.1", 
     "@types/jasmine": "2.5.53", 
     "chai": "4.0.2", 
     "jasmine-core": "2.6.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" 
     } 
    }

app.module.shared.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'; 

@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' } 
     ]) 
    ] 
}) 
export class AppModuleShared { 
}

app.module.browser.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { MdButtonModule, MdCheckboxModule, MdButtonToggleModule } from '@angular/material'; 
import { AppModuleShared } from './app.module.shared'; 
import { AppComponent } from './components/app/app.component'; 


@NgModule({ 
    bootstrap: [ AppComponent ], 
    imports: [ 
     BrowserModule, 
     AppModuleShared, 
     MdButtonModule, 
     MdCheckboxModule, 
     MdButtonToggleModule 
    ], 
    providers: [ 
     { provide: 'BASE_URL', useFactory: getBaseUrl } 
    ] 
}) 
export class AppModule { 
} 

export function getBaseUrl() { 
    return document.getElementsByTagName('base')[0].href;

counter.component.html

<h1>Counter</h1> 

<p>This is a simple example of an Angular component.</p> 

<p>Current counts: <strong>{{ currentCount }}</strong></p> 

<button (click)="incrementCounter()" md-button>Increments</button> 
<md-button-toggle>Toggle me!</md-button-toggle>

我已经添加到模块到webpack.config.vendor.js和手动的WebPack运行

webpack --config webpack.config.vendor.js

webpack.config .vendor.js

*omittet code* 

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 = [ 
     '@angular/material/prebuilt-themes/deeppurple-amber.css', 
     'bootstrap', 
     'bootstrap/dist/css/bootstrap.css', 
     'es6-promise', 
     'es6-shim', 
     'event-source-polyfill', 
     'jquery', 
    ]; 

*omittet code*

我得到这个错误：

Error: Template parse errors: 'md-button-toggle' is not a known element: 1. If 'md-button-toggle' is an Angular component, then verify that it is part of this module. 2. If 'md-button-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <button (click)="incrementCounter()" md-button>Increments</button> [ERROR ->]<md-button-toggle>Toggle me!</md-button-toggle> "): ng:///AppModuleShared/[email protected]:0 
vendor.js:39475:34 
syntaxError 
http://localhost:60756/dist/vendor.js:39475:34 
vendor_b1710f1f4a0309d9d6fc</TemplateParser.prototype.parse 
http://localhost:60756/dist/vendor.js:50596:19 
vendor_b1710f1f4a0309d9d6fc</JitCompiler.prototype._compileTemplate 
http://localhost:60756/dist/vendor.js:64748:18 
vendor_b1710f1f4a0309d9d6fc</JitCompiler.prototype._compileComponents/< 
http://localhost:60756/dist/vendor.js:64668:56 
forEach self-hosted:5350:9 vendor_b1710f1f4a0309d9d6fc</JitCompiler.prototype._compileComponents 
http://localhost:60756/dist/vendor.js:64668:9 
vendor_b1710f1f4a0309d9d6fc</JitCompiler.prototype._compileModuleAndComponents/< 
http://localhost:60756/dist/vendor.js:64555:13 
then 
http://localhost:60756/dist/vendor.js:39464:148 
vendor_b1710f1f4a0309d9d6fc</JitCompiler.prototype._compileModuleAndComponents 
http://localhost:60756/dist/vendor.js:64554:16 
vendor_b1710f1f4a0309d9d6fc</JitCompiler.prototype.compileModuleAsync 
http://localhost:60756/dist/vendor.js:64483:32 
vendor_b1710f1f4a0309d9d6fc</</PlatformRef_.prototype._bootstrapModuleWithZone 
http://localhost:60756/dist/vendor.js:5075:16 
vendor_b1710f1f4a0309d9d6fc</</PlatformRef_.prototype.bootstrapModule 
http://localhost:60756/dist/vendor.js:5061:16 
<anonymous> 
boot.browser.ts:23:22 
__webpack_require__ 
bootstrap 75d1053ae484f61423f3:657 
fn 
bootstrap 75d1053ae484f61423f3:85 
<anonymous> 
http://localhost:60756/dist/main-client.js:3845:18 
__webpack_require__ 
bootstrap 75d1053ae484f61423f3:657 
<anonymous> 
bootstrap 75d1053ae484f61423f3:706 
<anonymous> 
http://localhost:60756/dist/main-client.js:1:11

这是模板的设置与SystemJS？如果是的话如何？（ref。Appendix Angular Material）

这个失败在哪里？

我没有对模板做任何其他更改。

来源

2017-09-14 RoarG

哪个模块的'CounterComponent'一部分？ – Faisal

app.module.shared-在这个问题上添加了问题 – RoarG

您需要添加材料模块在app.module.shared进口：

import { MdButtonModule, MdCheckboxModule, MdButtonToggleModule } from '@angular/material'; 

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' } 
     ]), 

     MdButtonModule, 
     MdCheckboxModule, 
     MdButtonToggleModule 

    ]

来源

2017-09-14 09:15:43 Faisal

中的代码：“这个模板是否设置了SystemJS？如果是这样的话？”（ref.Appendix Angular Material）“ – RoarG

如何添加角材料到asp.net角模板

回答

相关问题