2
Ich habe eine harte Zeit, eckigen Material der asp.net Core 2.0 Angular Vorlage hinzuzufügen.Wie eckigen Material zu asp.net angular Vorlage hinzufügen
Ich habe folgte die here Sie beginnen und Winkel aktualisiert -> 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>
Ich habe die webpack.config.vendor.js zu Module hinzugefügt und manuell webpack
webpack --config webpack.config.vendor.js
webpack.config laufen .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*
ich diesen Fehler:
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
Ist das Template-Setup mit SystemJS? Wenn das so ist, wie? (ref. Appendix Angular Material)
Wo ist dieser Fehler?
Ich habe keine weiteren Änderungen an der Vorlage vorgenommen.
, welches Modul 'CounterComponent' Teil? – Faisal
app.module.shared- Der Code in der Frage – RoarG