Question

我正在尝试根据所选路由找到一个交换css和js库的方法...

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

   ->if homepage load homepage requirements...
   ->if admin load admin requirements...

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

我知道有一种方法可以通过网络包进行此操作，但似乎无法弄明白。提前谢谢。

Answer 1

要回答有关Webpack的问题，我不认为Webpack可以在这里为您提供帮助。 Webpack是一种生成用于分发文件的构建工具。要做你想做的事，你需要根据路由器做出决定，这是一个运行时变量，这在Webpack完成工作之后很久。还有其他解决方案。

一种解决方案是使用vanilla javascript。

<head>
    ...
    <script>
         var script = document.createElement('script');
         script.type = 'text/javascript';
         // Implement resource decision logic here however
         script.src = location.href.includes('admin') ? "//site.com/admin-resource.js" : "//site.com/home-resource.js"

         $("#body").append(script);
    </script>
</head>

您可以为js和css执行此操作。

另一种解决方案是在请求页面时根据路由动态生成服务器上的链接。但我不认为这对你有用，因为我可以告诉你想根据角度spa应用程序内部的路线改变这些资源。

请注意，我并不是真的推荐这一切。如果你有javascript，对于那么大的css文件更是如此，你不能一次加载它们......你可能还有一些结构性问题。您可能会考虑将应用程序拆分为两个模块（管理模块和主模块），然后将链接放置到相应顶级app.component.html文件中的资源。

Angular 2动态Javascript和CSS库

1 个答案: