CODEWITHSUNDEEP
angularangular-material2
micronyks
micronyks

Reputation: 55443

How to add angular material in Angular ~4.3.3

I'm getting the following error when I use @angular/material and @angular/cdk:

http://localhost:3000/@angular/cdk/observe-content (404) Not found error

systemjs.config.js

map: {
       ...

    // Angular Material 
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',

    // CDK individual packages
    '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
}

materialmodule.ts

import { NgModule }      from '@angular/core';
import { MdButtonModule, MdCheckboxModule,MdButton } from '@angular/material';

@NgModule({
    imports: [
        MdButtonModule,
        MdButton
    ],
    exports: [
        MdButtonModule,
        MdButton
    ]
})
export class CustomMaterialModule { }

app.component.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent }  from './app.component';
import {CustomMaterialModule} from './materialmodule/material.module';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CustomMaterialModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

What is missing from my code that causes the error as stated above?

Upvotes: 1

Views: 2011

Answers (2)

Saturn
Saturn

Reputation: 430

Version for angular 4.3 

        '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
        '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
        '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
        '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
        '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
        '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
        '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
        '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
        '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
        '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
        '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
        '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
        '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',

Upvotes: 2

Poul Kruijt
Poul Kruijt

Reputation: 71961

By the looks of it, you need to add the cdk/observe-content entry to your systemjs.config.js. Here is a list of packages they serve, doesn't hurt adding them just to be safe. It is weird though that their documentation only says to add platform and a11y, but I suppose depending on what kind of material module you use, you have to import a certain cdk:

'@angular/material': 'dist/bundles/material.umd.js',
'@angular/cdk': 'dist/bundles/cdk.umd.js',
'@angular/cdk/a11y': 'dist/bundles/cdk-a11y.umd.js',
'@angular/cdk/bidi': 'dist/bundles/cdk-bidi.umd.js',
'@angular/cdk/coercion': 'dist/bundles/cdk-coercion.umd.js',
'@angular/cdk/keyboard': 'dist/bundles/cdk-keyboard.umd.js',
'@angular/cdk/observe-content': 'dist/bundles/cdk-observe-content.umd.js',
'@angular/cdk/platform': 'dist/bundles/cdk-platform.umd.js',
'@angular/cdk/portal': 'dist/bundles/cdk-portal.umd.js',
'@angular/cdk/rxjs': 'dist/bundles/cdk-rxjs.umd.js',
'@angular/cdk/table': 'dist/bundles/cdk-table.umd.js',
'@angular/cdk/testing': 'dist/bundles/cdk-testing.umd.js',

If you are just going to use your CustomMaterialModule as a barrel you should just export the modules you need (not the components), no need to import them:

@NgModule({
  exports: [
    MdButtonModule
  ]
})
export class CustomMaterialModule {}

Upvotes: 7

Related Questions