首页 新闻 会员 周边

angular 使用 cdn 的问题

0
悬赏园豆:30 [待解决问题]

如何让 angular build 生成的 index.html 中使用 cdn 引用 js 文件,比如

<script src="runtime-es2015.7549caacf8c7d2028953.js" type="module"></script>

改成

<script src="https://common.cnblogs.com/runtime-es2015.7549caacf8c7d2028953.js" type="module"></script>
dudu的主页 dudu | 高人七级 | 园豆:30948
提问于:2023-06-17 17:31
< >
分享
所有回答(3)
0

通过一个笨方法临时解决了,在应用启动时动态修改 index.html 文件,给引用的 js 文件加上 cdn base url

angular 应用 host 在 asp.net core 应用中,用下面的 C# 代码实现了

public class Startup
{
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        IFileProvider clientAppfileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "ClientApp", "dist"));
        UpdateIndexHtml(clientAppfileProvider);
    }

    private void UpdateIndexHtml(IFileProvider fileProvider)
    {
        var path = fileProvider.GetFileInfo("index.html").PhysicalPath;
        var content = File.ReadAllText(path);
        var newContent = Regex.Replace(
            content,
            "(<script src=\")(runtime|main|polyfills)(-.*?\")",
            "$1https://account-cdn.cnblogs.com/$2$3");
        File.WriteAllText(path, newContent);
    }
}
dudu | 园豆:30948 (高人七级) | 2023-06-17 19:35
0

要让 Angular build 生成的 index.html 使用 CDN 引用 JS 文件,需要进行以下步骤:

  1. 打开 angular.json 文件,找到 "build" 配置项中的 "options",在其中添加 "deployUrl" 属性,将其值设置为 CDN 的 URL。

例如:

"options": {
  ...
  "deployUrl": "https://common.cnblogs.com/",
  ...
}
  1. 在 Angular 项目中安装 "ngx-build-plus" 插件,可以使用 npm 来安装该插件:
npm install --save-dev ngx-build-plus
  1. 修改 package.json 文件,增加一个新的脚本:"build:prod"
"scripts": {
  "build:prod": "ng build --prod --output-hashing none --single-bundle true --extra-webpack-config ./extra-webpack.config.js"
}
  1. 在项目根目录下新建 extra-webpack.config.js 文件,并添加以下配置:
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /environments\/environment\.ts/,
      './environment.prod.ts'
    )
  ]
};
  1. 在项目中新增 environment.prod.ts 文件,将里面的 "baseUrl" 属性设置成 CDN URL,例如:
export const environment = {
  production: true,
  baseUrl: 'https://common.cnblogs.com'
};
  1. 最后,在终端运行刚才添加的脚本:"npm run build:prod" 即可。运行完成后,生成的 index.html 文件中的 JS 文件引用会自动替换成 CDN 地址。

注意:这些步骤的具体实现可能会因为 Angular 版本、插件版本、项目配置等因素而略有不同。如果出现问题,可以先查看 Angular 官方文档或者插件的文档,或者咨询 Angular 的开发者社区。

小九九呀 | 园豆:383 (菜鸟二级) | 2023-06-17 19:54
0

要让 Angular 构建生成的 index.html 文件中使用 CDN 引用 JS 文件,你可以通过修改 Angular 的构建配置来实现。以下是一般的步骤:

打开 angular.json 文件:在你的 Angular 项目中,找到 angular.json 文件,并打开它。

寻找 "architect" 部分:在 angular.json 文件中,寻找到 "architect" 部分。其中包含了构建和部署的配置信息。

修改构建配置:在 "architect" 部分下,找到 "build" 配置,它对应着构建命令。通常是类似下面的代码片段:

json
Copy code
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// 构建选项
},
// 其他配置
},
// 其他配置
}
添加 CDN 配置:在 "options" 部分下的 "scripts" 字段中,可以添加你想要引用的 CDN 的 JS 文件。例如:
json
Copy code
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"scripts": [
{
"input": "https://cdn.example.com/runtime-es2015.7549caacf8c7d2028953.js",
"type": "module"
},
// 其他 CDN 引用
],
// 其他构建选项
},
// 其他配置
},
// 其他配置
}
请注意,这里我们将 "input" 字段的值设置为 CDN 的 URL,同时指定了 "type" 字段为 "module",以确保正确引入 ES2015 模块。你可以根据需要添加其他的 CDN 引用。

运行构建命令:在命令行中运行 Angular 的构建命令,以生成使用 CDN 引用的 index.html 文件:
bash
Copy code
ng build
构建完成后,生成的 index.html 文件中的脚本引用应该已经使用了 CDN 的 URL。

请注意,在使用 CDN 引用文件时,你需要确保 CDN 的 URL 是有效可用的,以便在用户访问应用时能够正确加载所需的 JS 文件。

希望这些步骤能够帮助你实现使用 CDN 引用 JS 文件的需求。如有其他问题,请随时提问。

Technologyforgood | 园豆:5992 (大侠五级) | 2023-06-21 22:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册