2017-07-08 16 views
39

Jestem nowy w firmie Ionic. Rozpocząłem projekt z super szablonem. Ale kiedy próbuję uruchomić aplikację w przeglądarce. Wystąpił błąd informujący, że:Ionic 2: ReferenceError: webpackJsonp nie jest zdefiniowany

ReferenceError: webpackJsonp is not defined 
    at http://localhost:8100/build/main.js:1:1 

Próbowałem umieścić vendor.js w index.html, ale to nie zadziałało.

Oto plik index.html. Usunąłem plik vendor.js, ponieważ nie działał.

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Ionic App</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <meta name="format-detection" content="telephone=no"> 
    <meta name="msapplication-tap-highlight" content="no"> 

    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> 
    <link rel="manifest" href="manifest.json"> 
    <meta name="theme-color" content="#4e8ef7"> 

    <!-- cordova.js required for cordova apps --> 
    <script src="cordova.js"></script> 

    <!-- un-comment this code to enable service worker 
    <script> 
    if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('service-worker.js') 
     .then(() => console.log('service worker installed')) 
     .catch(err => console.log('Error', err)); 
    } 
    </script>--> 

    <link href="build/main.css" rel="stylesheet"> 

</head> 
<body> 

    <!-- Ionic's root component and where the app will load --> 
    <ion-app></ion-app> 

    <!-- The polyfills js is generated during the build process --> 
    <script src="build/polyfills.js"></script> 

    <!-- The bundle js is generated during the build process --> 
    <script src="build/main.js"></script> 

</body> 
</html> 
+0

Dzieje się tak głównie dlatego, że projekt używa dzielenia kodu i kod Webpacka został załadowany po fragmencie "main.js" – thangngoc89

+0

Czy możesz podać więcej informacji? Ten błąd oznacza, że ​​kod jeszcze nie załadował środowiska uruchomieniowego Webpack, ale nie można powiedzieć, dlaczego na podstawie podanych informacji. –

+0

Co rozumiesz przez usunięcie pliku vendor.js? Zupełnie pewne, że środowisko uruchomieniowe webpacka jest gdzieś tam, gdzie – thangngoc89

Odpowiedz

85

Dosłownie przeszedł to samo, co ty. Dodałem skrypt vendor.js PRZED main.js w /src/index.html - teraz działa lokalnie.

<!-- The polyfills js is generated during the build process --> 
    <script src="build/polyfills.js"></script> 

    <script src="build/vendor.js"></script> 

    <!-- The bundle js is generated during the build process --> 
    <script src="build/main.js"></script> 
+0

Zrobiłem, ale to nie zadziałało. Usunięto aplikację, a teraz ponownie uruchomiono projekt z pustym templetem. –

+3

To zadziałało dla mnie – alokj03

+4

To powinno być zaakceptowaną odpowiedzią, ponieważ to jest przyczyną błędu – sebaferreras

45

Jest to łamanie zmiana w App-jonowy Skrypty

https://github.com/ionic-team/ionic-app-scripts/releases/tag/v2.0.0

src/index.html muszą zostać zmodyfikowane w celu włączenia nowego znacznika script sprzedawca.

... 
<body> 

    <!-- Ionic's root component and where the app will load --> 
    <ion-app></ion-app> 

    <script src="cordova.js"></script> 

    <!-- The polyfills js is generated during the build process --> 
    <script src="build/polyfills.js"></script> 

    <!-- all code from node_modules directory is here --> 
    <script src="build/vendor.js"></script> 

    <!-- The bundle js is generated during the build process --> 
    <script src="build/main.js"></script> 

</body> 
... 
11

Dodaj vendor.js ścieżkę w tagu skrypt w < your application directory > /src/index.html

<script src="build/vendor.js"></script> 

sprawiają również zmiany w < your application directory >/src/service-worker.js Plik - zawierają vendor.js w sekcji precache:

// pre-cache our key assets 
self.toolbox.precache(
    [ 
     './build/main.js', 
     './build/vendor.js', // <=== Add vendor.js 
     './build/main.css', 
     './build/polyfills.js', 
     'index.html', 
     'manifest.json' 
    ] 
); 
+0

Nie miałem self.toolbox.precache (...); w /src/service-worker.js przed tą skargą na temat vendor.js Aktualizacja pliku index.htm wydaje się zajmować błędem środowiska wykonawczego ... bez modyfikacji service-worker.js Co to znaczy "wstępnie buforować te zasoby"? i czy ma zastosowanie do wdrożeń PWA, a także do budowania na platformę podobną do Androida? – Marie

4

I twarz tej samej sprawie, kiedy zacząłem rozwijać stary projekt jonowy 2 z jonowym 3. po tym ste ps działa dla mnie. opne src\index.html umieścić tę linię

<script src="build/vendor.js"></script> 

przed

<script src="build/main.js"></script> 

i po

<script src="build/polyfills.js"></script> 

jak ten

<!DOCTYPE html> 
... 
<body> 

    <!-- Ionic's root component and where the app will load --> 
    <ion-app> 
    </ion-app> 
    <!-- The polyfills js is generated during the build process --> 
    <script src="build/polyfills.js"></script> 
    <script src="build/vendor.js"></script> <---- here 
    <!-- The bundle js is generated during the build process --> 
    <script src="build/main.js"></script> 

</body> 

</html> 
Powiązane problemy