角2材料卡

Question

Hi I'm very new to web development and starting off directly with angular2... Im doing some dummy web page for learning purpose but unable to implement md-card..

This is my app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {NewComponent} from './new.component';
import {AppComponent} from './app.component';
import { HttpModule } from '@angular/http';
import {MaterialModule} from '@angular/material';


@NgModule({
    imports:[BrowserModule,HttpModule,MaterialModule.forRoot()],
    providers:[],
    declarations:[AppComponent,NewComponent],
    bootstrap:[AppComponent]
})
export class AppModule{} 

in Html

    <div *ngFor="let data of dataServer" > 
    <div id="myimages">
<md-card>
<img src="{{data.images.image3}}">
</md-card>
    </div>  
    </div>

but ends up in following error

Error: Error: XHR error (404 Not Found) loading http://localhost:3000/@angular/material
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:647:29)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:236:37)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:136:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:304:33)
    Error loading http://localhost:3000/@angular/material as "@angular/material" from http://localhost:3000/app/app.module.js

I'm not sure if i'm doing it right way.. Can somebody please provide with implementation or workaround of md-card using angualr2 typescript. Thanks in advance

Answer 1

I'm building an app with Angular 2 Material Material card app with angular-cli

Note: Material card is in localhost:4200/news and if it require to login, just pass user: admin@admin.com and password: adm9