1

Given the following components. I want to use these components on a non SPA web site exactly like the plunker here. This sample is no longer valid, as the latest beta of angular 2 uses modules, bootstrap is no longer defined, and I cannot get the two components to work in parallel.

// Our first component.

import {Component} from 'angular2/core'

@Component({
  selector: 'comp1',
  providers: [],
  template: `
    <div>
      <h3>Hello, {{name}}</h3>

    </div>
  `,
  directives: []
})
export class Comp1 {
  constructor() {
    this.name = 'I am ng2 component 1'
  }
}

// Our second component.

import {Component} from 'angular2/core'

@Component({
  selector: 'comp2',
  providers: [],
  template: `
    <div>
      <h3>Hello, {{name}}</h3>

    </div>
  `,
  directives: []
})
export class Comp2 {
  constructor() {
    this.name = 'I am ng2 component 2'
  }
}

There is a plunker here, using a beta version of angular. How do I register these two components using the latest version of angular 2. The sample is not longer valid for the newer angular versions.

When I attempt to import bootstrap, the newer versions of angular are structured differently.

import {platform} from '@angular/core';
// platform is undefined.
import { bootstrap, BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS } from '@angular/platform-browser';
// bootstrap is undefined, BROWSER_PROVIDERS is undefined etc.
Jim
  • 14,952
  • 15
  • 80
  • 167

2 Answers2

1

The answer to anyone else attempting this, is to create two modules, and register each module separately

Registration

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModuleA, AppModuleB} from './app';

platformBrowserDynamic().bootstrapModule(AppModuleA);
platformBrowserDynamic().bootstrapModule(AppModuleB);

Modules

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppA ],
  bootstrap: [ AppA ]
})
export class AppModuleA {}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppB ],
  bootstrap: [ AppB ]
})
export class AppModuleB {}
Jim
  • 14,952
  • 15
  • 80
  • 167
0

Seems you are missing a module definition e.g.:

app.module.ts 

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

import {Comp1} from './comp1';
import {Comp2} from './comp2';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        Comp1,
        Comp2
    ],
    bootstrap: [Comp1]
})

export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
Ilya Chernomordik
  • 27,817
  • 27
  • 121
  • 207
  • what you say makes sense, but then I seem unable to use the two components as peers. STATIC CONTENT, as in the plunker. angular2 seems to only play nicely for SPA apps. – Jim Nov 14 '16 at 09:24
  • I am not quite sure of what you want to achieve, but as far as I understand you need to have a main component to bootstrap. It can be a simple wrap for the router to switch between your 2 components. – Ilya Chernomordik Nov 14 '16 at 09:27
  • what I want to achieve is exactly the same as the plunker, only with the latest version of angular2, the plunker is from an older version. If I just update the angular versions to beta.17, I get the error. core_1.platform is not a function. – Jim Nov 14 '16 at 09:29
  • Ok, I see. Sorry for misunderstanding then. – Ilya Chernomordik Nov 14 '16 at 09:33