angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.37k stars 6.75k forks source link

How to reference component from custom made material module #4010

Closed doorman02 closed 7 years ago

doorman02 commented 7 years ago

Bug, feature request, or proposal:

How to reference Material components from custom made material module

What is the expected behavior?

I have defined my custom material module like this

import { NgModule } from '@angular/core';

import { MdButtonModule, MdCheckboxModule, MdTabsModule, MdTooltipModule, MdAutocompleteModule, MdInputModule, MdSelectModule, MdSliderModule, MdMenuModule, MdSidenavModule, MdProgressBarModule, MdDialogModule, MdSnackBarModule } from '@angular/material';

export const MATERIAL_IMPORTS = [ MdButtonModule, MdCheckboxModule, MdTabsModule, MdTooltipModule, MdAutocompleteModule, MdInputModule, MdSelectModule, MdSliderModule, MdMenuModule, MdSidenavModule, MdProgressBarModule, MdDialogModule, MdSnackBarModule ];

@NgModule({ imports: [...MATERIAL_IMPORTS], exports: [...MATERIAL_IMPORTS], }) export class MaterialModule { }

What is the current behavior?

The components don't appear in the intellisense only the module

What are the steps to reproduce?

How can I reference one component from the module e.g. With the old module I did this

import { MdSnackBar } from '@angular/material';

But it doesnt find MdSnackbar like this

import { MdSnackBar } from '../../../app.material';

Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Latest Matetrial

Is there anything else we should know?

fxck commented 7 years ago

You can still do..

import { MdSnackBar } from '@angular/material';

..nothing wrong with it.

Also github issues are for bugs and feature requests, gitter and stackoveflow are better suited for support requests.

starksds commented 7 years ago

@doorman02 here is my material module. this works with the latest version of material and angular.

`import { ModuleWithProviders, NgModule } from '@angular/core';

import { MdAutocompleteModule } from '@angular/material'; import { MdCheckboxModule } from '@angular/material'; import { MdInputModule } from '@angular/material'; import { MdRadioModule } from '@angular/material'; import { MdSelectModule } from '@angular/material'; import { MdSliderModule } from '@angular/material'; import { MdSlideToggleModule } from '@angular/material'; // import { MdMenuModule } from '@angular/material'; import { MdSidenavModule } from '@angular/material'; import { MdToolbarModule } from '@angular/material'; import { MdListModule } from '@angular/material'; // import { MdGridListModule } from '@angular/material'; import { MdCardModule } from '@angular/material'; import { MdTabsModule } from '@angular/material'; import { MdButtonModule } from '@angular/material'; import { MdButtonToggleModule } from '@angular/material'; // import { MdChipsModule } from '@angular/material'; import { MdIconModule } from '@angular/material'; import { MdProgressSpinnerModule } from '@angular/material'; import { MdProgressBarModule } from '@angular/material'; import { MdDialogModule } from '@angular/material'; // import { MdTooltipModule } from '@angular/material'; import { MdSnackBarModule } from '@angular/material';

@NgModule({ imports: [ MdAutocompleteModule, MdCheckboxModule, MdInputModule, MdRadioModule, MdSelectModule, MdSliderModule, MdSlideToggleModule, MdSidenavModule, MdToolbarModule, MdListModule, MdCardModule, MdTabsModule, MdButtonModule, MdButtonToggleModule, MdIconModule, MdProgressSpinnerModule, MdProgressBarModule, MdDialogModule, MdSnackBarModule ], exports: [ MdAutocompleteModule, MdCheckboxModule, MdInputModule, MdRadioModule, MdSelectModule, MdSliderModule, MdSlideToggleModule, MdSidenavModule, MdToolbarModule, MdListModule, MdCardModule, MdTabsModule, MdButtonModule, MdButtonToggleModule, MdIconModule, MdProgressSpinnerModule, MdProgressBarModule, MdDialogModule, MdSnackBarModule ], providers: [

]

})

export class AppMaterialModule { }`

EdricChan03 commented 7 years ago

@starksds Note that you can put all the imports in one line at the top of your code, instead of it spanning so many lines of code.

jelbourn commented 7 years ago

NgModule affects which components are available in which components in your application. They don't change the ESM import paths.

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.