问题标签 [angularbuild]

我想在运行时从 json 文件加载配置变量以构建我的 Angular 应用程序

我在 src 目录中创建了我的 json 文件 app.conf.json，它包含：

我创建了一个抽象类 AppConfig ：

我创建了服务

在 app.module.ts 之后，我创建了提供程序：

现在我的文件已加载，我想将数据（window.config）传递给我的 environment.ts 文件，为此我创建了一个可以扩展环境的类：

在我的 envronment.ts 文件中：

问题就在这里，我无法将数据获取到环境文件，我不知道为什么，或者错误在哪里？它在我的窗口变量中吗？还是有另一种方法来获取环境文件中的数据？

非常感谢您的帮助

使用以下命令升级到 Angular 12ng update @angular/core@12 @angular/cli@12会导致我在使用该--configuration production模式编译时出现以下错误。

这是这个问题的副本，但想发布一个正确的问题/答案，因为它肯定会帮助其他人，我不知道我们什么时候才能在线程上再次发布，因为它几天前被关闭了

我正在使用Angular 12.0.2并看到消息Generating browser application bundles。我不是在构建prod版本，而是在运行dev版本。这是Angular Development Build的正常行为吗？

Google Chrome DevTools 源文件：

我创建了一个新的 Angular 9 项目，它构建了名称为 default~dashboard.js、default~dashboard~dashboard.js、default~request~request.js 的包。如何配置我的项目以使用自定义名称构建捆绑包？

我想用-替换~。

我在构建角度项目时遇到了奇怪的问题。我不知道为什么会这样。

以下是错误

“类型错误未定义 i ｢wdm｣：编译失败。i ｢wdm｣：正在编译... 16% 正在构建模块 3/5 模块 2 个活动 ...rackQlik\ERPISTO.Web.UI\src\styles.scssD: \Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@angular\compiler-cli\src\transformers\program.js:480 throw e; ^

ReferenceError：类型未在 validateAnalyzedModules (D:\Working Projects\ TrackQlik\ERPISTO.Web.UI\node_modules@angular\compiler\bundles\compiler.umd.js:31268:15) 在 mergeAndValidateNgFiles (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@angular\compiler\bundles \compiler.umd.js:31458:12) 在 AotCompiler.loadFilesSync (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@angular\compiler\bundles\compiler.umd.js:30666:16) 在 AngularCompilerProgram AngularCompilerProgram.get [as tsProgram] 上的 .initSync (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@angular\compiler-cli\src\transformers\program.js:384:49) (D:\Working项目\TrackQlik\ERPISTO.Web。UI\node_modules@angular\compiler-cli\src\transformers\program.js:359:22) 在 AngularCompilerProgram.getTsSyntacticDiagnostics (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@angular\compiler-cli\src \transformers\program.js:109:21) 在 checkDiagnostics (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ngtools\webpack\src\gather_diagnostics.js:38:27) 在 Object.gatherDiagnostics (D :\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ngtools\webpack\src\gather_diagnostics.js:60:9) 在 TypeChecker._diagnose (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ ngtools\webpack\src\type_checker.js:94:53)"\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ngtools\webpack\src\gather_diagnostics.js:38:27) 在 Object.gatherDiagnostics (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ngtools \webpack\src\gather_diagnostics.js:60:9) 在 TypeChecker._diagnose (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ngtools\webpack\src\type_checker.js:94:53)"\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ngtools\webpack\src\gather_diagnostics.js:38:27) 在 Object.gatherDiagnostics (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ngtools \webpack\src\gather_diagnostics.js:60:9) 在 TypeChecker._diagnose (D:\Working Projects\TrackQlik\ERPISTO.Web.UI\node_modules@ngtools\webpack\src\type_checker.js:94:53)"

有人可以帮我吗？我在这里感到震惊。

我尝试按照教程在 Angular 中生成我自己的第一个自定义组件/Web 组件：https ://indepth.dev/posts/1116/angular-web-components-a-complete-guide 它是从 2020 年开始的，所以它应该相对起来迄今为止。我也尝试过其他的 tuts，但总是一样，scripts.js 和 styles.js文件应该在之后放出来ng build...，但是它们丢失了。我什至在另一台笔记本电脑上尝试过。

完成教程中的所有步骤后，我得到以下文件作为输出：

根据教程，我应该得到以下文件：

所以我缺少scripts.js，而我的styles.js 实际上是一个以.css 结尾的styles.css文件。

我仍然尝试在 index.html 文件中使用它：

但是在浏览器中打开时页面是空白的，并且没有任何内容记录到控制台。

我正在使用以下版本：

编辑： 我能够在没有 scripts.js 和 styles.js 文件的情况下使其工作。我发现的唯一方法是将 index.html 中生成文件的路径替换为绝对路径：

结果：

但是我不能使用绝对路径，如何让它与相对路径一起使用？

我已将管理面板与前端应用程序分开，并希望将管理应用程序与 domainName/admin 等目录分开运行

为了实现这一点，我将这些行添加到我的 angular.json 并尝试从不同的目录运行：

运行应用程序后：我在控制台中收到以下错误：

这表明 .js 文件未加载可能是由于路径问题。

仅供参考，该应用程序在 Angular Universal 中，我从这个 cli 运行它：

我曾尝试更改<base href="/">index.html 中的 url，但这并没有达到目的。

但是通过这样做：

代码自动添加<base href="/admin/">，但我的文件不存在。

我正在使用 Angular 模板开发一个 ASP.NET Core WebAPI 应用程序（最初的 Angular 应用程序是由 ASP.NET 生成的）。

当我在本地运行应用程序时，一切都按预期工作。但是，已发布的应用程序会收到一个额外的 CSS，这会显着破坏布局。我最好的假设是 prod 构建做了一些它不应该做的事情（或者只是我不希望它做的事情）。

这是添加到生产构建中的 CSS：

这是angular.jsonstyles中的属性：

我已经看到一些关于 prod build 搞乱 CSS 顺序的旧线程，但现在不推荐使用修复程序。

知道这是怎么发生的吗？我能做些什么来防止它吗？

我正在使用“@angular/cli”：“~9.1.13”，当尝试在生产（ng build --prod）模式下构建我的项目时，出现错误： 无法读取未定义的属性“长度”中的错误

在我添加 fr-Fr 语言环境的 angular.json 中，我看到一条消息Locale data for 'fr-FR' cannot be found。在运行命令 npm run build 上使用“fr”的语言环境数据。

但是，我在 dist 文件夹中看到了正确的结构，并生成了 fr-FR。这是可以忽略的警告还是我的配置有问题。

PS：对于其他有效的语言环境，如 zh-HK 等，会看到相同的消息。