在加载angular2模块之前,不在index.html中加载脚本

时间:2017-06-25 01:24:10

标签: html angular

我正在尝试实现一个依赖于第三方js库的angular2应用程序,该应用程序包含在index.html脚本标记中。尝试按照here概述的方式实施销售人员外部身份解决方案。

此脚本正在页面中查找一些元标记,以便正常运行,例如,是否以模型或内联形式弹出。

我使用角度平台浏览器的Meta功能在页面中设置元标记,在app.component.ts的构造函数中实现。

这似乎创建了竞争条件,因为在某些情况下(通常,当脚本存在于浏览器缓存中时),它会抛出所需元标记不可用的警报。

如果在app.component设置元标记之后,我怎么能停止在index.html中加载脚本(我用defer和async关键字btw设置它)才能加载?

app.component.ts

import {Component, OnInit} from '@angular/core';
import {TodoService} from './providers/todo.service';
import {Meta} from '@angular/platform-browser';
import {environment} from '../environments/environment';
import { isNull } from 'util';


declare var SFIDWidget: any;
declare var SFIDWidget_loginHandler: any;
declare var SFIDWidget_logoutHandler: any;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [TodoService]
})
export class AppComponent implements OnInit {

  constructor(public meta: Meta) {

    //meta tag stuff

    //check for meta tags and add if not exists
    if (isNull(this.meta.getTag('name="salesforce-logout-handler"'))) {
      this.meta.addTags(
        [
          {
            name: "salesforce-client-id",
            content: `${environment.clientId}`
          },
          {
            name: "salesforce-community",
            content: `${environment.communityURL}`
          },
          {
            name: "salesforce-redirect-uri",
            content: `${environment.redirectURL}`
          },
          {
            name: "salesforce-mode",
            content: "modal"
          },
          {
            name: "salesforce-forgot-password-enabled",
            content: "true"
          },
          {
            name: "self-register-enabled",
            content: "true"
          },
          {
            name: "salesforce-save-access-token",
            content: "true"
          },
          {
            name: "salesforce-target",
            content: "#salesforce-login"
          },
          {
            name: "salesforce-login-handler",
            content: "onLogin"
          },
          {
            name: "salesforce-logout-handler",
            content: "onLogout"
          }
        ], true);
    } else {

      console.log('meta tags exist!');
    }


  }

  ngOnInit() {


  }

  onLogin(identity) {

    console.log('fired from the app component');

  }


  onLogout() {

    SFIDWidget.init();
  }


}

的index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Herokudos</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script
    src="https://sdo-134f326f986sdo-134f326f986.force.com/servlet/servlet.loginwidgetcontroller?type=javascript_widget&min=false&cacheMaxAge=0"
    async defer></script>
  <link
    href="https://sdo-134f326f986sdo-134f326f986.force.com/servlet/servlet.loginwidgetcontroller?type=css"
    rel="stylesheet" type="text/css"/>
</head>
<body>
<app-root>Loading...</app-root>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

删除您硬编码到fun loadMoviesFull(): Observable<List<Movie>> { return service.listMovies() .flatMap { filmResults -> Observable.from(filmResults.results) } .flatMap { film -> Observable.zip( Observable.just(Movie(film.title, film.episodeId, ArrayList<Character>())), Observable.from(film.personUrls) .flatMap { personUrl -> service.loadPerson(Uri.parse(personUrl).lastPathSegment) } .map { person -> Character(person!!.name, person.gender) } .toList(), BiFunction<Movie, Character, Movie>{ movie, characters -> movie.characters.addAll(characters) }) }.toList() } 的{​​{1}}标记。如果要加载依赖于Angular的脚本,请考虑在组件的ngAfterViewInit()生命周期钩子中动态加载它们。这样可以保证只有在<script>呈现后才会加载脚本。

<强> AppComponent

index.html