问题标签 [angular-hybrid]

我们有一个使用 karma 进行单元测试的混合 Angular 应用程序。我正在尝试添加我们的第一套测试，但我收到一些错误，表明 karma 无法找到dashboard.component.html.

看法：

这是我的karma.config.js

我们的混合应用程序是使用 Webpack 编译的。所有视图文件都复制到/view. 这是我们的 webpack 文件：

最后这是我非常简单的测试：

这个应用程序可以正常工作，因为它应该在npm start. 我再次遇到的问题是 HTML 文件的 404。

错误：'未处理的承诺拒绝：'，'无法加载视图/组件/仪表板/dashboard.component.html'，'; 区域：'，'ProxyZone'，'; 任务：', 'Promise.then', '; 值：', '未能加载视图/组件/dashboard/dashboard.component.html', undefined

我尝试覆盖测试规范以TestBed.configureTestingModule()在不同位置查找 HTML 文件。我尝试在 karma.config.js 中添加新的文件模式。我也尝试过将两者结合起来，但没有成功。

我一直在尝试在我们的 Hybrid AngularJS/NG6 应用程序中设置测试，但哇，这很难做到。我不断收到错误。最新情况如下：

错误：StaticInjectorError（DynamicTestModule）[$injector]：

StaticInjectorError（平台：核心）[$injector]：

NullInjectorError：$injector 没有提供者！

我有以下内容component：

这工作得很好。我可以从我们的 API 中提取数据。另一方面，我有这个spec文件：

当我运行这个spec文件时，我得到了上面列出的错误。我不知道错误试图告诉我什么，因为它非常模糊。

如何将$Injector模块正确地提供到spec文件中？

我们正在使用增量方法将 AngularJS 应用程序升级到 Angular：我们希望能够在 Angular 中创建新组件并逐个升级现有的 AngularJS 组件，在此过程中所有这些仍然具有功能性应用程序。

我们使用官方文档以及关于现实世界应用程序中混合 Angular/AngularJS 应用程序的几篇文章。

这是我们的尝试和我们得到的错误。

语境

• AngularJS 1.7.3
• 角 6.1.7
• 打字稿 2.7.2
• 角-cli

第一步

• 升级到 AngularJS 1.7
• 删除 Grunt 并使用 angular-cli
• 使用 ngUpgrade (app.module.ts 和 app.module.ajs.ts)

迁移到 Typscript：处理错误

这是官方流程：将 .js 文件重命名为 .ts。

然后我们从 Node require()转移到 TypeScript 模块加载 ( var ... = require--> import ... = require)

理想情况下，我们应该纠正由于使用 TypeScript 编译器而导致的所有打字错误。

但是TypeScript 文档指出可以进行增量迁移：在开始时容忍 TypeScript 错误，以便在不修改的情况下编译 js 代码（并且在修复代码后更严格）。

为了实现这一点，我们使用awesome-typescript-loader而不是 tsc 来获取这些选项：transpileOnly、errorsAsWarnings（这需要使用angular-builders/custom-webpack）。

这些选项允许通过编译，但似乎编译完成了两次：第一次没有错误（警告与否），但第二次有错误......所以构建失败。我们怎样才能只运行第一个编译？

替代尝试：保留 .js 文件，导入和引导错误

我们还尝试了一种非官方且不寻常的方式来增量迁移 js 代码，即将原始 .js 文件与新的 .ts 文件一起保留。

我们在编译或应用程序加载时遇到了一些错误，这些错误与导入 AngularJS 和模块管理有关。实际上TypsScript 模块文档指出：

Some libraries are designed to be used in many module loaders, or with no module loading (global variables). These are known as UMD modules. These libraries can be accessed through either an import or a global variable....can be used as a global variable, but only inside of a script. (A script is a file with no imports or exports.)

我们注意到：

• 在 .js 文件中：访问AngularJS 全局角度（如果我们删除require("angular")） -脚本模式

• 在 .ts 文件中：我们不能使用import from angular，否则我们会得到错误angular.module is undefined-模块模式

考虑到这一点，我们使应用程序在浏览器中编译和加载没有错误，但最后：

this.upgrade.bootstrap(document.body, [App])

在 AngularJS 引导时生成错误：

Angular 1.x not loaded !

如何解决这个问题？可能是因为我们没有以 TypeScript 模块的方式导入 AngularJS 来避免之前的错误？

官方文档提到了 angular.IAngularStatic（还是报错）？

我们也可以试试setAngularJSGlobal()吗？Used when AngularJS is loaded lazily, and not available on window

顺便说一句，调用 bootstrap() 时使用 [App] 或 ["App"] 有什么区别？

...由于我们是这个升级过程的新手，我们可能会做完全错误的事情。感谢您分享您的经验！

配置文件

角.json

tsconfig.json

由于我想将 AngularJs 应用程序迁移到 Angular 7，因此我使用 ngUpgrade 创建了一个混合应用程序。旧的 AngularJs 应用程序现在嵌入在新的 Angular 应用程序中。

当我运行ng test它时，它会触发我的 Angular 测试，这很好。但我也想运行用 AngularJs 编写的旧测试。

目前我的 Karma 配置如下所示：

该./karma.webpack.config文件是：

最后但并非最不重要的是karma.entrypoint.ts：

之前，当我只有 AngularJs 应用程序时，我使用 karma 命令以非常相似的结构运行测试。它利用我的 webpack 配置创建了一个新的 karma webpack 配置。现在，当我通过ng test命令运行它时，我什至无法require在'./karma.webpack.config'业力配置的开头（我得到Invalid config file! TypeError: require(...) is not a function）。

我应该如何处理这种情况来运行所有测试？

我有一个网络电子应用程序，我想在其中一个页面中实现相机。

问题是最近出于安全原因，网络摄像头只能通过“https”访问。但是在本地提供应用程序的 Electron 应用程序的情况下，方案是不同的，因此流式传输失败。所以我的问题是：

有没有什么好的解决方案可以在电子内部实现网络摄像头？

如果没有，除了网络摄像头之外还有什么解决方案可以工作？

我有一个包含 Angular 1.x 和 Angular 7 路由的混合环境。Angular 1.x 路由使用旧的 bo​​otstrap 3，而 Angular 7 应该使用 bootstrap 4。我尝试通过导入仅为 Angular 7 路由封装 bootstrap 4

组件内部

但我不断得到

模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）中的错误：TypeError：无法读取 normalizeBackSlashDirection 处未定义的属性“替换”（C:\Users...\RequestShortener.js :16:17) 在新的 RequestShortener (C:\Users...\RequestShortener.js:26:15) 在新的 Compiler (C:\Users\r...\Compiler.js:185:27) 在 Compiler。在 Object.pitch (C:\Users.. .\mini-css-extract-plugin\dist\loader.js:70:43) 唯一可行的方法是通过在组件顶部添加以下内容来直接将 css 导入模块：

但随后 bootstrap 4 会覆盖 bootstrap 3 类并破坏我的 Angular 1.x 样式。

帮助ppp

我想在我们现有的 Angular JS 应用程序中运行我的新 Angular 7 应用程序？有没有人有任何演示示例或我们在做的时候应该考虑的步骤？

我无法弄清楚如何使用混合 Angular 导航到另一个页面/组件。

在 Angular 2 中，我们使用 Router 和类似的东西：

在混合 Angular 中，我使用混合路由：

如何使用混合 Angular 从打字稿中导航到另一个页面/组件？

我正在尝试降级我的 Angular 组件以使其在 AngularJS 应用程序中使用。

为了测试，我创建了非常简单的 Angular 组件：

之后，我在声明和 entryComponents 的 Angular 模块中注册它：

之后，我简单地创建了 angularjs 指令以使该组件在我的 angularJS 应用程序中可用。

我在我的模板中使用了它

错误：

实例化组件“MyTestComponent”时出错：不是有效的“@angular/upgrade”应用程序。您是否忘记降级 Angular 模块或将其包含在 AngularJS 应用程序中？

在我阅读的所有教程中，我可能遗漏了一些关键步骤。Angular 2 模块和 AngularJS 模块之间没有联系，但是直接导入了需要降级的组件。

欢迎任何建议！

在我的项目中，我需要将一个全局变量从环境文件中注入到 SCSS 文件中，以便在整个应用程序中使用。

遵循这样的建议对我来说是不可能的，因为该应用程序包含大约 50 种不同的可能配置，因此维护这么多项目angular.json是不可行的。

在我们当前的设置中，使用 webpack，我们使用了data选项sass-loader来注入从环境文件中导入的任何变量。目前使用 angular-cli 是不可能的 - 使得迁移变得不可能。

我们怎样才能做到这一点？