angular 5 router not working

[dinglicoding]

hi

i was use quickstart with angular. https://docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-angular?view=office-js

when i want to use router of angular ,so my package.json

{ "name": "pacvue-addins", "description": "", "author": "", "version": "0.1.0", "scripts": { "start": "webpack-dev-server --mode development --https --key ./certs/server.key --cert ./certs/server.crt --cacert ./certs/ca.crt --port 3000", "sideload": "office-toolbox sideload -m manifest.xml -a Excel", "build": "webpack --mode production", "dev": "webpack --mode development", "validate": "office-toolbox validate -m manifest.xml" }, "dependencies": { "@angular/common": "^5.2.11", "@angular/compiler": "^5.2.9", "@angular/core": "^5.2.9", "@angular/forms": "^7.2.12", "@angular/platform-browser": "^5.2.9", "@angular/platform-browser-dynamic": "^5.2.9", "@angular/router": "^7.2.12", "@microsoft/office-js": "^1.1.11", "@microsoft/office-js-helpers": "^1.0.2", "babel-polyfill": "^6.26.0", "office-toolbox": "^0.1.0", "office-ui-fabric-js": "^1.5.0", "zone.js": "^0.8.26" }, "devDependencies": { "@types/node": "^10.12.18", "@types/office-js-preview": "0.0.33", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.5", "babel-preset-env": "^1.7.0", "file-loader": "^3.0.1", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "ts-loader": "^5.3.2", "typescript": "^3.4.1", "webpack": "^4.28.2", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.1.14" } }

and i add a AppRoutingModule.

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import AdverstingComponent from './adversting/adversting.component';

import CampaignPerformanceComponent from './campaign-performance/campaign-performance.component';

const routes: Routes = [ {path: '', component:AdverstingComponent,data:{name:"adversting"}}, {path: 'campaign', component:CampaignPerformanceComponent,data:{name:"campaign"}} ];

@NgModule({ imports: [RouterModule.forRoot(routes,{ enableTracing: true })], exports: [RouterModule] }) export class AppRoutingModule { }

and add at the end of app.component.html alse app.module.ts add AppRoutingModule in imports . then npm start . nothing error.but can not display any html

it's any wrong with add a router for angular?

[kbrandl]

@dinglicoding sorry to hear that you're having trouble. I'm going to transfer this issue to the OfficeDev/generator-office repository, where issues related to Yo Office are tracked.

[ragavanrajan]

Hi Team, This is really worrying us a lot. If I add any component or router the add-in breaks immediately. Routing is dead. Pls provide fix

[akrantz]

@ragavanrajan There are updated versions of the template. Can you see if the updated version will work for you?

It would also help if you could provide simple steps on how to modify the latest template. One way you do this is to clone https://github.com/OfficeDev/Office-Addin-TaskPane-Angular, create a branch with the changes, and push the branch to your fork. Be aware this will be public so don't include your actual project code, just steps that can reproduce the problem.

[ragavanrajan]

@akrantz Thank you for the repo. Tried the new one. But no luck. Issue still exist. When routing is added even though Hash location strategy is enabled it displays just blank. Possibly office.js is blocking the route somewhere.

[AppliNH]

Hi, any updates ?

[TCourtneyOwen]

@AppliNH @ragavanrajan Can you please provide a repro this issue per these steps:

Clone https://github.com/OfficeDev/Office-Addin-TaskPane-Angular, create a branch with the changes, and push the branch to your fork. Be aware this will be public so don't include your actual project code, just steps that can reproduce the problem.

This will make it easier for us to investigate.

Thanks,

Courtney

[zackzhang88]

I have the same problem with router in Angular, failed to inject Router into constructor, failed to use routerLink in template either.

[zackzhang88]

@AppliNH @ragavanrajan Can you please provide a repro this issue per these steps:

Clone https://github.com/OfficeDev/Office-Addin-TaskPane-Angular, create a branch with the changes, and push the branch to your fork. Be aware this will be public so don't include your actual project code, just steps that can reproduce the problem.

This will make it easier for us to investigate.

Thanks,

Courtney

I've push the sample code to my fork, please take a look. https://github.com/zackzhang88/Office-Addin-TaskPane-Angular

[AppliNH]

Hey !

I've eventually successfully fixed my issues. I've also publish a template-ish outlook add-on project, that uses Angular and Router.

It's here : https://github.com/PrimitivoFR/Outlook-Web-AddOn-template

Even tho the code might not be perfect at some points, you can definitely consider it as a starter for your next outlook add-on, IF you still have troubles at implementing Angular Router in your project.

[trungdtbk]

Hey !

I've eventually successfully fixed my issues. I've also publish a template-ish outlook add-on project, that uses Angular and Router.

It's here : https://github.com/PrimitivoFR/Outlook-Web-AddOn-template

Even tho the code might not be perfect at some points, you can definitely consider it as a starter for your next outlook add-on, IF you still have troubles at implementing Angular Router in your project.

Hi, what specifically did you change to make it work? Thanks

[AppliNH]

Hi, what specifically did you change to make it work? Thanks

Hey ! I haven't done anything in particular. I've just restarted my project from scratch, and it worked out.

[biku97]

Hello, any update on this issue.