Angular 7和CDN

Question

我正在使用Angular 7编写我的第一个Angular应用。

通常，在编写HTML时，我会使用CDN（用于引导程序，字体等）

通过查看一些教程，他们建议保留默认的'index.html'作为生成的，但这似乎是为标准css，js和字体添加CDN的明显地方。

Angular是否有另一种添加CDN的方法。

Answer 1

如果您想使用CDN，那么index.html是您要做的地方。

但是，更常见的方法是npm install要使用的库，然后使用angular.json从node_modules文件夹加载它

例如，以这种方式使用引导CSS：

npm install --save bootstrap

然后在angular.json中

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css"
]

然后重新启动服务器。所有引导样式都将捆绑在您的应用中，并且可以从任何组件进行访问。

请注意，angular.json中有2个styles数组，您需要第一个。

当您想更新到引导程序的更新版本时，只需npm install即可。

使用node_modules的好处是（1）与从Internet访问资源相比（2）一旦安装了node_modules，您的应用就不再依赖Internet连接来获取资源。

Answer 2

您可以将CDN包含在index.html文件中，另一种包含此文件的方法是：

  <?php

 $name = $_GET['fname'];
 $model = $_GET['model'];

 //write cookies for name and model for 1 day
 setcookie('Name', $name, time() + 86400);
 setcookie('Model', $model, time() + 86400);

if(isset($_COOKIE['Name'])){
  echo "Cookie ".$_COOKIE['Name']." is set";
 }
 else{
   echo "<div class='pageContainer'>";
   echo "<h2 class='containerText, centerText'>Failed to validate inputs";
   echo "<br><br>";
   echo "<a href='order01.php'><button>Go Back</button></a>";
   echo "</div>";
   exit();
  }

然后将其包含在angular.json文件的脚本中

npm install bootstrap --save

然后重新运行您的应用并构建服务器。

Answer 3

我只是建议使用stackblitz.com。他们实现了动态方法来编码和运行Angular应用程序，而无需使其在本地运行。

Answer 4

使用CDN替代方法的有效方法是使用npm install命令，它将  为您提供比CDN更好，更快的功能，还修复了angular-json文件。

npm install bootstrap --save