Angular 2自定义弹出组件toast（使用路由）

Posted 2023-03-21

参考技术A 原理：
使用Angular2的命名路由插座，一个用来显示app正常的使用，一个用来显示弹出框

浏览器的导航栏中则这样显示

路由配置

toast内容

创建用来跳转至popup路由的服务，例如popup.service

使用：
一、在app.module.ts中将服务导进来，注册

二、在使用的test.ts中导入

原文链接： https://blog.csdn.net/zhy13087344578/article/details/80930564

Angular 6 和业力'无法加载“@angular-devkit/build-angular”，它未注册'

【中文标题】Angular 6 和业力\'无法加载“@angular-devkit/build-angular”，它未注册\'

【英文标题】：Angular 6 and karma 'Can not load "@angular-devkit/build-angular", it is not registered'Angular 6 和业力'无法加载“@angular-devkit/build-angular”，它未注册'

【发布时间】：2018-09-24 16:03:01

【问题描述】：

我不得不迁移到最新的 Angular 版本。在那之后，业力测试停止工作，并继续显示错误日志：

14 04 2018 14:17:00.453:ERROR [preprocess]: Can not load "@angular-devkit/build-angular"，它没有注册！ 也许您缺少一些插件？

...\parkandrest-ui\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\packages\angular_devkit\build_angular\src\angular-cli-files\plugins\karma。 TS:52 常量选项 = config.buildWebpack.options; ^ 类型错误：无法读取未定义的属性“选项” 在初始化（...\parkandrest-ui\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\packages\angular_devkit\build_angular\src\angular-cli-files\plugins\karma. ts:52:39) 在 Array.invoke (...\parkandrest-ui\node_modules\di\lib\injector.js:75:15) 在 Injector.get (...\parkandrest-ui\node_modules\di\lib\injector.js:48:43) 在 E:\Workspace\Training\spring-boot-tutorial\parkandrest-ui\node_modules\karma\lib\server.js:166:20 在 Array.forEach () 在 Server._start (...\parkandrest-ui\node_modules\karma\lib\server.js:165:21) 在 Injector.invoke (...\parkandrest-ui\node_modules\di\lib\injector.js:75:15) 在 Server.start (...\parkandrest-ui\node_modules\karma\lib\server.js:126:18) 在对象处。

我的 karma.conf.js 文件如下所示：

module.exports = function (config) 
  config.set(
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    ,
    files: [
       pattern: './src/test.ts', watched: false 
    ],
    preprocessors: 
      './src/test.ts': ['@angular-devkit/build-angular']
    ,
    mime: 
      'text/x-typescript': ['ts','tsx']
    ,
    coverageIstanbulReporter: 
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    ,
    angularCli: 
      config: './angular.json',
      environment: 'dev'
    ,
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  );
;

@angular-devkit\build-angular 当然已安装。我很感激任何帮助。

编辑： 我有一个解决方案，它实际上结合了大多数用户对我的问题的回答和我自己的回答。首先，我将整个项目更新为稳定的 Angular 6 版本。接下来，我像@R.Richards 建议的那样生成了空项目，然后我用新项目替换了旧项目中的几乎所有配置。最后，我遇到了@Suvendu 警告我的问题。我使用他的解决方案来解决它。不幸的是，我的环境（Intellij IDEA 2017.3.4 Ultimate）仍然存在一个问题，它不允许我直接从我的 IDE 开始业力测试（我遇到了@Suvendu 提到的相同错误），但是，这是一个主题下一个问题。

【问题讨论】：

我刚刚通过全新安装的新 CLI (6.0.0-rc.4) 和 Angular (6.0.0-rc.5) 进行了尝试。测试运行没有问题。也许你应该从一个新的应用程序（你在旁边创建的）中获取一个 karma.config.js，看看它是否适合你。

【参考方案1】：

我的解决方案有点不同，因为我必须移动 karma.conf.js。

更新所有依赖项并确保应用程序本身按预期工作 如果尚未完成：将 karma.conf.js 中出现的每个 @angular/cli 替换为 @angular-devkit/build-angular 从 karma.conf.js 中完全删除 files 和 preprocessor 配置。这都是在 angular.json 中定义的，应该由@anguler-devkit karma 插件自动处理。

【讨论】：

在更改为 @angular-devkit 后必须删除预处理器行...谢谢

@hugo der hungrige 我面临报道问题。正如我的项目覆盖范围没有显示所有文件。你能帮他理解为什么会这样吗？ ***.com/questions/62152730/…

【参考方案2】：

找不到模块“@angular-devkit/build-angular”

这对我的项目有用：

npm install -g @angular/cli npm install @angular/cli ng update @angular/cli --migrate-only --from=1.7.0 ng 更新@angular/core npm install rxjs-compat ng 服务

我希望这对你有用！

【参考方案3】：

我关注this guide 对项目进行了干净迁移，这为我解决了同样的问题。

【参考方案4】：

尝试使用 npm 安装 karma-webpack，然后将其添加到插件数组中 -

 plugins: [
  ...
  require('karma-webpack'),
  ...
],

并用这个替换预处理器-

preprocessors: 
  './src/test.ts': ['webpack']
,

这适用于我的情况，也适用于以下预期的未来错误-

错误：'@angular-devkit/build-angular/plugins/karma' karma 插件应该在 Angular CLI 中使用，在它之外无法正常工作。

希望这会有所帮助。

【参考方案5】：

我的解决方案是将我的 NODE_ENV 环境变量设置为“生产”。在尝试升级到 Angular 6 时，我没有意识到 @angular-devkit/build-angular 已列在我的 devDependencies 中，它们未安装在生产环境中。

运行“unset NODE_ENV”并从 /etc/environment 中删除 NODE_ENV 解决了我的问题。 （注意：在实际生产环境中更改此变量时要小心）。

【参考方案6】：

在您的 karma.conf.js 插件部分添加以下库。这是在 Angular8 中完成的。

require('@angular-devkit/build-angular/plugins/karma')