[問題]如何在angular中導出Material Design Lite默認不導出的模組(使用Webpack.config.js或其他方式)

11153 · 2018年10月19日16:23

大家好，最近在使用Material Design Lite函式庫時，為了處理元件失效的問題，使用了

componentHandler.upgradeAllRegistered(); 方法重新註冊元件，同時也遇到了upgradeAllRegistered() not defined的問題，並沒有辦法使用declare var componentHandler: any; 解決。

Survey過網上很多資料後，找到問題來自Material Design Lite 中默認不會導出任何模組( MDL does not export any module by default. )

參考資料:

但也延伸出問題，原本該回答者的解法是使用Webpack的方式，額外使用 [exports-loader]的webpack plugin
但她是用於解決react.js中引用的問題，回答者的解法在Angular當中當然沒辦法完全套用。

參考資料:

雖然接著爬了一些文，在下面連結

找到angular使用客製化webpack設定的方式，但依然很多細節不清楚。

想請教各位如果要在Angular中做到一樣事情，應該怎麼設定並且import呢?

t7yang · 2018年10月19日16:46

官方有 demo app ，可以參考看看。看官方的範例還滿正常的，只需要匯入 MdlModule 就好了。

github.com

mseemann/angular2-mdl/blob/master/src/demo-app/app/app-module.ts#L47


import { DialogDemo } from './dialog/dialog.component';
import { DialogDeclarativeDemo } from './dialog-declarative/dialog-declarative.component';
import { LoginModule } from './dialog/login.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule,
  MdlModule,
  RouterModule.forRoot(appRoutes, {enableTracing: false}),
  LoginModule,
  BrowserAnimationsModule
],
declarations: [
  Angular2MdlAppComponent,
  Home,
  ButtonDemo,
  BadgeDemo,
  CardDemo,

11153 · 2018年10月19日17:06

感謝回覆，因為我是用js的版本，所以出現上面的這個問題。
在angular裡面也用不到官方另外提的 system js設定
我會試試這個版本