Angular2集成ng2-toasty报错：Toast通知完全不显示

我来帮你排查下这个问题，结合你已经完成的操作，大概率是这些配置环节有遗漏或者错误，咱们逐个核对：

1. 依赖名称拼写错误 #

你在webpack.config.vendor.js里写的是ng-toasty，但实际安装的包名是ng2-toasty，样式文件的路径也得对应修正：

const nonTreeShakableModules = [ 
  'bootstrap', 
  'bootstrap/dist/css/bootstrap.css', 
  'es6-promise', 
  'es6-shim', 
  'event-source-polyfill', 
  'ng2-toasty',  // 这里要改成ng2-toasty，和安装的包名一致
  'ng2-toasty/bundles/style-bootstrap.css',  // 路径也要对应ng2-toasty
  'jquery', 
];

修正后记得重新打包vendor资源，执行命令：webpack --config webpack.config.vendor.js

2. AppModule中正确初始化模块 #

确保你在app.module.shared.ts里导入的是Ng2ToastyModule，而且必须调用forRoot()方法完成初始化：

import { Ng2ToastyModule } from 'ng2-toasty';

@NgModule({
  imports: [
    // ...你的其他模块
    Ng2ToastyModule.forRoot()  // 这个forRoot()不能少，否则服务无法正常初始化
  ]
})
export class AppModuleShared { }

3. 在根组件中添加Toasty渲染容器 #

ng2-toasty需要一个DOM容器来渲染提示框，你得在根组件的模板（比如app.component.html）的最末尾添加这个容器标签：

<ng2-toasty></ng2-toasty>

把它放在所有内容之后，还能避免被其他页面元素遮挡。

4. 组件中正确调用Toasty服务 #

在需要弹出提示的组件里，要正确注入并调用ToastyService，别忘了指定你引入的bootstrap主题：

import { Component } from '@angular/core';
import { ToastyService } from 'ng2-toasty';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  constructor(private toastyService: ToastyService) {}

  showSuccessToast() {
    this.toastyService.success({
      title: '操作成功',
      msg: '任务已完成！',
      timeout: 3000,
      theme: 'bootstrap'  // 对应你引入的bootstrap样式主题
    });
  }
}

5. 检查样式是否正确加载 #

如果修正后还是没有样式，可以先在index.html中直接引入样式文件做测试：

<link rel="stylesheet" href="node_modules/ng2-toasty/bundles/style-bootstrap.css">

如果这样能显示样式，说明webpack的vendor打包配置还有问题，得确认样式是否被正确打包到vendor.css中。

6. 查看控制台错误信息 #

打开浏览器开发者工具的控制台，看看有没有模块找不到、注入失败这类报错，这些信息能帮你快速定位问题根源。

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