Question

对于最终构建到的Angular 7应用程序

- main.js
- assets
  -- assets/img

带有引用资产为的组件/ html

src='./assets/img/img1.jpeg'

该应用程序将分配给不同的团队，并可以在不同的根目录上托管

example.com/route/first
example2.com/route/second

如果消费者将我的构建内容称为 <script src=''../some-dir/libs/main.js">

Angular应用程序将查看当前路径以查找资产（example.com/route/first/assets），这将迫使它们将我提供的资产文件夹复制粘贴到其根目录。我想，如果我的组件可以在相对于我的构建内容（'../some-dir/libs/asset'）的位置而不是其目录根目录下查找我的资产，那么对于客户而言，这将更加简单。但是我不确定我期望的是行业标准还是合适的

如何仅通过提取和引用/导入我的构建内容来正确构建/捆绑/引用消费者可以在任何地方使用的资产？（我不需要知道使用者的项目结构，使用者也不需要更改我/他的文件夹结构）

Answer 1

我相信，在angular.json中定义"baseHref"选项或在index.html中的base中定义head标签都可以。

Answer 2

只需在应用中使用相对网址，如下所示：

<img src='./assets/img/img1.jpeg' />

如果您知道根上下文在哪里，请使用base-href和deploy-url参数构建应用，如下所示：

ng build --prod --base-href=/route1/ --deploy-url=/route1/

如果需要部署到其他根上下文中，请更改参数的值并重新构建。

但是，如果您不知道部署根上下文，则计划B为：

在useHash中将true更改为app-routing.module.ts

const routes: Routes = [/* your routes goes here */];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            useHash: true, // change useHash to true
            enableTracing: !environment.production
        })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

并将base href中的index.html更改为./，

<head>
  <base href="./">
</head>

不要将base-href和deploy-url参数添加到ng build中，然后就可以将应用程序部署到任何Web根目录。但网址以/{webroot}/#/{client-route}

结尾

Answer 3

这就是您想要的

在angular.json文件中，您的项目名称是哪里，找到您的项目名称，其中有一个属性建筑师

因此在architect.build.assets中：['添加要捆绑的资产的路径']

示例

"app1": {
      "root": "projects/app1/",
      "sourceRoot": "projects/app1/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app1",
            "index": "projects/app1/src/index.html",
            "main": "projects/app1/src/main.ts",
            "polyfills": "projects/app1/src/polyfills.ts",
            "tsConfig": "projects/app1/tsconfig.app.json",
            "assets": [
              "projects/app1/src/favicon.ico",
              "projects/app1/src/assets",
              "../more-assets-folder" <=== add your assets here
            ],
            "styles": [
              "projects/app1/src/styles.css"
            ],
            "scripts": []
          },

Answer 4

有一个名为--deploy-url的标志，可以与ng build命令一起使用。 deploy-url是将在其中存储文件或资产的URL。如果使用deploy-url，则有角度的应用程序将使用该应用程序URL或base-url来从该URL中打开资产和文件。

尝试构建命令

ng build --prod --base-href domainname.com/app/app1/ --deploy-url domainname.com/app/app1/script/

有关更多详细信息，请单击链接

如何为在其他地方加载的角度应用程序捆绑资产

4 个答案:

这就是您想要的

示例