Включить динамические данные JSON в приложение Angular7 - PullRequest
Новая
       41

Включить динамические данные JSON в приложение Angular7

0 голосов
/ 13 декабря 2018

Я использую как ng serve --watch, так и ng build --watch.При использовании ng build он будет использовать мой файл index.html, но при использовании ng serve он, похоже, его игнорирует.

Сейчас я рендеринг динамического JSON-файла в файле index.html, например: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ApiApp</title>
  <base href="<%=base%>">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

   <script type="text/javascript">

       const appData = JSON.parse('<%=json%>');

   </script>

  <app-root></app-root>
</body>
</html>

вышеприведенное работает с ng build, но не ng serve, так как ng serve, похоже, не включает этот файл.

Есть ли лучший способ отправить динамический JSON вAngular7 приложение, когда приложение загружается впервые?Мой сервер может визуализировать JSON на index.html в рабочем состоянии, но во время разработки с ng serve он работает не так хорошо.

1 Ответ

0 голосов
/ 13 декабря 2018

Пока я просто отказался от ng-serve и просто использовал ng build --watch, а затем использовал static-server (инструмент CLI npm), например так: 

"static-server": "cd dist/my-app && static-server --index index.html"

и мой index.html выглядитнапример: 

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

</head>
<body>

   <script type="text/javascript">

     define('app-data',() => {
       console.log('retrieving app-data...');

       let val = null;
       try{
         val = JSON.parse('<%=json%>')
       }
       catch(err){
         val = {routes: [1,2,3,4,5].map(v => ({val:v}))};
       }

       return {
         value: val
       }
     });

   </script>

  <app-root></app-root>
</body>
</html>

requirejs позволяет мне легко загружать динамический код, пока не понял, как это сделать с помощью Angular.

...