错误ReferenceError：未定义OktaSignIn

Question

我正在尝试将okta与webpack和angular2集成，我正在使用几乎所有内容，我最终会出错。我正在使用来自https://angular.io/resources/zips/webpack/webpack.zip的设置，并遵循http://developer.okta.com/blog/2017/03/27/angular-okta-sign-in-widget中正确提到的内容

我试图在vendor.ts中导入okta-sign-in.min.js以及在okta.service.ts中导入

import '@okta/okta-signin-widget/dist/js/okta-sign-in.min';

文件被导入，但我仍然得到OktaSignIn没有定义错误

在此先感谢您的帮助..

Answer 1

你绝对不会遵循这些步骤。根本没有这条线的重要性。

import '@okta/okta-signin-widget/dist/js/okta-sign-in.min';

okta-sign-in.min是一个需要包含在index.html中的javascript。如果您正在使用angular-cli，那么如教程中所述

"scripts": [
  "../node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.min.js"
],

正确提到了教程中的所有步骤。

第1步：创建1个服务

declare let OktaSignIn: any;

将需要此行，根据需要在此初始化构造函数。

第2步：在whatevercomponent.component.ts中调用此服务。

Answer 2

step1
import '@okta/okta-signin-widget/dist/js/okta-sign-in.min';
step2:
"scripts": [
  "../node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.min.js"
],
step3:
declare let OktaSignIn: any;
step4:
var Oktasignin=new Oktasignin('okta-signin-widget');

Answer 3

更换

declare let OktaSignIn: any;
import '@okta/okta-signin-widget/dist/js/okta-sign-in.min';

通过

var OktaSignIn = require('@okta/okta-signin-widget');

只是因为tslint不是webpack而在某处发生的

Answer 4

这需要结合正确的类型和正确的库集成。遗憾的是，Okta在他们的文档或库维护者对其Github存储库中的问题的响应中没有这么简单或明确。

@parth-ghiya was most of the way there，但他的方法缺乏打字支持。

这是我的打字，以便我可以将小部件用作全局（环境）类型。

declare class OktaSignIn {
  constructor(configuration: OktaSignInConfig);
}

interface OktaSignIn {
  renderEl(configuration: { el: string }): void;
  remove(): void;

  session: {
    get: (callback: (repsonse: any) => void) => void;
  };
}

interface OktaSignInConfigAuthParams {
  issuer: string;
  display: 'page';
  scopes: string[];
  responseType: string[];
}

interface OktaSignInConfigi18n {
  en: {
    'primaryauth.username.placeholder': string;
    'primaryauth.username.tooltip': string;
    'error.username.required': string;
    'error.password.required': string;
  };
}

interface OktaSignInConfig {
  baseUrl: string;
  logo: string;
  clientId?: string;
  redirectUri?: string;
  authParams: OktaSignInConfigAuthParams;
  i18n: OktaSignInConfigi18n;
}