Its been 2 days i am stuck with this issue ,Fairly new to angular 2 so i am trying to use materialize with angular 2 i resolved couple of errors it was asking to update to typscript version i updated that now there are more issues. Just wanted to understand what is the best way to use materialize with angular2 ?
package.json
{
"name": "SLA",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"build": "ng build && node server.js",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.2",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/material": "^5.0.0-rc0",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"angular2-materialize": "^15.1.10",
"axios": "^0.17.0",
"body-parser": "^1.18.2",
"core-js": "^2.4.1",
"express": "^4.16.2",
"hammerjs": "^2.0.8",
"jquery": "^2.2.4",
"materialize-css": "^0.100.2",
"oploggery": "^0.1.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.6.1"
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { StreamComponent } from './stream/stream.component';
import { StreamService } from './stream.service';
import { routing } from './app.routes';
import { MaterializeModule } from "angular2-materialize";
import { SearchComponent } from './search/search.component';
import { DetailComponent } from './detail/detail.component';
import { SlaChartComponent } from './sla-chart/sla-chart.component';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
const ROUTES = [
{
path: '',
redirectTo: 'app',
pathMatch: 'full'
},
{
path: 'stream',
component: StreamComponent
}
];
@NgModule({
declarations: [
AppComponent,
StreamComponent,
SearchComponent,
DetailComponent,
SlaChartComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterializeModule,
MatButtonModule,
MatCheckboxModule,
routing
],
providers: [StreamService],
bootstrap: [AppComponent]
})
export class AppModule { }
ERROR
Metadata version mismatch for module WebstormProjects/slariskanalysisgui/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in WebstormProjects/slariskan
alysisgui/src/app/app.module.ts, resolving symbol AppModule in C:/Users/sh529u/WebstormProjects/slariskanalysisgui/src/app/app.module.ts
As you don't give many of your code files, it is hard to answer your specific scenario. Regarding the question how to use materialize with angular 2? though, this is a demonstratable way to get the two to work together.
ng new ng-materialize
npm install --save materialize-css @types/materialize-css
Update app.component.html
<ul #collapse class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul>
Update `app.component.ts'
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; import * as $ from 'jquery'; import 'materialize-css'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterViewInit { @ViewChild('collapse') c_element: ElementRef; ngAfterViewInit(): void { $(this.c_element.nativeElement).collapsible(); } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.