error resolved a angular

You are trying to import a third party module in your angular module so you need to provide the reference path of the related files in your system js folder.

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '.',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'@angular/ng2-dnd': 'npm:ng2-dnd/bundles/index.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: 'main.js',
defaultExtension: 'js'
}
}
});
})(this);

In above example yellow marked libraries are third party library which we import in our module by using system js file. Red color text are just like alias or short name of the related files which need to use in our angular module or component files for import.

If your MatButtonModule and MdCardModule is in different file then you need to import separately in module file.

Hope this will help you.

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Manav Pandya8y ago
Accepted answer
Hello

I have already faced this , and its really easy to resolve

Information :

MD is a prefix for material desigh [which is now deprecated in newer version in angular]

Now prefix is "Mat" , so every material design component should have MAT prefix

Solve your issue :

- Import following in module.ts file and also in component :
import { MatCardModule } from '@angular/material/card';
After importing you will be able to use Card module of angular material
Problem is that you are using "MdCardModule" instead "MatCardModule"

I hope it will be useful to resolve your issue

Thanks
Asad Ilyas8y ago
Manav Pandya ,
Debasis Saha,
Thnx work done sorry mister manav pandya i will again your mesage read so resolved a problem thnku
Asad Ilyas8y ago
Manav Pandya sir again error

import {MatButtonModule, MatCheckboxModule, MdCardModule } from '@angular/material/card';

same erorr mister manav pandya if u dont mind please create a small video ho to resolved this error
Asad Ilyas8y ago
sir i import a seprate but again error so please a little project create Debasis Saha
Debasis Saha8y ago
You are trying to import a third party module in your angular module so you need to provide the reference path of the related files in your system js folder.
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: '.',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            '@angular/ng2-dnd': 'npm:ng2-dnd/bundles/index.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: 'main.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);
In above example yellow marked libraries are third party library which we import in our module by using system js file. Red color text are just like alias or short name of the related files which need to use in our angular module or component files for import.
If your MatButtonModule and MdCardModule is in different file then you need to import separately in module file.

Hope this will help you.