Angular1 App में Angular2 घटक

Question

मुझे क्या करना कोशिश कर रहा हूँ कोणीय 1 आवेदन के अंदर कोणीय 2 सरल घटक रन बनाना है। मैं this official guide के माध्यम से जा रहा था। मैं इंजेक्शन के साथ कुछ मुद्दे का सामना करना पड़ा है:

Unknown provider: $$angularInjectorProvider <- $$angularInjector 

स्टैक ट्रेस कोई मतलब नहीं कर रहा है, लेकिन यह है कि त्रुटि कहीं गहरे कोणीय ही :)

मेरे वर्तमान ऐप्लिकेशन की संरचना में उठाया है स्पष्ट है

ng1.module.ts (प्रवेश बिंदु):

'use strict'; 

import { downgradeComponent } from '@angular/upgrade/static'; 

const angular = require('./lib/angular-wrapper'); 

const app = angular.module('application', []); 

import { AppComponent } from './components/app/app.component.ts'; 
import { Ng2Module } from './ng2.module.ts'; 

app.directive(
    'app', 
    downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory 
); 

angular.bootstrap(document.body, ['application']); 

ng2.module.ts:

इस तरह दिखता है

import 'reflect-metadata'; 
import '@angular/core'; 

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { UpgradeModule } from '@angular/upgrade/static'; 
import { AppComponent } from './components/app/app.component.ts'; 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent ], 
    entryComponents: [ AppComponent ] 
}) 
export class Ng2Module { 
    ngDoBootstrap() {} 
} 

और app.component.ts:

import 'reflect-metadata'; 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    template: "<h1>HELLO WORLD!</h1>" 
}) 
export class AppComponent {} 

पर किसी भी विचार के लिए पूछ: क्या कर सकते हैं का कारण त्रुटि ऊपर वर्णित?

Answer 1

यह UpgradeModule के कारण होता है सेवा है जो आपको यहाँ का उपयोग कर रहे डाउनग्रेड:

import { UpgradeModule } from '@angular/upgrade/static'; 

आप इसे प्रयोग कर रहे हैं क्योंकि आप UpgradeModule कोणीय जे एस के लिए एक कोणीय 2 घटक डाउनग्रेड करना चाहते।

आप UpgradeModule के कोड में खुदाई, तो आप पा सकते हैं कि इस मॉड्यूल नाम की एक नई कोणीय मॉड्यूल को परिभाषित करता है $$ UpgradeModule।

इस मॉड्यूल $$ angularInjector (ऊपर त्रुटि में एक) नाम की एक मूल्य प्रदाता पंजीकृत करता है - इस $$ angularInjector बात कोणीय जे एस में कोणीय मॉड्यूल इंजेक्शन लगाने के लिए जिम्मेदार है।

समाधान आयात बयान में मॉड्यूल आयात करने के लिए इतना है कि कोणीय जे एस अपनी सेवाओं के लिए उपयोग होगा है।

आप UpgradeModule आयात करने के लिए भूल गया था।

@NgModule({ 
    declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper], 
    providers: [ 
    HeroesService, 
    // Register an Angular provider whose value is the "upgraded" AngularJS service 
    {provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']} 
    ], 
    // All components that are to be "downgraded" must be declared as `entryComponents` 
    entryComponents: [Ng2HeroesComponent], 
    // We must import `UpgradeModule` to get access to the AngularJS core services 
    imports: [BrowserModule, UpgradeModule] 
}) 
class Ng2AppModule { 
    ngDoBootstrap() { /* this is a placeholder to stop the boostrapper from complaining */ 
    } 
} 

इसलिए सबसे पहले आप अपने कोड को बदलने की जरूरत:

ng2.module.ts: यहाँ आधिकारिक documentation से जवाब है

import 'reflect-metadata'; 
import '@angular/core'; 

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { UpgradeModule } from '@angular/upgrade/static'; 
import { AppComponent } from './components/app/app.component.ts'; 

@NgModule({ 
    imports:  [ BrowserModule, UpgradeModule ], 
    declarations: [ AppComponent ], 
    entryComponents: [ AppComponent ] 
}) 
export class Ng2Module { 
    ngDoBootstrap() {} 
} 

इसके अलावा के लिए अपने घटक डाउनग्रेड करने में

एनजी 2 से कोणीय 1

आपको एक कोणीय जेएस निर्देश बनाना होगा जो इस कोणीय घटक को कोणीयजेएस टेम्पलेट्स के अंदर उपलब्ध कराएगा:

ng1AppModule.directive('Ng2Module', downgradeComponent({component: AppComponent})); 

    function downgradeComponent(info: { component: Type< This parameter is no longer used */ selectors?: string[]; }): any; 

एक बहुत ही उपयोगी post जो आपको एक v4 घटक है और आप v1 टेम्पलेट में इसका उपयोग करना चाहते हैं जब एक संकर कोणीय आवेदन परिदृश्य बनाने के लिए कैसे, और भी विवरण में बताते है।