问题标签 [ng-upgrade]

我有一个升级的应用程序可以使用 ngUpgrade 到目前为止运行良好，但我在尝试合并 Highcharts 时遇到了问题。

原始应用程序包含不同版本的 highcharts（AngularJS 的旧版本）。

使用 Angular 的新（混合记忆）应用程序具有不同版本的 highcharts。

当同时使用它们时，我遇到了错误 #16，Highcharts 已经实例化，这是有道理的。

我的问题是，我该如何避免这种情况？

如果我删除旧的 highcharts，旧的应用程序将不会检测到新的 angular highcharts。如果我删除新的，尝试通过窗口对象访问 highcharts 引用不起作用，因为 highcharts 似乎无法检测到新角度的模板并且不知道如何使用它。

有没有人在应用程序的两个部分（旧的和新的）上组合了一个带有高图的混合应用程序？

是否可以同时运行Angular 1.x和Angular 5？

https://angular.io/guide/upgrade

我目前正在尝试将 AngularJS 应用程序升级到 Angular。一直在关注 Angular.io 上的教程。该项目和我的项目之间存在一些差异。我正在使用 RequireJS、Gulp 和 Webpack。

我的 index.html 要求 requireJS/main.js，main.js 开始

我尝试开始工作的第一步是使用 NgUpgrade 引导一个混合应用程序。

到目前为止，我从谷歌搜索中尝试过的是调整 tsconfig，更改为不同版本的 zone.js，围绕加载顺序重新配置。

我似乎无法解决或在互联网上找到任何解决方案的错误是：

错误：未捕获（承诺）：错误：模块 AppModule 已引导，但它没有声明“@NgModule.bootstrap”组件，也没有声明“ngDoBootstrap”方法。请定义其中之一。

这是我的 tsconfig.json

这是我的 main.js，它只是 requirejs 配置：

这是我的 app.js

最后，app.module.ts

请让我知道你们可能需要哪些其他信息来帮助我。

先感谢您。

解决方案：ngDoBootstrap() 是正确的拼写方式。我像 ngDoBootStrap() 一样写了它，但它无法解决。

我的错。

我已将 AngularJS 组件“contactBox”升级为“contactBoxDirective”并在 Angular 组件“personInfo”中使用。

但是，在使用 TestBed 运行测试用例时，我总是遇到错误

错误：[$injector:unpr] 未知提供者：contactBoxDirectiveProvider <-contactBoxDirective http://errors.angularjs.org/1.6.9/53) 在contactBoxDirective.UpgradeComponent (C:/Users/user/AppData/Local/Temp/3ac750590575e0af0efa9c7ea3a7a188.browserify:116364:23) 在新的contactBoxDirective (C:/Users/user/AppData/Local/Temp/3ac750590575e0af0efa9c7ea33a7a188.browserify: :23) 在 createClass (C:/Users/user/AppData/Local/Temp/3ac750590575e0af0efa9c7ea3a7a188.browserify:93137:20) 预计未定义是真实的。在用户上下文。(C:/Users/user/AppData/Local/Temp/3ac750590575e0af0efa9c7ea3a7a188.browserify:2400:27) 在 ZoneDelegate.invoke (C:/Users/user/AppData/Local/Temp/3ac750590575e0af0efa9c7ea3a7a188.browserify:246922:26) atProxyZoneSpec .onInvoke (C:/Users/user/AppData/Local/Temp/3ac750590575e0af0efa9c7ea3a7a188.browserify:246437:39) 在 ZoneDelegate.invoke (C:/Users/user/AppData/Local/Temp/3ac750590575e0af0efa9c7ea3a7a188)。

测试代码 -

目前正在为 plunker 构建一个精简版的应用程序，以便我可以向您展示我的问题，但如果有人同时有任何提示，我将尝试首先描述我的问题。

我正在使用 ngUpgrade 开始将大型应用程序从 AngularJS 带到 Angular。我有一个使用 Angular 运行的核心应用程序。简而言之，它的设置有点像这样：

它成功地引导自己并运行一个根组件，该组件基本上加载了旧的 AngularJS 应用程序。到目前为止没有大问题。

AngularJS 应用程序依赖于许多自定义功能模块，我现在需要将它们转换为 Angular。

在我想转换服务的功能模块之一上。它现在是一个内置在 typescript 中的 Angular @Injectable，它被分配给 AngularJS 模块，如下所示：

该服务需要依赖于我尚未转换的服务。例子：

我需要如何进行设置，以便我的示例应用程序使用“UpgradedService”并且 UpgradedService 能够使用 NonconvertedNG1Service？

我目前正在探索将一个非常大的 AngularJS 1.6 应用程序升级到 Angular 6 的路径。我的应用程序作为一个混合应用程序引导，并且我已经开始转换单个模块和组件。不过，我需要能够分块进行迁移。如果我可以一次迁移一个模块，那就太好了，但为此我遇到了一些问题。

我有一个NavBar指令，它位于我的coreAngularJS 模块中。该组件正在降级downgradeComponent并在 AngularJScore模块上注册。landingAngularJS 模块依赖于该模块core，因此它可以使用NavBar. 这很好用，因为LandingComponent它也已转换为 Angular6 并且正在降级并在landingAngularJS 模块上注册。

NavBar但是，在任何其他 AngularJS 组件中使用该组件都会出现问题。我有第三个 AngularJS 模块，它调用了一个在其模板内部workflows有一个ViewWorkflows组件的组件。NavBar当我导航到该组件时，我收到以下错误：

angular.js:14791 Error: No component factory found for NavBarDirective. Did you add it to @NgModule.entryComponents?

我可以通过转换然后降级来解决这个问题ViewWorkflows，但是由于NavBar被注册为降级的 AngularJS 组件，任何声明对模块的依赖关系的 AngularJS 模块都不应该core访问它吗？

代码（不可运行）

编辑：我已将要点更新为更简单一些。该landing模块是 Angular，带有一个 Angular 组件，<landing>该组件被降级为在 AngularJSlanding模块上运行，并且<t-nav-bar>内部有一个。它依赖于core提供降级<t-nav-bar>指令的模块。该<test>组件是在 AngularJS 模块上注册的 AngularJSlanding组件，不能使用<t-nav-bar>. 甚至没有将workflows模块带入这种情况，它是行不通的。我究竟做错了什么？

当我运行混合应用程序时，我在控制台中得到了这个。我正在通过 webpack 捆绑它（虽然这不是必需的，如果它有效，我可以使用其他东西）

以下是我的代码。

索引.html

根文件夹中的 app.ts

app.module.ts

main.ts

webpack.dev.js

我已经将一些代码与 Angular 2 混合，所以我不确定我在哪里添加了重复代码。我已经加载了一次 zone.js ，所以我认为它无法找到 Angular 1 app。我怎样才能让这个运行？

我有一个混合 AngularJS (1.7.0) 和 Angular 6 应用程序。我还使用@angular/upgrade 模块来升级/降级组件和服务。我已经使用自定义 webpack 让它工作了，但现在我想转向 angular-cli。

任何人都可以提出最好的方法来做到这一点。

我在想 ：-

将 Angular 6 移至 Angular Cli 并使用自定义 webpack 构建 AngularJS。但我不确定当我们在升级/降级的组件之间导航时会发生什么。

我有一个 Angularjs 应用程序。我必须将它迁移到 Angular。我正在关注角度教程 - https://angular.io/guide/upgrade。

我的角度 app.module 看起来像

我在这个文件中导入我的 angularjs 应用程序并手动引导它。

我在引导角度模块 app.module 中添加了一个 main.ts 文件。我的主要 .ts 看起来像

我在 webpack 中添加了 main.ts 作为入口点。

在我的 index.html 中，我删除了 ng-app。我的 index.html 看起来像：

是一个 angularJS 组件。main.js 和 vendor.js 是引导程序生成的捆绑文件。

包.json：

app.module.ajs 看起来像（跳过导入）：

但是这个主应用程序没有被渲染。它没有抛出任何错误。如果我添加一些其他静态内容，它会显示该内容但不显示角度分量。

请帮我找出我做错了什么。

我正在尝试在我的应用程序的一个模块上为 ngUpgrade 做一个 PoC，并且我遇到了与 AngularJS 一起嵌入/内容投影的问题requires。

假设有一个降级的 Angular 组件定义如下：

ajsButton是一个升级的 AngularJS 组件，需要一个父控制器：

正常使用common-filter效果非常好，但是在投影时ajs-button：

抛出此错误：

Unhandled Promise rejection: [$compile:ctreq] Controller 'ajsFilter', required by directive 'ajsButton', can't be found!

有没有办法解决？我知道我可以重写周围的类，但是许多其他应用程序都在使用它们，我需要能够逐步升级这些应用程序。

工作示例：

https://stackblitz.com/edit/ngupgradestatic-playground-uvr14t

上面的片段来自index.html和common-filter.component.ts。这是一个（或多或少）基于更复杂组件的最小示例。downgradeModule出于性能原因，我将采用这种方法。