lightning-card does not work but lightning:card works

Question

I installed my first lwc open source project , I opened up component reference documentation specifically the card component in the Lightning Web Components section and not the aura components section and then component edited app.html entered this code in the app.html markup -

<template>
<lightning-card  title="Hello">
                <lightning-button label="New" slot="actions"></lightning-button>
                <p class="slds-p-horizontal_small">Card Body (custom component)</p>
                <p slot="footer">Card Footer</p>
    </lightning-card> 
</template>

it showed me an error that said

Failed to compile ./src/client/modules/my/app/app.html Module not found: Could not resolve lightning/card as D:\SALESFORCE\April15\MyFirstLWC-OSS\my-app\src\client\modules\lightning\card\cardundefined This error occurred during the build time and cannot be dismissed.

but then i opened the aura components , took reference from there and tried this ,

<template>
        <lightning:card  title="Hello">
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        <p slot="footer">Card Footer</p>
        </lightning:card>
</template>

and the code worked , Now i can't seem to understand why lightning-card did'nt work but lightning:card did.

js controller code:-

import {LightningElement} from 'lwc';

export default class App extends LightningElement {

}

Answer 1

You need to copy the basic js as well, once you include the import {LightningElement} from ‘lwc’; directive it should work.