Part 3: Add Angular Router With Config

Author: BBlackwo

guide/background.md

@@ -0,0 +1,7 @@
+# Background
+
+Could have used https://github.com/ui-router/angular-hybrid but we wanted to use the 1st party router and move away from the 3rd party ui router
+
+## Let's get into it
+
+[Part 1: Set Up Angular and AngularJs Hybrid App](./part-1.md)

guide/overview.md

@@ -4,32 +4,29 @@ Have a read through the official [Angular Upgrade Docs](https://angular.io/guide
 
 At the end of this guide you should be able to set up a hybrid Angular 6+ and AngularJs (Angular 1.x) app with Angular Router and AngularJs UI-Router working nicely together.
 
-## 0. Scaffold New Project With Angular CLI
+Each part has an accociated commit in this repo. See [repo commits](https://github.com/BBlackwo/angular-router-angular-js-ui-router-hybrid/commits/master).
 
-```sh
-npx @angular/cli new your-project-name
-```
+## [Background](./background.md)
 
-## 1. Set Up Angular and AngularJs Hybrid App
+## [Part 1: Set Up Angular and AngularJs Hybrid App](./part-1.md)
 
-See [Part 1](./part-1.md)
+## [Part 2: Add UI Router With Config](./part-2.md)
 
-## 2. Add UI Router With Config
+## [Part 3: Add Angular Router With Config](./part-3.md)
 
-See [Part 2](./part-2.md)
+## [Part 4: Hacks To Get Hybrid Routing Working](./part-4.md)
 
-## 3. Add Angular Router With Config
+## Conclusion
 
 // ...
 
-## 4. Some Fun Hacks
-
-// ...
-
-Generate router service with Angular CLI...
-
 ## TODO
 
 - Generate TOC with <https://github.com/jonschlinkert/markdown-toc>
 - Note about legacy js files
 - Upgrade to Angular 7
+- Lazy loading route modules?
+- Background
+- Conclusion
+- Comment on http://www.syntaxsuccess.com/viewarticle/ngupgrade-with-the-angular-router-and-ui-router
+- What about all my js files that don't get transpiled?

guide/part-3.md

@@ -0,0 +1,84 @@
+# 3. Add Angular Router With Config
+
+## Generate HelloNg Component
+
+```sh
+npx ng generate component HelloNg
+```
+
+## Generate and update AppRoutingModule
+
+Note: If you initialise an Angular CLI project with the `--routing` flag this will automatically be created for you, so skip this step.
+
+```sh
+npx ng generate module routing/app-routing --module=app --flat
+```
+
+Once generated, add routes and RouerModule imports and exports.
+
+[app.routing.module.ts](../src/app/routing/app.routing.module.ts)
+
+```ts
+const routes: Routes = [];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule]
+})
+export class AppRoutingModule { }
+```
+
+## Configure Routes
+
+[app.routing.module.ts](../src/app/routing/app.routing.module.ts)
+
+```ts
+const routes: Routes = [
+ {
+ path: 'hello-ng',
+ component: HelloNgComponent
+ }
+];
+```
+
+## Add RouterOutlet to AppComponent template
+
+[app.component.html](../src/app/app.component.html)
+
+```html
+<router-outlet></router-outlet>
+```
+
+## Problem 1. Navigating to Angular Route Doesnt Work
+
+Navigate to [/hello-ng](http://localhost:4200/hello-ng).
+
+Now, the route doesn't load as you would expect. This is where we have to start hacking.
+
+## Debugging
+
+If you want to debug the routing you can update your `AppRoutingModule` as follows:
+
+[app-routing.module.ts](../src/app/routing/app-routing.module.ts)
+
+```ts
+imports: [RouterModule.forRoot(routes,
+ { enableTracing: true } // <-- For debugging purposes only. Should be turned off in prod.
+)],
+```
+
+We can force the Angular Router to kick in by adding a `routerLink` for our new Angular route.
+
+[app.component.html](../src/app/app.component.html)
+
+```html
+<nav>
+ <a routerLink="/hello-ng">Hello Ng</a>
+</nav>
+```
+
+If you click that link it should work and you should see some logging in the console. But if you refresh the page the route will not load. The presence of AngularJs UI router is causing Angular router not to work. To fix that, go to the next step.
+
+## Next step
+
+[Part 4: Hacks To Get Hybrid Routing Working](./part-4.md)

src/app/app.component.html

@@ -1,5 +1,9 @@
 <div class="comp ng">
  <h2>{{ title }}</h2>
+ <nav>
+ <a routerLink="/hello-ng">Hello Ng</a>
+ </nav>
+ <router-outlet></router-outlet>
 
  <legacy-app-upgrade></legacy-app-upgrade>
 </div>

src/app/app.module.ts

@@ -6,17 +6,22 @@ import { AppComponent } from './app.component';
 import { LegacyAppUpgradeDirective } from './legacy/upgrade/legacy.app.component.upgrade';
 import './legacy/'; // imported so legacy files are bundled
 import { legacyApp } from './legacy/legacy.app.module';
+import { HelloNgComponent } from './hello-ng/hello-ng.component';
+import { AppRoutingModule } from './routing/app-routing.module';
 
 @NgModule({
  declarations: [
  AppComponent,
  // Import the upgraded legacyApp so Angular knows about it
  // and we can use it in our app component
- LegacyAppUpgradeDirective
+ LegacyAppUpgradeDirective,
+ HelloNgComponent
  ],
  imports: [
  BrowserModule,
- UpgradeModule // Add this so Angular can use the Upgrade module
+ // Add this so Angular can use the Upgrade module
+ UpgradeModule,
+ AppRoutingModule,
  ],
  providers: [],
  // VERY IMPORTANT to change this from `bootstrap` to `entryComponents`!

src/app/hello-ng/hello-ng.component.css

@@ -0,0 +1,3 @@
+<p>
+ hello-ng works!
+</p>

src/app/hello-ng/hello-ng.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelloNgComponent } from './hello-ng.component';
+
+describe('HelloNgComponent', () => {
+ let component: HelloNgComponent;
+ let fixture: ComponentFixture<HelloNgComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HelloNgComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HelloNgComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/hello-ng/hello-ng.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-hello-ng',
+ templateUrl: './hello-ng.component.html',
+ styleUrls: ['./hello-ng.component.css']
+})
+export class HelloNgComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}

src/app/hello-ng/hello-ng.component.ts

@@ -0,0 +1,13 @@
+import { AppRoutingModule } from './app-routing.module';
+
+describe('AppRoutingModule', () => {
+ let appRoutingModule: AppRoutingModule;
+
+ beforeEach(() => {
+ appRoutingModule = new AppRoutingModule();
+ });
+
+ it('should create an instance', () => {
+ expect(appRoutingModule).toBeTruthy();
+ });
+});