标签: angular-cli-v7

通常我运行我的项目并使用WebPack构建我的SASS文件,我有规则生成一个CSS文件,url-loader将所有url(...)sass文件转换为dataURI.

所以background: url('my-file.svg')会转换为background url('data:image/svg+xml;base64,SoMeGiBbeRiShHeRe')

我想知道是否有办法用ng编译器实现这一目标？我对此进行了一些研究,并且使用它的方法是使用ng eject但该选项不再可用.

我有一个相当复杂的，angular.json因为我有多个项目。我想要的是每个项目单独的 environment.ts 文件。当构建目标是生产时替换环境文件似乎非常简单：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/private-label/redacted/environments/environment.prod.ts"
      }
    ],
  }
}

我正在寻找的是一种对默认/开发配置执行相同操作的方法。在angular.json不包含配置节点这样的事情，我可以找到，因此我不知道是否有可能和/或在指定fileReplacements的时候不是针对生产。

当然，如果有更好的方法来处理我没有看到的每个项目的环境，我也会对此感兴趣。

我正在使用Angular CLI（v7.x）创建一个组件库，并且无法弄清楚如何获得css规则包含在ng-packagr生成的dist文件夹中所需的第三方字体资产。

由于ng-packagr根据此问题不支持scss捆绑，因此我在后期构建任务中使用scss-bundle为我执行捆绑，并将最终捆绑的scss文件放入我的dist文件夹中。

但是，某些css规则（例如字体声明）包括对相对字体文件夹的url引用，而我还没有将其包含在dist文件夹中。

因此，例如，在我的角度库应用程序中，我有styles.scss文件，其中包含一个导入图标样式表的条目：

@import "~primeicons/primeicons.css";

但是在我的node_modules文件夹中有一个相对的字体文件夹，这些质素位于这些文件夹中，用于CSS。

一种方法是，我可以写一个进一步的后期构建步骤，将它们捆绑在一起，并将它们放到dist文件夹中我串联的scss文件旁边的fonts文件夹中，以便可以解决它们。

我想知道是否有更聪明的方法，或者在构建库来执行此操作时是否使用ng-packager或angular-cli构建的方法？

更新资料

因此，我尝试了fonts在库项目根目录（实际上是在资产文件夹下）中拥有一个文件夹的方法，并在dist构建库后将其复制到文件夹的根目录中。

在我的运动场应用程序中，我尝试在实际的lib中使用打包的样式，我有以下内容：

my-lib-playground / src / styles.scss

@import "../../../dist/my-lib/styles";

但是，当尝试使用CLI构建我的游乐场应用程序时，我得到：

ERROR in ./src/styles.scss (/Users/someone/Documents/Github/my-lib-playground/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!/Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src??embedded!/Users/someone/Documents/Github/my-lib-playground/node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from /Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/someone/Documents/Github/my-lib-playground/dist/my-lib-playground/styles.scss:609:56: Can't resolve './fonts/open-sans-v15-latin-700.eot' in '/Users/someone/Documents/Github/my-lib-playground/projects/my-lib-playground/src'

所以我的实际问题是：

在使用cli进行构建时，如何使正在使用的“游乐场”应用程序正确地包含\解析字体文件？相对于我当前的Playground应用，显然这些问题正在设法解决。什么是正确的解决方案？还是我做错了什么？

其它的办法

制作primeng一个peerDependency我的库，让开发人员负责添加primeng到他们的应用中，并angular.json根据以下丹尼尔建议的答案将相关样式包括在内。这是正确的方法，只有方法吗？

正在开发的应用程序托管在iframe中.

我在我的应用程序中配置了以下路由:

    const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'list'
  },
  {
    path: 'list',
    component: ListComponent,
    canActivate: [CanActivateRoute]
  },
  {
    path: 'dashboard',
    loadChildren: './modules/dashboard/dashboard.module#DashboardModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

在ListComponent,OnInit方法,我用下面的代码来获取查询字符串PARAMS:

this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log("val.state.root.firstChild.params: " + val.state.root.firstChild.params);
      }
    }); 
const firstParam: string = this.route.snapshot.queryParamMap.get('id');

这些似乎都不起作用.我申请的网址如下:

https://company.com/#/app-dev/list?id=3

QueryParamMap或者RoutesRecongnized似乎没有在url中获取查询字符串"id = 3".它总是返回null.

任何人都可以帮我如何从角度应用程序中的URL检索查询参数/查询字符串？

我已经@types/stripe-v3在中的脚本标签中安装了Stripe的javascript文件，并将其包括在内index.html。假定Angular编译器应自动包含@types节点模块中的所有文件。@types/stripe-v3/index.d.ts如果编译器包含该文件，则在Internet上阅读并查看是否有全局声明的var Stripe。从index.d.ts

declare var Stripe: stripe.StripeStatic;

在我的服务文件中，我有以下代码：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class BetalingService {
  stripe = Stripe(environment.stripeKey);

  constructor() { }

}

导致以下错误：

error TS2304: Cannot find name 'Stripe'.

我正在为我的 Angular 7 应用程序运行 Webpack Bundle Analyzer，它产生如下输出：

根据此处的故障排除部分使用 webpack.optimize.ModuleConcatenationPlugin 时，这是一个已知的警告。他们对 Angular CLI < 6 提出了建议。我也在这里找到了建议注释掉 ModuleConcatenationPlugin 的建议，但是，它没有确定应该在哪里注释掉。

您知道如何修复为 Angular CLI 7.1.0 连接的模块吗？谢谢你的时间。