Angular 5集成materialize-css报错：无法找到window上的Materialize对象

这个错误的核心原因就是materialize-css没有在angular2-materialize之前被全局加载，导致window上不存在Materialize对象。按照下面的步骤一步步操作就能解决：

1. 确保安装了所有兼容依赖 #

Angular5对依赖版本比较敏感，先安装适配的包：

npm install materialize-css@0.100.2 angular2-materialize@2.1.2 jquery@3.3.1 --save

这里指定版本是为了避免高版本依赖和Angular5不兼容的问题，如果你已经安装过，可以重新安装这些版本覆盖。

2. 配置angular-cli.json（关键步骤！） #

Angular5使用的是根目录下的angular-cli.json（不是新版的angular.json），需要在这里全局引入脚本和样式，顺序绝对不能错：

打开文件找到apps数组下的styles和scripts节点，修改成如下内容：

"apps": [
  {
    // 其他原有配置...
    "styles": [
      "../node_modules/materialize-css/dist/css/materialize.min.css",
      "styles.css"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/materialize-css/dist/js/materialize.min.js"
    ],
    // 其他原有配置...
  }
]

必须先引入jQuery，再引入Materialize的JS，这样Materialize才能正确挂载到window全局对象上。

3. 在Angular模块中导入Angular2MaterializeModule #

打开app.module.ts，导入模块并添加到imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Angular2MaterializeModule } from 'angular2-materialize';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    Angular2MaterializeModule // 注册模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 重启ng serve #

修改angular-cli.json后，必须重启ng serve才能让新配置生效，否则缓存会导致错误依旧存在。

完成这些步骤后，刷新页面应该就能正常加载了。如果还有问题，可以检查node_modules里的包是否安装完整，或者angular-cli.json里的文件路径有没有拼写错误。

内容的提问来源于stack exchange，提问作者Kelvin Primo