根据Angular的升级指南，一个混合的Angular 1 + 2应用程序就像这样设置：
<ui-view>此代码将应用程序连接为Angular2，引导初始组件，然后连接Angular1应用程序。
问题是当你有TypeError: Cannot read property 'get' of undefined
at AppHomeDirective.UpgradeComponent (http://localhost:3000/main.bundle.js:12502:39)
at new AppHomeDirective (http://localhost:3000/main.bundle.js:48154:16)
at new Wrapper_AppHomeDirective (/AppModule/AppHomeDirective/wrapper.ngfactory.js:7:18)
at CompiledTemplate.proxyViewClass.View_AppLayoutComponent0.createInternal (/AppModule/AppLayoutComponent/component.ngfactory.js:63:33)
at CompiledTemplate.proxyViewClass.AppView.create (http://localhost:3000/vendor.bundle.js:32922:21)
at CompiledTemplate.proxyViewClass.DebugAppView.create (http://localhost:3000/vendor.bundle.js:33178:44)
at CompiledTemplate.proxyViewClass.View_AppComponent0.createInternal (/AppModule/AppComponent/component.ngfactory.js:23:19)
at CompiledTemplate.proxyViewClass.AppView.create (http://localhost:3000/vendor.bundle.js:32922:21)
at CompiledTemplate.proxyViewClass.DebugAppView.create (http://localhost:3000/vendor.bundle.js:33178:44)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:16:19)
at CompiledTemplate.proxyViewClass.AppView.createHostView (http://localhost:3000/vendor.bundle.js:32929:21)
at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:3000/vendor.bundle.js:33189:52)
at ComponentFactory.create (http://localhost:3000/vendor.bundle.js:31968:25)
at ApplicationRef_.bootstrap (http://localhost:3000/vendor.bundle.js:26822:40)
at http://localhost:3000/vendor.bundle.js:26731:89
at Array.forEach (native)
at PlatformRef_._moduleDoBootstrap (http://localhost:3000/vendor.bundle.js:26731:42)
at http://localhost:3000/vendor.bundle.js:26699:27
at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:15311:26)
at Object.onInvoke (http://localhost:3000/vendor.bundle.js:36542:37)
at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:15310:32)
at Zone.run (http://localhost:3000/polyfills.bundle.js:15193:43)
at http://localhost:3000/polyfills.bundle.js:15581:57
at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:15344:35)
at Object.onInvokeTask (http://localhost:3000/vendor.bundle.js:36533:37)
at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:15343:40)
at Zone.runTask (http://localhost:3000/polyfills.bundle.js:15233:47)
at drainMicroTaskQueue (http://localhost:3000/polyfills.bundle.js:15480:35)
，<section id="panel" className="something">
<sb-header></sb-header>
<main class="page-content" ui-view></main>
<router-outlet></router-outlet>
<sb-footer></sb-footer>
</section>
<sb-app-home></sb-app-home>
<sb-app-nav></sb-app-nav>
或@Directive({
selector: 'sb-app-home'
})
export class AppHomeDirective extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
super('sbAppHome', elementRef, injector);
}
}
@NgModule({
imports: [
AppRoutingModule,
BrowserModule,
ClientModule,
ClientRoutingModule,
CoreModule,
SubcontractorModule,
UpgradeModule
],
declarations: [
AppComponent,
AppFooterComponent,
AppHeaderComponent,
AppLayoutComponent,
AppNavComponent,
AppHomeDirective
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule {
constructor(public upgrade: UpgradeModule) { }
}
之外的Angular 1组件时。 Angular将尝试在Angular1连接之前引导组件。这会导致以下错误：
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>这是我的Bootstrapped组件的HTML：
library(ggplot2)
levels = ordered(c('a', 'b'))
data = data.frame(x=ordered(c('a', 'a', 'b', 'b'), levels=levels),
y=ordered(c('a', 'b', 'a', 'b'), levels=levels),
prob=c(0.3, 0.7, 0.4, 0.6))
ggplot(data, aes(x, y)) + geom_tile(aes(fill=prob))
sb-app-home是我的Angular 1元素。以下是它在Angular 2模块中的注册方式：
POST /api/ra/v1/ping HTTP/1.0
Host: app.kigo.net
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Content-Type: application/json
{
"PING" : "PONG"
}
如何让Angular 1组件在nav / layout / etc的路径之外工作？