There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

The "yo Office" for Angular generates a bad Angular application where dependency injection does not even work.

#45

Furthermore each component's html requires to be added in the webpack.config file, that is not possible when using Angular libraries.

That is why yo Office should not belong to the documentation as long as the Angular samples that it generates have not been reworked.

[Enter feedback here]

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 15f43fe5-03e0-579c-165c-57e16b1a53ea
• Version Independent ID: 15f43fe5-03e0-579c-165c-57e16b1a53ea
• Content: Create Office Add-in projects using the Yeoman Generator - Office Add-ins
• Content Source: docs/develop/yeoman-generator-overview.md
• Product: non-product-specific
• Technology: add-ins
• GitHub Login: @o365devx
• Microsoft Alias: o365devx

Followed the article below in the Microsoft document and selected the Angular framework option to generate the project.
https://learn.microsoft.com/en-us/office/dev/add-ins/develop/yeoman-generator-overview

The commands executed successfully

but when I run the npm start command, It gives the error below.

Seems like there is an issue with the packages which needs to be resolved.

Hi,

I have noted two Microsoft projects out on GitHub:

https://github.com/OfficeDev/Office-Addin-TaskPane

https://github.com/OfficeDev/Office-Addin-TaskPane-Angular

I am presently trying to implement an Outlook web add-in with Angular that is embedded within an ASP.Net MVC application. For example, imagine that the taskpane displays the web app's login and, after logging into the web app, it redirects back to a taskpane.html or index.html.

I also saw this blog article that seemed to recommend not using the webpack.config with Angular:

https://www.initgrep.com/posts/javascript/angular/microsoft-office-addin-using-angular-cli

In my case, the web app works as expected within the browser. When loaded within the taskpane, there are content security policy or CORS / CORB errors and it won't load. The former I commented out in the ASP.Net web.config but even after implementing a couple of Chrome extensions, it still gets blocked on Chrome, for example.

Within the desktop application, the add-in loads and the ASP.Net login works but the very basic example scripts do not run which are from one of the Microsoft Outlook add-in samples which extract text from an Outlook message.

When run as a straight Angular add-in, it works as expected. However, we won't be running this within the desktop application; only doing so for testing.

I believe the situation is further complicated when embedded or served up by an ASP.Net solution due to its own routes and controllers. I’ve not found any documentation which details an approach or best practices in relation to combining an external website with Office web add-in taskpanes.

Any thoughts?

Big Thanks,

Hi everyone!

I hope you're doing well! I built an Excel task pane add-in using Angular from the given template and didn't even write or modify any code. However, after uploading the manifest file, I got an error message regarding "OTel not loaded!" from excel-web-16.00.js file (a CDN from Microsoft). So, I was wondering if you guys could let me know how to fix this problem or help me out.

Attached is a screenshot of this error.

Thank you for your time and consideration!

I am not able to view/debug the application on web, although it shows its hosted on localhost:3000 and works for Word Desktop application?
Whenever i try to navigate to web with https:localhost:3000/ I get to see the file structure and not the site, when i try to open taskpane.html by navigation , it says please side load your addin.

Also i wanted to know how can this solution be debugged via Visual Studio 2019 , as when i try to do, it says symbols are not loaded.

So its not working directly on web and not on VS 2019 as mentioned

Need help.

I did a sideload to test my add-in. I received the following error message:

The Application is hosted on a web server via. SSL. To test it before it goes production.

What am i missing?

The manifest is valid.

run : npm run build

➜ XXXX git:(main) npm run build

> [email protected] build
> webpack --mode production

assets by status 1.48 KiB [cached] 1 asset
assets by status 323 KiB [compared for emit]
  assets by path assets/ 135 KiB
    assets by path assets/*.png 94.9 KiB 8 assets
    + 2 assets
  assets by path *.html 3.28 KiB
    asset app.component.html 1.81 KiB [compared for emit]
    + 2 assets
  assets by path *.js 176 KiB
    asset polyfill.js 176 KiB [compared for emit] [minimized] (name: polyfill) 1 related asset
    asset commands.js 597 bytes [compared for emit] [minimized] (name: commands) 1 related asset
  assets by path *.xml 8.74 KiB
    asset manifest.prod.prod.xml 4.49 KiB [compared for emit] [from: manifest.prod.xml] [copied]
    asset manifest.prod.xml 4.26 KiB [compared for emit] [from: manifest.xml] [copied]
asset taskpane.js 996 KiB [emitted] [minimized] [big] (name: taskpane) 2 related assets
orphan modules 1.5 MiB [orphan] 199 modules
runtime modules 1.33 KiB 6 modules
modules by path ./node_modules/core-js/ 541 KiB 520 modules
modules by path ./node_modules/rxjs/dist/ 297 KiB 217 modules
modules by path ./src/ 15.9 KiB
  modules by path ./src/taskpane/app/ 14 KiB 3 modules
  + 2 modules
modules by path ./node_modules/@angular/ 2.97 MiB
  modules by path ./node_modules/@angular/common/fesm2015/*.js 293 KiB 2 modules
  + 3 modules
./node_modules/regenerator-runtime/runtime.js 24.6 KiB [built] [code generated]
./node_modules/zone.js/fesm2015/zone.js 122 KiB [built] [code generated]
./node_modules/tslib/tslib.es6.js 14.4 KiB [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  taskpane.js (996 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  taskpane (996 KiB)
      taskpane.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.76.0 compiled with 3 warnings in 12875 ms

package.json

{
  "name": "XXXXX",
  "version": "1.0.1",
  "repository": {
    "type": "git",
    "url": "XXXXXXX"
  },
  "license": "MIT",
  "config": {
    "app_to_debug": "excel",
    "app_type_to_debug": "desktop",
    "dev_server_port": 3000
  },
  "engines": {
    "node": ">=14 <17",
    "npm": ">=6 <9"
  },
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "convert-to-single-host": "node convertToSingleHost.js",
    "dev-server": "webpack serve --mode development",
    "lint": "office-addin-lint check",
    "lint:fix": "office-addin-lint fix",
    "prettier": "office-addin-lint prettier",
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:desktop:outlook": "office-addin-debugging start manifest.outlook.xml desktop --app outlook",
    "start:web": "office-addin-debugging start manifest.xml web",
    "stop": "office-addin-debugging stop manifest.xml",
    "test": "npm run test:unit && npm run test:e2e",
    "test:e2e": "mocha -r ts-node/register test/end-to-end/*.ts",
    "test:unit": "mocha -r ts-node/register test/unit/*.test.ts",
    "validate": "office-addin-manifest validate manifest.xml",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@angular/common": "^12.2.16",
    "@angular/compiler": "^12.2.16",
    "@angular/core": "^12.2.16",
    "@angular/platform-browser": "^12.2.16",
    "@angular/platform-browser-dynamic": "^12.2.16",
    "@microsoft/office-js-helpers": "^1.0.1",
    "core-js": "^3.9.1",
    "office-ui-fabric-js": "^1.3.0",
    "regenerator-runtime": "^0.13.7",
    "rxjs": "~7.5.0",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-typescript": "^7.13.0",
    "@types/mocha": "^8.2.0",
    "@types/node": "^14.14.22",
    "@types/office-js": "^1.0.256",
    "@types/office-runtime": "^1.0.23",
    "acorn": "^8.5.0",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^9.0.1",
    "eslint-plugin-office-addins": "^2.1.4",
    "file-loader": "^6.2.0",
    "html-loader": "^4.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mocha": "^10.1.0",
    "office-addin-cli": "^1.5.4",
    "office-addin-debugging": "^5.0.2",
    "office-addin-dev-certs": "^1.11.1",
    "office-addin-lint": "^2.2.4",
    "office-addin-manifest": "^1.12.0",
    "office-addin-mock": "^2.3.6",
    "office-addin-prettier-config": "^1.2.0",
    "office-addin-test-helpers": "^1.4.4",
    "office-addin-test-server": "^1.4.6",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "source-map-loader": "^3.0.0",
    "ts-loader": "^9.4.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.3.5",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "4.7.4"
  },
  "prettier": "office-addin-prettier-config",
  "browserslist": [
    "ie 11"
  ]
}

Getting the following error on production server:

Anyone can help me or suggest an solution?

I have created a add-in for outlook through yomen generator. For some reasons, I updated the angular version from 5.2.9 to 8.2.12.
The add-in is working fine in development mode.
But, when the add-in is published, I'm getting errors.
Is this the problem?

Expected behavior

Word add-in should show an option to open hyperlink in Office 2019.

Current behavior

I am having word add-in, built using Angular 12, TypeScript and Telerik Kendo controls. When I open the same add-in in Office 2019 and creates a link in the Editor, I don't see option "Open link in new Window" when I right click on the link. Same option is visible in Office 365. Hence I am suspecting this is something related to IE browser and add-in behavior in Office 2019.

I have attached images of different behavior of right click context menu in both Office 365 and Office 2019 versions.

Any help or pointers will be much appreciated.

I've recently started making a Word Office Add-in based on Angular.

I have 2 years of experience in Angular but I'm facing a problem with singleton injectable services.
I'm trying to make a singleton service for configuration variables.

Error:

This is the error I keep getting:
Error: Can't resolve all parameters for AppComponent: (?).

Service:

import { Injectable } from '@angular/core';

@Injectable()
export class ConfigurationService {
	constructor() {
		console.log('Configuration service created');
	}
}

AppModule:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import AppComponent from "./app.component";
import { ConfigurationService } from './configuration/configuration.service';

@NgModule({
  declarations: [
      AppComponent,
  ],
  imports: [
      BrowserModule,
  ],
  bootstrap: [
      AppComponent,
  ],
  providers: [
    ConfigurationService,
  ]
})
export default class AppModule {}

AppComponent:

import { Component } from "@angular/core";
import { ConfigurationService } from './configuration/configuration.service';

const template = require("./app.component.html");
/* global require, Word */

@Component({
  selector: "app-home",
  template,
})
export default class AppComponent {
  constructor(
      protected configurationService: ConfigurationService,
  ) {
    //
  }
}

Options I tried:

I tried adding it to AppComponent's providers (and therefore creating a new instance instead using the singleton for that class) but that also doesn't solve the problem.

Help:

Does anybody else have this problem?
Is it possible to use injectables services at all in a angular office add-in?

Angular data binding not working in Outlook

There is no change in manifest file. Its default created by generator. There is already generated command pane working fine but the task pane is having issue related to Angular I think. I tried opening the https://localhost:3000/taskpane.html which working perfectly in browser but not working through add-in opened screen.

Adding the browser console results from outlook web view. There is no error.

Context

• Operating System: Windows 10
• Node version: 16.14.0
• Office version: 2302

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?

Currently angular projects will be created based on a custom webpack build. It would be nice to see integration with @angular/cli based projects

Prerequisites

Please answer the following questions before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• I am running the latest version of Node and the tools
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

Expected behavior

I expected to be able to standard Angular tooling and have the "normal" Angular/TypeScript developer experience.

Current behavior

Unfortunately, the generator has a very specific structure, diverging a lot from what you find with classic Angular apps (no angular.json, no support for stylesheets, specific Webpack build, different way to start, different way to debug, etc).

Steps to Reproduce

• Run yo office
• Discover the frustration points

Context

I'm helping someone create a plugin for Word and while helping out, I've discovered that plugins could be created using Angular, which seemed nice enough to improve code quality, but then the issues with this generator surfaced.

Proposal

Improve this generator by turning it into a generator for more "standard" Angular applications, with an angular.json descriptor, support for https and (optionally) and easy enough way to side-load plugins.

In addition, it would be awesome to provide Angular (but also other Web developers) with a better debugging experience.

Ad minima, it would be nice to have a more recent version of Angular/TypeScript & al.

I've published an alternative based on Nrwl NX + a standard Angular 10+ app including the setup for an Office word plugin.

The repository can be found here: https://github.com/dsebastien/office-plugins-nx-workspace-template
I've also published a small article about it here: https://dsebastien.medium.com/developing-office-plugins-using-angular-and-nx-5aaf4461e967

Don't take it badly through, I understand that this is all HARD stuff, but I'm sure we can do better in 2020! 👍

I'm trying to load my add-ins in office but not working. it's work fine in online platform. I'll try With Angular 5.2.11 and MS Word 2016 my AddIn working fine when upgrading the version of angular to 11.0.5 after that Add-in does not load. below is my environment detail and code link can any one help me.

Here is my code

Additional Details :

• AddIn working fine with Word online version
• Add-in does not load with MS Word 2016/2019/365 desktop version after upgrading to latest angular version.

Environment detail :

• PC Desktop : Windows 10
• Browser on Web - Microsoft Edge, Mozila Firefox
• Office version - 2016/2019, office 365
• 64 bit Operating System

Image for after running project Desktop addin image

Prerequisites

Please answer the following questions before submitting an issue.

• I am running the latest version of Node and the tools
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

Expected behavior

Angular's template string interpolation {{ this_syntax }} in the task pane html template works and shows the text specified - "Welcome" (from the property welcomeMessage = "Welcome";) - in app.component.ts

Current behavior

Angular's template string interpolation in the task pane does not display the text and does not replace the {{ string }} syntax

[innerText] oddly works tho.

Also tried other angular syntax like *ngIf="false" and that works

Some issue mentioned setting minify to false for webpack's HtmlCopyPlugin for taskâne.html and/or app.compoent.html but that had no effect.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. generate Taskpane with Angular + TypeScript project using yo office
2. run the generated project
3. Open taskpane
4. See the text is not swapped out, {{ welcomeMessage }} is there (wrong)

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Operating System: win11
• Node version: latest lts
• Office version: latest
• Tool version: latest

Failure Logs

• I am running the latest version of Node and the tools
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

Expected behavior

Binding data with angular project

Current behavior

Data are not binded from html template, when I run plugin from outlook. If run plugin from localhost: https://localhost:3000/taskpane.html
data are binded good.

problem is the same of this
https://stackoverflow.com/questions/72761205/angular-outlook-add-in-binding-issue-in-taskpane

my template is this:

<div class="container">
    <table class="table table-fixed table-condensed" *ngIf="customers !== undefined">
        <thead>
        <tr>
            <th scope="col">Ragione Sociale</th>
            <th scope="col">Indirizzo</th>
            <th scope="col">Comune</th>
            <th scope="col">Provincia</th>
        </tr>
        </thead>
        <tbody>
        <tr 
        *ngFor="let customer of customers.value" 
        (click)="onSelect(customer)"
        [ngClass] = "{'table-primary' : customerSelected == customer}"
        >
            <td>{{customer.RagioneSociale1}}</td>
            <td>{{customer.Indirizzo}}</td>
            <td>{{customer.Descrizione}}</td>
            <td>{{customer.Provincia}}</td>
        </tr>
        </tbody>
    </table>
    
</div>

Prerequisites

Please answer the following questions before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• [Yes] I am running the latest version of Node and the tools
• [Yes] I checked the documentation and found no answer
• [Yes ] I checked to make sure that this issue has not already been filed

Expected behavior

I created an app for outlook addIn. The notation under interpolation ({{}} brackets ) must be replaced with the value. It doesn't seems to work.

Current behavior

Its just {{caseTypeInternal?.firstApplicant?.name}}

Steps to Reproduce

I don't have any reproduction steps. It seems to work in the local host but doesn't work when I deploy it to the server. It used to work fine previously until I updated the angular and node.

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Operating System: Windows10
• Node version: node: '12.14.1'
• Office version: 365
• Tool version:

Failure Logs

Please include any relevant log snippets, screenshots or code samples here.

Yo office generator is great but not behaving as per angular framework. Because of missing angular.json file it is really hard to manually create components, Module , pipe and services manually instead of angular cli. Also the router is breaking no idea why router is not loading.

Hi,

I continuously getting errors to load icon in bar because of CORS issue & styles also not working after making any changes in ts file.
I just pull it and after installing node dependencies. Start the app via npm run dev-server & import the manifest file in word app in browser.

Access to image at 'https://localhost:3000/assets/icon-80.png' from origin 'https://word-edit.officeapps.live.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

and styles are also not loading,

Refused to apply style from 'https://localhost:3000/1fda685b81e1123773f6.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Running in

• ubuntu 22.04
• chrome version - Version 108.0.5359.71 (Official Build) (64-bit)
• node v16.16.0
• npm 8.15.1

Prerequisites

Please answer the following questions before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• I am running the latest version of Node and the tools
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

Expected behavior

• Create new add in with Typescript & Angular taskpane
• Add any sort of service, whether it's a 3rd party or you own and inject it into the AppComponent
• Run the app (it compiles)
• Open task pane in Outlook
• The service is properly wired in and can function like in any other angular app created by ng new or similar

Current behavior

• Create new add in with Typescript & Angular taskpane
• Add any sort of service, whether it's a 3rd party or you own and inject it into the AppComponent
• Run the app (it compiles)
• Open task pane in Outlook
• See Error about Can't resolve all parameters for AppComponent: (?)

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

• Create new add in with Typescript & Angular taskpane
• Add any sort of service, whether it's a 3rd party or you own and inject it into the AppComponent
• Run the app (it compiles)
• Open task pane in Outlook
• See Error about Can't resolve all parameters for AppComponent: (?)

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Operating System: win11
• Node version: latest lts
• Office version: latest
• Tool version: latest

Failure Logs

Compiled with problems:
×
ERROR
Can't resolve all parameters for AppComponent: (?).
    at syntaxError (https://localhost:3000/taskpane.js:14132:19)
    at CompileMetadataResolver._getDependenciesMetadata (https://localhost:3000/taskpane.js:33908:35)
    at CompileMetadataResolver._getTypeMetadata (https://localhost:3000/taskpane.js:33803:26)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (https://localhost:3000/taskpane.js:33409:24)
    at CompileMetadataResolver._getEntryComponentMetadata (https://localhost:3000/taskpane.js:34003:30)
    at https://localhost:3000/taskpane.js:33670:70
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (https://localhost:3000/taskpane.js:33670:53)
    at JitCompiler._loadModules (https://localhost:3000/taskpane.js:39359:53)
    at JitCompiler._compileModuleAndComponents (https://localhost:3000/taskpane.js:39342:36)

Please include any relevant log snippets, screenshots or code samples here.

// app.module.ts

import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { BrowserModule } from "@angular/platform-browser";
import AppComponent from "./app.component";
import { HmService } from "./hm.service";

@NgModule({
  declarations: [AppComponent, 
  //  HmService // nope
  ],
  imports: [BrowserModule,],
  // exports: [HmService,], // nope
  bootstrap: [AppComponent],
})
export default class AppModule {}

// app.component.ts

import { HttpClient } from "@angular/common/http";
import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./app.component.html",
})
export default class AppComponent {
  welcomeMessage = "Welcome";

  constructor(private http: HttpClient) {
    
  }

  async run() {
    /**
     * Insert your Outlook code here
     */
  }
}

or even

// hm.service.ts aka the own namespace

import { Injectable } from '@angular/core';

@Injectable()
export class HmService {
    
    callMe(){
     console.log('ok');   
    }
  
    constructor() { }
}

// app.component.ts

import { Component } from "@angular/core";
import { HmService } from "./hm.service";

@Component({
  selector: "app-home",
  templateUrl: "./app.component.html",
})
export default class AppComponent {
  welcomeMessage = "Welcome";

  constructor(private svc: HmService) {
    
  }

  async run() {
    /**
     * Insert your Outlook code here
     */
  }
}

Note about the undocumented limitations of this setup

This is the second issue I report which appears undocumented in the main docs. Also the first one simply is still to be triaged even though it is clearly a bug.

Maybe it's an idea to also disclose the shortcomings of this setup somewhere in the README or other docs. This is the 2nd issue with very basic Angular features that is in this project, how many more are there and is there a common problem here? Maybe the angular provided by the generator is not a full-featured version? But why is this then not disclosed anywhere?

I would go even further and suggest that the next person having angular problems and ending up reading this issue to not even bother with this setup and just go with an option that doesn't contain a broken version of a framework.