How to use Angular 2 component in Angular 1 app using @angular/upgrade

Question

This question might be duplicate but I have tried all possible options.

I am trying to use my Angular 2 component in Angular 1 app using @angular/upgrade.

angular2 files :-

simple hello component in app/components/hello.

hello.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.scss']
})
export class HelloComponent implements OnInit {

  constructor() { 
  }

  ngOnInit() {
  }

}

hello.component.html

<p>
  hello works!
</p>

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloComponent } from './components/hello/hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    UpgradeModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    HelloComponent
  ]
})
export class AppModule { 
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['usr']);
  }
}

platformBrowserDynamic().bootstrapModule(AppModule);

In my Angular 1 app :- app.ts (root file)

import { HelloComponent } from '../angular/src/app/components/hello/hello.component';
import { downgradeComponent } from './node_modules/@angular/upgrade/static/static'

let moduleList = ['ngCookies', 'ngSanitize','$rootScope', '$locationProvider '];
angular.bootstrap(document.body, ['usr']);

let app: any = angular.module('usr', moduleList)
.directive(
    'appHello',
    downgradeComponent({ component: HelloComponent })
  );

index.html of Angular 1 (I have added base href and root which is default component of angular, app-root component is rendering properly in my angular 1 app)

<base href="/">
<app-root></app-root>

header.html (angular 1 header component where I want to show my angular 2 hello component)

<app-hello></app-hello>

screenshots.

Thanks in advance.

user733421 · Accepted Answer · 2019-09-10 06:40:59Z

1

https://angular.io/api/upgrade/static/downgradeModule says

You cannot use downgradeModule() and UpgradeModule in the same hybrid application. Use one or the other.

This means you can only use downgrade module while bootstrapping NG1

answered Sep 10, 2019 at 6:40

user733421

4974 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Piyush Jain Over a year ago

I am using downgradeComponent not downgradeModule().

user733421 Over a year ago

you are right (my bad) . I can see you are both manually bootstrapping and auto-bootstrapping. Try removing bootstrap: [AppComponent],

Piyush Jain Over a year ago

I have removed this.upgrade.bootstrap(document.body, ['usr']); from app.module.ts even then not working but when i added hello component inside root component , it is rendering properly.

user733421 Over a year ago

you can't remove this.upgrade.bootstrap(document.body, ['usr']); because this is what bootstraps ng1 it's the other one you need to remove

Collectives™ on Stack Overflow

How to use Angular 2 component in Angular 1 app using @angular/upgrade

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related