upgradeAdapter.bootstrap an angular2 app?

59 views

Skip to first unread message

Kyle Thomas

unread,

May 24, 2016, 9:43:40 AM5/24/16

to AngularJS

Is it possible to start out with an angular2 app and then bootstrap it to leverage the upgradeAdapter?

I have a boot.ts

///<reference path="../../typings.d.ts"/>
import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from "@angular/router";
import { LocationStrategy, HashLocationStrategy } from "@angular/common";
import { provide } from "@angular/core";
import { HTTP_PROVIDERS } from "@angular/http";
import { UpgradeAdapter } from '@angular/upgrade';

import { AppComponent } from "./app.component";
import { MessageService } from "./messages/message.service";
import { AuthService } from "./auth/auth.service";

const upgradeAdapter = new UpgradeAdapter();

bootstrap(AppComponent, [MessageService, AuthService, ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}), HTTP_PROVIDERS]);

When I try to leverage:

upgradeAdapter.bootstrap(AppComponent, [MessageService, AuthService, ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}), HTTP_PROVIDERS]);

I get an error saying:

[ts] Argument of type 'typeof AppComponent' is not assignable to parameter of type 'Element'.
  Property 'classList' is missing in type 'typeof AppComponent'.

import AppComponent

I know I probably need to be using the

document.body, ['heroApp']

but I can't seem to get that to work too, because I need the app.component.ts as well.

Here is my app.component.ts

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES } from "@angular/router";

import { MessagesComponent } from "./messages/messages.component";
import { AuthenticationComponent } from "./auth/authentication.component";
import { HeaderComponent } from "./header.component";

@Component({
    selector: 'wwCpqSandbox-App',
    template: ` 
        <div class="container">
            <my-header></my-header>
            <router-outlet></router-outlet>
        </div>
    `,
    directives: [ROUTER_DIRECTIVES, HeaderComponent]
})
@Routes([
    {path: '/', component: MessagesComponent},
    {path: '/auth', component: AuthenticationComponent}
])
export class AppComponent {
    
}

Here is my index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Angular 2 Messenger (INDEX.HTML)</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel='stylesheet' href='/stylesheets/interest.css'/>
    <link rel='stylesheet' href='/stylesheets/app.css'/>
    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="js/vendor/es6-shim/es6-shim.min.js"></script>

    <script src="js/vendor/zone.js/dist/zone.js"></script>
    <script src="js/vendor/reflect-metadata/Reflect.js"></script>
    <script src="js/vendor/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
</head>
<body>
<wwCpqSandbox-App>Loading...</wwCpqSandbox-App>

<script>
    System.import('app').catch(function(err){ console.error(err);  });
</script>
</body>
</html>