web-dev-qa-db-ja.com

Angular2：未定義のプロパティ 'call'を読み取ることができません（ブートストラップ時）

下部の更新を確認してください！

アプリのブートストラップ中にエラーをスローするサービスがあります。 Cannot read property 'call' of undefined。私はng2 2.4.2とangular-cli 1.0.0-beta.24を使用しています。

エラー

Uncaught TypeError：Object.450（src async：7）のwebpack_require（bootstrap 81b10f8…：52）でObject.621（environment.ts：8）のwebpack_require（bootstrap 81b10f8…：52）でundefinedのプロパティ 'call'を読み取ることができませんwebpack_require（bootstrap 81b10f8…：52）at Object.1057（util.service.ts：35）at webpack_require（bootstrap 81b10f8…：52）at webpackJsonpCallback（bootstrap 81b10f8…：23）at main.bundle.js：1

ご覧のとおり、utilサービスの問題です。これは次のようになります。

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Project } from '../datatypes/';
import { Response } from '@angular/http';


@Injectable()
export class UtilService {
    constructor(private router: Router) {}

    public redirectToProject(project: Project) {
        let query = project.ProjectName.split(' ')
            .join('-')
            .concat('-' + project.Id)
            .toLowerCase();
        this.router.navigate(['/project', query]);
    }

    public extractData(res: Response) {
        let body = res.json();
        return body || {};
    }
}

ストレンジ：chromeでソースファイルを検査すると、構文の強調表示がないため、構文エラーが示唆されます-私の意見ではありません。

2017年1月20日更新

Ng2.4.4およびangular-cli 1.0.0-beta26に更新しました。問題はまだ同じです。遊んでいると、Arjanはベータ21で動作することを知りました。変更を確認する必要があります。問題は、上記のサービスではなく、environment.tsファイル（すべてデフォルトが設定されています）。

angulartypescriptservicedependency-injectionwebpack
14
sandrooco

最終的に私は答えを見つけた-beta.32.3。これらのファイルを使用する必要があります。

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

ローカルおよびグローバルパッケージを更新することも重要です。グローバルな更新については、 そのgithubページ で詳しく説明されています。ローカルでの更新も簡単です。package.jsonの依存関係を更新するだけです。

重要：beta.29 angular cliはパッケージです@angular/cli、angular-cliもう..

1
sandrooco

実行時にモジュールのインポートに変更を加えたときに起こると思います。

を使用してアプリケーションを再実行ng serveそしてそれは私のために問題を修正しました。

また、遅延モジュールがロードされる前に他のモジュールで遅延ロードされたモジュールのコンポーネントを使用しようとした場合、または同様のシナリオが発生する場合があります。

17
Franklin Pious

私にとっては、これは独自のクライアントサイドJavaScriptを使用してwebpackで生成されたバンドルを動的にロードすることによって引き起こされました。これは、独自のローダースクリプトで簡単に修正されました。

Webpackを使用する場合、通常のAngular 2 index.htmlには<style>または<script>要素は含まれませんが、<app-root></app-root>のみが含まれます。ng serveまたはng buildを実行すると、ファイルが拡張されます server-sideを使用して、ファイルの最後に次のようなものを追加します。

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

...または、ng build --prodの場合：

<link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
...
<script type="text/javascript" src="inline.66e3ead788094772ecc4.bundle.js"></script>
<script type="text/javascript" src="polyfills.477266e3ead78809ecc4.bundle.js"></script>
<script type="text/javascript" src="vendor.18c581546c015d1bfc6e.bundle.js"></script>
<script type="text/javascript" src="main.9a5c1002f220245829cd.bundle.js"></script>

結果のサーバー側のHTMLファイルはブラウザーに送信されます。また、ブラウザーは、HTMLに既に存在する<script>要素を、出現した順に実行します。

しかし、これらの<script>要素client-sideを追加するときは、実行時に動的に異なり、デフォルトでは非同期に実行されます。 「パーサーで挿入されたスクリプト」および「スクリプトで挿入されたスクリプト」に関するメモを参照してください MDNのスクリプト ページ。

この場合、Angular 2アプリケーションをCMSのページに含めます。新しいバージョンをリリースするたびにCMSページを変更する必要を回避するために（名前のハッシュを変更します生成されたバンドル）、独自のJavaScriptコードを使用してバンドルを追加します。ブラウザの場合、これらは「スクリプト挿入スクリプト」です。これらが正しい順序で実行されるようにするには、asyncをfalseに設定します（ deferを設定してもうまくいかなかった）：

var script = document.createElement('script');
script.async = false;
script.src = ...

または、document.writeを使用する場合は、async="false"属性が含まれていることを確認してください。

document.write(unescape('%3Cscript async="false" src="..." %3E%3C/script%3E'));

（面白い事実：Chrome 55以降 低速接続ではこれらのブロッキングスクリプトをスキップする可能性があります 、異なるドメインでホストされている場合）

これがないと、ほとんどの場合、angle-cli 1.0.0-beta.21で問題ありませんでしたが、ときどき"変数が見つかりません：webpackJsonp"が表示されました。それ以降のバージョンでは、どのスクリプトが最初に実行され、どのブラウザが使用されるかに応じて、異なるエラーが表示される場合があります。のような：

Cannot read property 'call' of undefined
TypeError: modules[moduleId] is undefined
ReferenceError: Can't find variable: webpackJsonp
TypeError: undefined is not an object (evaluating modules[moduleId].call')
Unable to get property 'call' of undefined or null reference

また、vendor.bundle.jsとpolyfills.bundle.jsは古いバージョンでは使用されていなかったことにも注意してください。そして、スクリプトをどこかに挿入する必要があるかもしれませんbelow the <app-root>要素。

9
Arjan

同様の問題がありました。 @ angular-cli（1.0.0-rc.2）および@ angular/core（2.4.9）に更新し、Sandroocoのソリューションに従いました。ただし、動作するために必要な追加ファイルpolyfills.bundle.jsがあります。

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

役に立てば幸いです。

0
G...... T......

私の場合、スクリプトタグが正しい順序で配置されていることを確認する必要がありました。

  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="scripts.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
0
Amadeus Sánchez