I've a lot of older NG1 projects and I want to use NG2 for new projects, but I've a lot of old NG1 Components/Directives I need to use also in my NG2 Project. So I've tried to use NgUpgrade and bootstrap a simple NG1 app with NG2. That works fine so far. But I am using ui-router in my NG1 projects and so I would use it also in my new projects.
When I create some simple states in my NG1 app which was bootstraped with NG2 then I can switch to the views, that works fine.
With such a configuration
this.$urlRouterProvider.otherwise("Logviewer/LogSuche");
this.$stateProvider
.state("Logviewer", {
url: "/Logviewer",
templateUrl: "Logviewer/LogviewerMenue
})
.state("Logviewer.LogSuche", {
url: "/LogSuche",
templateUrl: "Logviewer/LogSuche"
})
.state("Logviewer.LogMonitor", {
url: "/LogMonitor",
templateUrl: "Logviewer/LogMonitor"
});
But I don't know how do disable the old routing and using NG2 as new router for my app, is this even possible?
I think I've some problems to understand how this is working, because my NG1 app was bootstraped and in there I got some ui-srefs
<a ui-sref="Logviewer.LogSuche" title="Logviewer">
<i class="fa fa-bug"></i>Logviewer
</a>
but I don't know how to say the UiRouter for NG2 that they find this Links
I've tried somethink like this
app.module.ts
import { NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeAdapter } from '@angular/upgrade';
import { UIRouterModule, Ng2StateDeclaration } from "ui-router-ng2";
import { LogSuche } from "./Views/LogViewer/logsuche.component";
let logSuche: Ng2StateDeclaration = { name: 'logsucheng2', url: '/meinelogsuche', component: LogSuche };
@NgModule({
imports: [BrowserModule,
UIRouterModule.forRoot({ states: [logSuche], useHash: true })],
declarations: [
LogSuche
],
exports: [LogSuche],
providers: [
{ provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }
]
})
export class AppModule { }
export const upgradeAdapter = new UpgradeAdapter(AppModule);
upgradeAdapter.upgradeNg1Provider('$state');
my boot.ts
/// <reference path="../typings/index.d.ts" />
import { upgradeAdapter } from "./app.modules";
upgradeAdapter.bootstrap(document.body, ['app.main']);
the html the link should be rendered for my NG2, it
<a ui-sref="logsucheng2" title="Logviewer">
<i class="fa fa-bug"></i>LogsucheNg2
</a>
I am looking forward to a good and SIMPLE Example to show how to use both technoligies in one App. the example from ui-router to mix the routing ist too complex
https://github.com/ui-router/sample-app-ng1-to-ng2
and when its possible I don't need to mix the routing I would create a NG2 app with the ability to import some NG1 services or directives.