Страница конфигурации MSTeams Угловой 12 SPA с маршрутизацией

ProgramBox

Страница конфигурации MSTeams Угловой 12 SPA с маршрутизацией

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#microsoft-teams

Вопрос:

Я использую Angular 12 и пишу простое приложение для групповых вкладок. Я работаю над компонентом страницы конфигурации, и html выглядит так:

 <br />
<br />
<br />
<p>Configuration 3</p>
<input type="text" placeholder="Some Test" />

В обычном браузере появится текст и поле. Но если я попытаюсь сделать то же самое с помощью пути «Установить на вкладку», я вообще не получу текст или поле ввода.

Я думаю, что это может быть как-то связано с маршрутизацией, но не могу подтвердить.

Модуль маршрутизации приложений довольно прост:

 const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'configuration',
    component: ConfigurationComponent,
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      initialNavigation:
        !BrowserUtils.isInIframe() amp;amp; !BrowserUtils.isInPopup()
          ? 'enabled'
          : 'disabled',
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Итак, что нужно, чтобы СПА-центр перенаправлялся на страницу конфигурации при использовании в командах?

Компонент конфигурации: (URL-адрес изменен специально для защиты невинных)

 import { Component, OnInit } from '@angular/core';
import { Inject, AfterViewInit, ElementRef } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import * as microsoftTeams from '@microsoft/teams-js';

@Component({
  selector: 'app-configuration',
  templateUrl: './configuration.component.html',
  styleUrls: ['./configuration.component.scss'],
})
export class ConfigurationComponent implements OnInit, AfterViewInit {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private elementRef: ElementRef
  ) {}

  ngOnInit(): void {
    microsoftTeams.initialize();
  }

  ngAfterViewInit() {
    console.log('Initializing ms teams');

    microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
      microsoftTeams.settings.setSettings({
        entityId: '',
        contentUrl: 'https://test.ngrok.io',
        suggestedDisplayName: 'Test',
        websiteUrl: 'https://test.ngrok.io',
      });
      saveEvent.notifySuccess();
    });

    console.log('Register on save');
    microsoftTeams.settings.setValidityState(true);
  }
}

Спасибо,
Ник

Ответ №1:

Для того, чтобы отобразить вкладку в командах. Вам нужно убедиться, что это возможно. Пожалуйста, ознакомьтесь с требованиями к вкладке «Документ».

Убедитесь, что вы указали домен в допустимых доменах в своем манифесте.

Пожалуйста, поделитесь более подробной информацией, такой как ошибка консоли, что вы используете статическую вкладку или конфигурацию и манифест, если проблема не решена для вас

1. Я не думаю, что в этом проблема. Скорее всего, если у меня есть детали в компоненте (угловой 12), эти компоненты отображаются не так, как ожидалось. Я добавил компонент конфигурации выше.

2. Пожалуйста, поделитесь более подробной информацией, такой как ошибка консоли? Не могли бы вы подтвердить, пожалуйста, требования к вкладкам?

3. Все требования к вкладкам были выполнены, когда я захожу в браузер, моя консоль настолько полна сообщений об ошибках того или иного рода, что это, по сути, бесполезно. Я сжег все это дотла и начал все сначала. С помощью простого приложения кажется, что оно работает, но в первый раз оно работает невероятно медленно. На самом деле я тоже не загружаю так много кода. Подробности, за которыми нужно следить.

4. Пожалуйста, поделитесь манифестом Также, пожалуйста, убедитесь, что вы определили URL-адрес содержимого в разделе «Настройки» Манифеста?

5. Я обнаружил, что это вообще не имеет никакого отношения к моей маршрутизации. Есть 2 области, вызывающие у меня проблемы. Первый-это раздел initialNavigation: выше, а второй-это когда я вставляю MsalAngular в конструктор app.component.ts. Если я сделаю что-либо из этого, я ничего не получу в своем приложении для команд.

Ответ №2:

Я проследил свою проблему для этого конкретного вопроса до строки:

   initialNavigation:
    !BrowserUtils.isInIframe() amp;amp; !BrowserUtils.isInPopup()
      ? 'enabled'
      : 'disabled',

Этот пример содержится во многих кодах вкладок «СПА в» и «Команды».

Я просто установил его в «включено» на данный момент, и я могу выйти за рамки цели этого вопроса.

Метки: Страница конфигурации MSTeams Угловой 12 SPA с маршрутизацией