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>
Any suggestions would be greatly appreciated!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
