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.

share

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.