标签: angular-hybrid

我有一个同时包含 Angular (2+) 和 AngularJS (1.x) 的应用程序。我们正在使用第三方 AngularJS 库，该库在链接函数中从其 attrs 数组中读取对象，如下所示：

//3rd party lib code:
module.directive('test', () => ({
  template: `Look at the console`,
  link(elt, scope, attrs) {
    console.log('link attrs.props', attrs.props);
  }
})) 

模板：

<!-- someObject = {name: 'foo'} -->
<test props="{{someObject}}"></test>

我们刚刚升级到最新版本的 AngularJS，并注意到一个问题。通常，attrs.props 计算结果为对象的字符串表示形式。我们得到的不是字符串化对象，而是“[object Object]”

我尝试了最小化复制，但无法重现问题，直到我尝试导入 Zone.js，如您在此 stackblitz 上看到的： https ://stackblitz.com/edit/angularjs-attrs-test?file=app.js

如果导入了 Zone.js（Angular 2+ 需要它），那么attrs.props就是"[object Object]"。没有它，attrs.props就是{name: 'foo'}。

这是一个已知的问题？有解决方法吗？

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

错误：StaticInjectorError(DynamicTestModule)[$injector]:

静态注入器错误（平台：核心）[$injector]：

NullInjectorError: $injector 没有提供者！

我有以下几点component：

import { Component, OnInit, Input, Inject } from '@angular/core';
import { DashboardService } from '../../services/dashboard/dashboard.service';

@Component({
    templateUrl: './views/components/dashboard/dashboard.component.html'
})
export class DashboardComponent implements OnInit {
    @Input()
    Session;
    Util;
    constructor(
        private _dashboardService: DashboardService,
        @Inject('Session') Session: any,
        @Inject('Util') Util: any
    ) {
        this.Session = Session;
        this.Util = Util;
    }

    ngOnInit() {
        this._dashboardService
            .getPrograms(this.Session.user.organization)
            .subscribe(
                data => {
                    console.log(data);
                },
                error => {
                    console.log(error);
                }
            );
    }
}

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

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

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

// my-test.component.ts
@Component({
    selector: 'my-test',
    template: '<h1>Hello World</h1>'
})
export class MyTestComponent {}

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

@NgModule({
    imports: [
        SharedModule,
        UpgradeModule
    ],
    declarations: [
        MyTestComponent,
       ... couple other components
    ]
    entryComponents: [ MyTestComponent ]

})
export class MyModule {
    ngDoBootstrap() {}
}

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

import {MyTestComponent} from 'path/to/my-test.component';
import {downgradeComponent} from '@angular/upgrade/static';

angular.module(name, [])
.directive('myNgTest', downgradeComponent({component: MyTestComponent}))

我在我的模板中使用了它

<my-ng-test></my-ng-test>

错误：

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

在我阅读的所有教程中，我可能遗漏了一些关键步骤。Angular 2 …

我有一个混合的 AngularJS/Angular 应用程序，需要一些时间来完成迁移以完全成为一个 Angular 应用程序。当这个过程发生时，我想从以前的构建系统转移到使用 CLI 和 webpack 来管理所有旧的 AngularJS 脚本。这是可能的，因为我之前已经通过将我的所有脚本添加到该scripts部分，angular.json如下所示：

"scripts": [              
  "src/app/angularjs/app.js",
  "src/app/angularjs/controllers/main.js",
  "src/app/angularjs/services/someService.js",
  "src/app/angularjs/controllers/someController.js"           
],

这运行良好，并且 CLI 通过ng serve并ng build根据需要继续为混合引导应用程序构建。我现在遇到的问题是手动列出我正在迁移的当前应用程序的每个文件并不理想。我有数百个脚本需要添加，我需要的是能够使用如下所示的通配符模式：

"scripts": [              
  "src/app/angularjs/**/*.js"
],

问题是不支持我所知道的这种语法。该glob模式是支持的assets部分angular.json是在这里，但没有说明在scripts部分：https://angular.io/guide/workspace-config#assets-configuration

在该scripts部分中，我找不到类似的解决方案。它确实有一个扩展的对象 API，但没有什么能解决我可以告诉从此处列出的特定目录中选择所有 .js文件的问题：https : //angular.io/guide/workspace-config#styles-and-scripts-configuration

是否可以通过某种方式使用 glob 模式或类似的方法来选择该scripts部分目录的所有文件，angular.json这样我就不必手动列出数百个单独的.js文件？

[编辑] 我用这个错误创建了一个演示存储库：https : //github.com/SamanthaAdrichem/hybrid-lazy-load-angularjs-injector-error

我们已按照说明操作，并且在普通混合动力车上一切正常，但是添加延迟加载失败并出现上述奇怪错误，并且始终按照文档所说的方式实现 ui 路由器（如下面的代码所示）。

加载应用程序时一切正常，但是当点击延迟加载的路线时，我们收到错误

Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: 在AngularJS注入器被设置之前试图获取它。)

我已经尝试过这里列出的解决方案

https://github.com/ui-router/angular-hybrid/issues/93

https://github.com/ui-router/angular-hybrid/issues/150

https://github.com/ui-router/angular-hybrid/issues/395

https://github.com/ui-router/sample-app-angular-hybrid/issues/10

但这些都没有解决它。我们不使用 ng serve 因为它会因随机内存问题而崩溃（可能也是由于混合），我们需要代理到登录页面，但登录页面和我们的项目将在同一端口上运行，这不是可能。所以这需要在后端进行一些重构。

它有时会根据我要去的页面加载一个新的块文件。但大多数情况下我都会遇到这个错误。

有趣的是，在我正在测试的页面中，我们没有使用任何混合代码。基本上我们不再升级任何代码，我们只是降级一些观察者以打开旧页面的模式。

这些是我们正在运行的版本

"@angular/cli": "9.1.7",
"@angular/animations": "9.0.7",
"@angular/common": "9.0.7",
"@angular/compiler": "9.0.7",
"@angular/core": "9.0.7",
"@angular/forms": "9.0.7",
"@angular/localize": "9.0.7",
"@angular/platform-browser": "9.0.7",
"@angular/platform-browser-dynamic": "9.0.7",
"@angular/router": "9.0.7",
"@angular/upgrade": "9.0.7",
"@uirouter/angular": "6.0.1",
"@uirouter/angular-hybrid": "10.0.1",
"@uirouter/angularjs": "1.0.26",
"@uirouter/core": "6.0.5",
"@uirouter/rx": "0.6.5",

在详细的错误和一些代码下面，不知道还有什么可以分享或我可以安全地分享什么。

关于如何调试的任何建议都会很可爱！

详细错误

stateService.ts?8765:537 Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: …

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

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

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

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