Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/20.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 降级的Angular2组件未在Angular1内部渲染_Javascript_Angularjs_Angular_Typescript - Fatal编程技术网

Javascript 降级的Angular2组件未在Angular1内部渲染

Javascript 降级的Angular2组件未在Angular1内部渲染,javascript,angularjs,angular,typescript,Javascript,Angularjs,Angular,Typescript,我们有一个独特的情况,我们使用typescript,混合使用ng1和NG2,但不使用任何模块加载器。我能够引导NG1和ng2,但我无法从降级的angular 2组件获得任何响应,我在代码中放置了一个断点,看到代码运行,但组件没有显示任何内容 我没有得到任何错误,在编译阶段和运行时都没有 代码如下: myapp.js-angular 1应用程序定义,es2015 (function() { 'use strict'; angular.module('myApp', []); })(

我们有一个独特的情况,我们使用typescript,混合使用ng1和NG2,但不使用任何模块加载器。我能够引导NG1和ng2,但我无法从降级的angular 2组件获得任何响应,我在代码中放置了一个断点,看到代码运行,但组件没有显示任何内容

我没有得到任何错误,在编译阶段和运行时都没有

代码如下:

myapp.js-angular 1应用程序定义,es2015

(function() {
    'use strict';
    angular.module('myApp', []);
})();
myapp.ng2.ts-angular 2应用程序定义,类型脚本

namespace MyApp {

let NgModule = ng.core.NgModule;
let BrowserModule = ng.platformBrowser.BrowserModule;
let UpgradeAdapter = ng.upgrade.UpgradeAdapter;

@NgModule({
   imports: [BrowserModule]
})

export class MyAppNg2 {}

export const upgradeAdapter = new UpgradeAdapter(MyAppNg2);

$(document).ready(function() {
    upgradeAdapter.bootstrap(document.body, ['MyApp'], {strictDi: false});
});

}
namespace MyApp.Components.Misc {

    let Component = ng.core.Component;

    @Component({
        selector: 'full-details-header',
        template: `This is ng2 component`
    })

    export class FullDetailsHeaderComponent {
    }

}
fullDetails.component.ts-angular 2,typescript

namespace MyApp {

let NgModule = ng.core.NgModule;
let BrowserModule = ng.platformBrowser.BrowserModule;
let UpgradeAdapter = ng.upgrade.UpgradeAdapter;

@NgModule({
   imports: [BrowserModule]
})

export class MyAppNg2 {}

export const upgradeAdapter = new UpgradeAdapter(MyAppNg2);

$(document).ready(function() {
    upgradeAdapter.bootstrap(document.body, ['MyApp'], {strictDi: false});
});

}
namespace MyApp.Components.Misc {

    let Component = ng.core.Component;

    @Component({
        selector: 'full-details-header',
        template: `This is ng2 component`
    })

    export class FullDetailsHeaderComponent {
    }

}
bootstrap.js-angular1,es2015

angular.module('myApp').component('fullDetailsHeader', MyApp.upgradeAdapter.downgradeNg2Component(MyApp.Components.Misc.FullDetailsHeaderComponent));

这有点难说,因为我认为这是针对Angular的beta版,我还没有对其进行升级,但对于Angular 2+版,您还需要在主模块的
entryComponents
数组中声明要降级的组件:

@NgModule({
   imports: [BrowserModule],
   entryComponents: [FullDetailsHeaderComponent]
})
假设这是针对Angular beta版的,并且您没有太多工作,我会放弃它,使用Angular的最新版本,并遵循以下步骤。我看到的在Angular的beta版和发行版之间创建ng1/ng2混合应用程序的示例中有太多不同之处,我觉得不值得对beta升级过程中出现的问题进行故障排除

这仍然是一个很难搜索问题和示例的区域,因此如果您有与Angular versions 2+升级过程相关的问题,请提出新问题并ping我


首先,这里有一个示例,展示了一个降级角度组件并在AngularJS中使用它的工作示例。这也在降级过程中使用了多重转换,这只适用于版本4.0.0+

你找到解决办法了吗?