问题标签 [angular-hybrid]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
184 浏览

angularjs - 将 AngularJS 数组传递给降级的 Angular 7 组件

我正在将 AngularJS 应用程序转换为 Angular。我目前正在运行一个混合解决方案,其中大多数组件仍然是 AngularJS 组件,并且正在慢慢地将组件重写为 Typescript。我正在尝试降级要在 AngularJS 模板中使用的 Angular 组件,并且该组件接受列表的 @Input。

Angular 控制器中的输入声明

在 AngularJS 模板中:

这个@Input 将是字符串'$ctrl.list'

这个@Input 将是一个空字符串

如何将 AngularJS 组件/模板中的列表传递给 Angular 7 组件/模板?

0 投票
1 回答
108 浏览

angularjs - 如何使用 @angular/upgrade 在 Angular 1 应用程序中使用 Angular 2 组件

这个问题可能是重复的,但我已经尝试了所有可能的选项。

我正在尝试使用 @angular/upgrade 在 Angular 1 应用程序中使用我的 Angular 2 组件。

angular2 文件:-

app/components/hello 中的简单 hello 组件。

你好.component.ts

你好.component.html

app.module.ts

在我的 Angular 1 应用程序中:- app.ts(根文件)

Angular 1 的 index.html (我添加了基本 href 和 root,这是 angular 的默认组件,app-root 组件在我的 angular 1 应用程序中正确呈现)

header.html(我想在其中显示我的 angular 2 hello 组件的 angular 1 header 组件)

截图。 Angular 2 根组件在 Angular 1 应用程序中正确呈现 Angular 2 hello 组件在 Angular 1 应用程序中未正确呈现

提前致谢。

0 投票
2 回答
554 浏览

angular - 混合应用程序的 Karma 测试中的“参考错误:未定义角度”

我正在尝试为混合应用程序中的角度组件编写单元测试。有问题的组件在其方法之一中使用“let var = angular.element (.....)”,这是导致错误的代码。

该项目构建良好,一切都按预期工作。

但是在 spec.ts 文件中,默认测试

导致 Karma 抛出“参考错误:未定义角度”的错误。

我尝试寻找解决方案,但找不到与此相关的任何内容(有一个问题存在相同的错误,但这些项目使用了 AngularJS 和已弃用的 bower 包)。我还尝试在 Angular.json 文件中的 test => 脚本中声明角度节点模块路径,但这会导致 Karma 超时的另一个错误。我想知道这个问题是否特定于混合应用程序?

0 投票
1 回答
415 浏览

angular - 没有 TypeScript 的 Angular 8 依赖注入?

我目前正在关注将 AngularJS (1.5.x) 应用程序迁移到 AngularJS / Angular 8 混合的教程。我们已经决定暂时不使用 TypeScript,而是坚持使用 Babel 进行 JavaScript 转译。如果没有 TypeScript,我似乎在 Angular 中找不到任何关于依赖注入的信息。

app.module.js

运行应用程序时,我收到未捕获的错误:无法解析 AppModule 的所有参数:(?)。

我认为这是因为没有 TypeScript 而没有注入 UpgradeModule? https://angular.io/guide/dependency-injection#dependency-injection-tokens

我已经尝试this.upgrade = upgrade在构造函数中进行设置,但由于 Angular 不知道是什么,所以从未达到过upgrade

有没有办法在没有 TypeScript 的情况下注入 UpgradeModule?

还是我遇到的错误是因为不同的原因?

0 投票
0 回答
209 浏览

angularjs - using storybook with for hybrid angular app

I'm trying to use storybook with my hybrid (Angular + angularjs) app.

My Angular component works. But my angularjs component fails with:

HybridWrapperComponent.html:1 ERROR Error: Trying to get the AngularJS injector before it being set.

I understand that this part is missing:

But how do I add it to storybook module?

Have you had experience using storybook for angular hybrid applications?

Cheers

P.S. How's the weather? Stack overflow want's more text that is not code...

0 投票
2 回答
6226 浏览

javascript - 如何在 angular.json 的脚本部分使用 glob 模式?

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

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

问题是不支持这种语法。glob 模式在此处所述的部分中支持,但在以下部分中不受支持:https ://angular.io/guide/workspace-config#assets-configurationassetsangular.jsonscripts

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

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

0 投票
1 回答
389 浏览

angular - UI-路由器混合:在触发带有 NG2 组件的 NG1 状态之前,NG2 状态不起作用

我有一个大型 angularjs 1.7.4 应用程序,其 UI-router 在 HTML5 模式下具有多个入口点。

(项目使用 babel 7.6 编译 typescript 和 corejs3 polyfill,所以我没有使用 angular-cli)。

我正在尝试将其中一个入口点迁移到混合应用程序(Angular 8.2.13,@uirouter/angular-hybrid 9.0.0)。

我遵循了迁移指南@ https://angular.io和 https://github.com/ui-router/angular-hybrid 上的指南,除了Angular 中的状态定义之外,一切似乎都在工作。它们仅在触发带有 Angular 组件的 angularjs 状态后才起作用。

在此之前尝试使用 NG2 状态时,控制台中没有任何内容(为 ui-router 启用了跟踪)。

我已经坚持了好几天了,我没有想法......

ng1hello - 带有角度分量的 ng1 状态 ng2hello - 带有角度分量的角度状态 ng1hi - 带有角度分量的 ng1 状态 ng2hi - 带有角度分量的 ng2 状态

情况1:

  1. 重新加载“/”:好的。
  2. 单击“ng1hello”的 ui-sref。好的
  3. 单击“ng2hello”的 ui-sref。好的
  4. 单击“ng2hi”的 ui-sref。好的

案例二:

  1. 重新加载“/”:好的。
  2. 单击“ng2hello”的 ui-sref。不好
  3. 单击“ng2hi”的 ui-sref。不好
  4. 单击“ng1hello”的 ui-sref。好的
  5. 单击“ng2hello”的 ui-sref。好的
  6. 单击“ng2hi”的 ui-sref。好的

案例3:

  1. 在“/ng1hello”上重新加载 OK。

案例4:

  1. 在“/ng2hello”上重新加载不行。

编辑:我在这里重现了 Stackblitz 中的问题: https ://angular-hybrid-issue.stackblitz.io/ https://stackblitz.com/edit/angular-hybrid-issue

0 投票
1 回答
642 浏览

angularjs - 在角度混合应用程序中首次成功路由后,Angular router.navigate 无法导航

我在 AngularJS (1.5.6) 和 Angular (7.2.0) 中有一个混合应用程序,我正在尝试实现适用于 Angular 和 AngularJS 组件的路由。我已使用以下链接更改 Angular 组件的路由配置:https ://github.com/angular/angular.io/tree/master/public/docs/_examples/upgrade-phonecat-3-router/ts/app

问题:当我尝试使用 router.navigate 方法从一个 Angular 组件导航到另一个 Angular 组件时,它工作正常。但是,如果我尝试使用相同的 router.navigate 方法对任何其他页面进行其他导航或返回到同一页面,则没有任何反应,url 也没有变化。

但是,如果我刷新页面(在已经导航的第二个页面上),那么来自该页面的任何导航都会发生,就好像路由器被初始化为第一个导航一样。

简而言之,router.navigate 方法只在第一次工作。对于后续导航,除非刷新页面,否则它会失败。

/** 调用 router.navigate 从第一个角度分量到第二个角度分量 **/

发生此导航并显示第二页(组件)。

/但是当尝试使用以下命令导航回第一页时: /

/* 导航没有发生,url 保持不变,但我刷新页面(第二页的当前 url)然后尝试导航,它可以工作

谁能解释一下这种行为?是否可以在混合环境中同时使用 Angular 和 AngularJS 路由?如果上述方法不起作用,任何人都可以提出更好的解决方案吗?

0 投票
2 回答
387 浏览

angular - $injector 没有提供者-在 AngularJs + Angular 8 混合应用程序单元测试用例中

我正在为 Angular 8 应用程序编写单元测试用例。这是 AngularJs + Angular 8 的混合应用程序。

我收到以下错误:

我不确定,如何模拟 $injector 类。我尝试了模拟TestService,在那种情况下我将无法涵盖一些集成测试用例。

任何模拟 $injector 类的帮助将不胜感激。

0 投票
2 回答
625 浏览

angularjs - 如何在 Angular Hybrid 应用程序中加载模板?

我最近将应用程序从 Angular 1.7 迁移到 Angular 8。在加载应用程序时,它无法加载模板。然后我在加载指令中使用了 require('./tempalte-name') 。但随后它给出了“模块解析失败:意外令牌(1:0)”的异常

我以这种方式使用 raw-loader => require('raw-loader!./template-name') 控制台中没有错误。但在浏览器窗口中,模板显示为 [object Module]。

当我用原始模板替换 require('raw-loader!./template-name') 时,例如'Test'。它显示正确

有什么方法可以获取模板 html 而不是 [object Module]。