标签: ng-upgrade

我找到了描述如何将Angular(2)组件集成到AngularJS中的资源,但所有这些都涉及像Angular项目一样设置AngularJS项目,需要来自TypeScript的转换器,需要ES6,需要import语句.我想在我的AngularJS应用程序中简单地使用Angular组件,而不会破坏我现有的工作流程.这是可能的,如果是这样,我该如何实现它？我认为这是升级模块的目的,但我看到的所有教程都需要AngularJS应用程序中的import语句,这需要一个转换器.如果Angular应用程序需要提前编译,那没关系,但AngularJS应用程序无法转换,因为它在django服务器上运行,我不想运行带有转换器的另一台服务器.

为了清楚起见,我目前的AngularJS应用程序由django提供服务.我想要包含一些Angular组件.这些在开发过程中不会被触及,因此可以提前编译它们而不影响工作流程.有没有办法将这些组件添加到AngularJS应用程序而不向AngularJS应用程序添加转换器？

我正在研究将当前的Angular 1项目迁移到Angular 4的方法.

选项包括ng-forward,ngUpgrade或rewrite.

我正在考虑重写它,但有一点扭曲.

• 我保留当前的申请表
• 开始写新的并行
• 所有新的NG4重写,我想用......所以一点一点地换句话说.

有人试过这个或知道更好的方法吗？

在使用ng-upgrade在大型ng1(V1.5.9)应用程序(使用ui-router)中使用一些新的ng2(V2.2.4)组件的应用程序中,我目前看到一个非常奇怪的变化检测问题.据我所知,这已经在ng2的一些升级中引入,但遗憾的是我目前无法轻易验证.

我现在把它简化为一个最小的例子,我只需要这个组件:

@Component({
    selector:'my-ng2-demo',
    template: '<div>{{status}}</div>'
})
export class MyNg2Demo implements OnDestroy {
    public status:boolean = true;
    private interval:any;

    constructor() {
        this.interval = setInterval(() => {
            this.status = !this.status;
            console.log('status: ' + this.status);
        }, 2000);
    }

    ngOnDestroy():void {
        clearInterval(this.interval);
    }

}

该组件在升级适配器中升级,并在模块中注册为入口组件.

该组件用于ng1控制器的模板,如下所示:

<my-ng2-demo></my-ng2-demo>

当我打开浏览器并直接导航到该页面(ng1控制器的路径)时,一切都按预期工作:ui每2秒显示一次真/假.

然而:当我离开然后回到页面(访问一些不同的路线)然后突然改变检测似乎不起作用.显示的值仅交替大约每5-6秒,看起来很随机,虽然在控制台中我仍然看到预期的值.

当我将组件的构造函数更改为:

constructor(private zone: NgZone) {
    this.interval = setInterval(() => {
        zone.run(() => {
            this.status = !this.status;
            console.log('status: ' + this.status);
        });
    }, 2000);
}

它突然再次起作用.

显然这不是一个可行的解决方案,因为我在真实应用程序中看到的行为要复杂得多(我可能需要zone.run在几十个地方添加,这是不可维护的).

我已经调试了几个小时,不明白发生了什么.在Chrome的JavaScript分析器中,我基本上看到该页面在5-6秒内几乎整天都没有发生任何事情.

这不是该演示组件的屏幕截图(但它看起来基本相同),但是从我最初测试的标签组件进行剖析(标签切换时间也很长,中间没有可见的操作).

更新:

经过一些实验后,我发现相当令人惊讶的是,当我不再将状态改变代码放入zone.run呼叫中时,我添加了一个调用 …

我目前使用angular-cli的Hybrid Angular应用程序(2.4.9和1.5.0).目前,在运行我们的应用程序时,我们能够正确引导1.5应用程序:

// main.ts
import ...

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  angular.element(document).ready(() => { 
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['myApp'], {strictDi: true});
  });
});

但是,在我们的test.ts文件中:

// test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import ...;

declare var __karma__: any;
declare var require: any;

__karma__.loaded = function () {};

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  // I'm assuming that I need to call 'boostrapModule()' somehow here...
  platformBrowserDynamicTesting() 
);

const context = require.context('./', true, …

对于角度5.0,升级模块现在可以选择使用downgradeModule,它在角度区域之外运行angularjs.在试验这个时,我遇到了使用downgradeInjectable的问题.

我收到错误:

未捕获错误:在引导Angular模块之前尝试获取Angular注入器.

角度js中的自举角度很好

import 'zone.js/dist/zone.js';
import * as angular from 'angular';
/**
 * Angular bootstrapping
 */
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { decorateModuleRef } from 'src/environment';
import { AppModule } from 'src/app/app.module';
import { downgradeModule } from '@angular/upgrade/static';

export const bootstrapFn = ( extraProviders ) => {
    const platformRef = platformBrowserDynamic( extraProviders );
    return platformRef
        .bootstrapModule( AppModule )
        .then( decorateModuleRef );
};

angular.module( 'app.bootstrap', [
    downgradeModule( bootstrapFn ),
] );

然而...

由于bootladpping是在angularjs初始化之后发生的,因此我不能再使降级注射工作.

服务被降级

import { Injectable, Inject, …

我正在尝试将$log服务用于角度2,根据我的阅读,您需要以下步骤:

1. 创建一个包含要注入的服务的模块.
2. 调用UpgradeAdapter的upgradeNg1Provider方法.

所以,我做了以下几点

  var initInjector = angular.injector(['ng']);
  var $log = initInjector.get('$log');
  angular.module('Services1', [])
    .service('$log', [$log]);
  upgradeAdapter.upgradeNg1Provider('$log');

然后我创建一个角度2组件如下

    @Component({   selector: "ion-app",   template:"<p>Test</p>" })
    @Injectable()
    export class HelloIonicPage {
      message: string;
      constructor( @Inject('$log') $log) {
        this.message = "Hi";
      }
    }

但是当我运行应用程序时,它给出了以下错误:

原始例外:没有提供$ log的提供商!

另外,我试图bootstrap使用upgradeAdapter:

  upgradeAdapter.bootstrap(document.documentElement, ['Services1'])

但那也行不通.请注意,我正在使用Ionic 2框架,上面的代码是在里面写的

    this.platform.ready().then(() => { 
            //The code is going here
});

我正在努力一点一点地迁移一个大的angular.js应用程序(使用ui-router)到角度,我选择使用angular.js应用程序作为基础并一次迁移一个不同的路由,这样我曾经我完成了我立刻将所有东西切换到角度.

这些是我遵循的步骤:

在我的main.ts文件中启动angular.js应用程序:

export function bootstrapAngular(extra: StaticProvider[]): any {
  setAngularJSGlobal(angular);
  if (environment.production) {
    enableProdMode();
  }
  return platformBrowserDynamic(extra)
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
}

const downgraded = angular
  .module('downgraded', [downgradeModule(bootstrapAngular)])
  .directive('appRoot', downgradeComponent({ component: RootComponent, propagateDigest: false }))
  ;

angular.bootstrap(document, ['app', downgraded.name]);

在我的index.html里面

<app id="app"></app>

这很好用.

在我的主要angular.js组件中,我添加了降级后的主角度组件的标签:

<div class="app__view" id="appContent">
  <ui-view></ui-view>
  <app-root></app-root>
</div>

这就是我的主模块的配置方式

const COMPONENTS = [
  TestComponent,
  RootComponent,
];

@NgModule({
  declarations: COMPONENTS,
  imports: [
    BrowserModule,
    NxModule.forRoot(),
    RouterModule.forRoot(routes, {
      initialNavigation: 'enabled',
      useHash: true
    })
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' …

我想升级ng1组件以在ng2组件中使用.

如果我只使用模板字符串ng1组件,要升级,它的工作原理.但是,如果我切换到使用templateUrl,应用程序崩溃并给我这个错误:

angular.js:13920 Error: loading directive templates asynchronously is not supported
at RemoteUrlComponent.UpgradeComponent.compileTemplate (upgrade-static.umd.js:720)
at RemoteUrlComponent.UpgradeComponent (upgrade-static.umd.js:521)
at new RemoteUrlComponent (remote-url.component.ts:11)
at new Wrapper_RemoteUrlComponent (wrapper.ngfactory.js:7)
at View_AppComponent1.createInternal (component.ngfactory.js:73)
at View_AppComponent1.AppView.create (core.umd.js:12262)
at TemplateRef_.createEmbeddedView (core.umd.js:9320)
at ViewContainerRef_.createEmbeddedView (core.umd.js:9552)
at eval (common.umd.js:1670)
at DefaultIterableDiffer.forEachOperation (core.umd.js:4653)

这是一个证明我的问题的插件:

https://plnkr.co/edit/2fXvfc?p=info

我遵循了Angular 1 - > 2升级指南,似乎这段代码应该可行.我不太确定为什么它不起作用.

我有一个使用angular-cli构建的角度2应用程序,我需要在我的一个组件中使用角度1指令(从不同的应用程序重用它).我按照以下步骤操作:

https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code

但现在我遇到了这个错误,无法超越它.我正在使用angular2.0.2(我设法在过去使用beta版本构建了一个混合应用程序,但它是一个angular1应用程序,我使用角度2组件与适配器的降级功能).

在我的app.module.ts中我有:

import { UpgradeAdapter } from '@angular/upgrade';
const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));

const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');

@NgModule({
    imports:      [
        BrowserModule,
        ...
    ],
    declarations: [
      ...       
     HeroDetail
     ]
})
export class AppModule { }

我的hero-detail.component.ts看起来像这样:

export const heroDetail = {
  templateUrl: 'hero-detail.html',
  controller: function() {
  }
};

而我的hero-detail.html看起来像这样:

   <h2>Windstorm details!</h2>

我只是通过添加模板尝试在另一个角度2组件中使用该指令:

当我运行服务时,应用程序编译正常,但当我尝试加载页面时,我得到上述错误.

关于如何向前推进的任何建议？

我正在尝试使用角度为1.6和5的混合应用程序.手动引导有效.一旦我尝试引导混合应用程序,我就会收到以下错误:

compiler.js？7e34:466未捕获错误:无法解析AppModule的所有参数:(？).at syntaxError(eval at(app.bundle.js:1852),:684:34)at CompileMetadataResolver._getDependenciesMetadata(eval at(app.bundle.js:1852),:15765:35)at CompileMetadataResolver._getTypeMetadata(eval at( app.bundle.js:1852),:15600:26)at CompileMetadataResolver.getNgModuleMetadata(eval at(app.bundle.js:1852),:15399:24)at JitCompiler._loadModules(eval at(app.bundle.js: 1852),:33760:87)在JitCompiler._compileModuleAndComponents(eval at(app.bundle.js:1852),:33721:36)at JitCompiler.compileModuleAsync(eval at(app.bundle.js:1852),:33637: 37)at CompilerImpl.compileModuleAsync(eval at(app.bundle.js:1864),:245:49)at PlatformRef.bootstrapModule(eval at(app.bundle.js:229),:5646:25)at eval(eval) at(app.bundle.js:827),:76:53)

app.ts

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {UpgradeModule} from '@angular/upgrade/static';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) {
    }

    ngDoBootstrap() {
        this.upgrade.bootstrap(document.documentElement, ['myApp']);
    }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": …