标签: ng-build
构建角度应用程序并安装在服务器上
我正在开发angular6应用程序，我想生成一个要在我的服务器上进行测试的构建，当前我使用的是ng服务器，它在我的浏览器上运行时不会产生任何错误。
c：\ Users \ emiry \ Desktop \ Angular \ Projects \ StartingNewProject
当我运行ng build命令时，它将为/ dist文件夹生成一个版本，并且不返回任何错误
在我已经安装的机器上，wamp64所以我得到了ng生成的构建并将其放在我的www文件夹中
C：\ wamp64 \ www \ StartingNewProject
仅仅是这足以让我能够在服务器上运行我的应用程序？
当我尝试通过http：// localhost / startingnewproject /访问服务器上的应用程序时
它在浏览器控制台中向我返回以下错误
无法加载资源：服务器以404（未找到）状态响应polyfills.js：1无法加载资源：服务器以404（未找到）状态进行响应styles.js：1无法加载资源：服务器响应状态为404（未找到）vendor.js：1无法加载资源：服务器响应状态为404（未找到）main.js：1无法加载资源：服务器响应的状态为： 404（未找到）
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"StartingNewProject": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/StartingNewProject",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets" …推荐指数
解决办法
查看次数
Angular X - 如何更改index.html中已编译的JavaScript文件的路径
我在 Iframe 中使用我的 Angular 应用程序，并且我希望能够在执行构建（ng build）后更改 index.html 中的 javascript 文件的路径。
这是我用来构建我的 Angular 应用程序的命令：
npm run env && ng build --aot --prod --environment=prod
完成后，在我的 dist 文件夹中我有这棵树：
index.html
inline.318b50c57b4eba3d437b.bundle.js
main.d83bd9b8af8c676f706b.bundle.js
and etc
查看index.html我们可以看到以下内容：
<body>
...
<script type="text/javascript" src="inline.318b50c57b4eba3d437b.bundle.js"></script>
<script type="text/javascript" src="polyfills.5a5809ec73e38d8a32d3.bundle.js"></script>
<script type="text/javascript" src="scripts.7b67fa96a25429619fd6.bundle.js"></script>
<script type="text/javascript" src="main.d83bd9b8af8c676f706b.bundle.js"></script>
</body>
我想以某种方式更改构建命令，也许有一个我没有看到的标志或任何其他方法来生成具有不同路径的 javascript 文件的 index.html ，如下所示：
<body>
...
<script type="text/javascript" src="PathBefore/inline.318b50c57b4eba3d437b.bundle.js"></script>
<script type="text/javascript" src="PathBefore/polyfills.5a5809ec73e38d8a32d3.bundle.js"></script>
<script type="text/javascript" src="PathBefore/scripts.7b67fa96a25429619fd6.bundle.js"></script>
<script type="text/javascript" src="PathBefore/main.d83bd9b8af8c676f706b.bundle.js"></script>
</body>
推荐指数
解决办法
查看次数
object 对象不是 PostCSS 插件 - 构建 nrwl 库项目时出错
我们有一个nrwl-nx工作空间库项目（在 Angular 8 上），在该项目下有 3-4 个Angular库。它的 ng 服务工作正常，ng build my-lib过去也能工作。
然而，在我们的构建代理上，最近我们开始出现以下错误。
C:\pathToProject> my-workspace build:my-lib C:\pathToProject
C:\pathToProject> ng build --project my-lib构建 Angular 包
构建入口点“@my-scope/my-lib”
渲染样式表构建错误
[object Object] 不是 PostCSS 插件
错误：[object Object] 不是
Processor.normalize 处的 PostCSS 插件 (C:\pathToProject\node_modules\ng-packagr\node_modules\postcss\lib\processor.js:145: 15)
在新处理器 (C:\pathToProject\node_modules\ng-packagr\node_modules\postcss\lib\processor.js:51:25) 在 postcss
(C:\pathToProject\node_modules\ng-packagr\node_modules\postcss\lib) \postcss.js:73:10)
在 createPostCssProcessor (C:\pathToProject\node_modules\ng-packagr\lib\ng-v5\entry-point\resources\stylesheet.transform.js:73:12) 在
对象处。(C:\pathToProject\node_modules\ng-packagr\lib\ng-v5\entry-point\resources\stylesheet.transform.js:36:30)
在 Generator.next ()
位于 C:\pathToProject\node_modules\ng- packagr\lib\ng-v5\entry-point\resources\stylesheet.transform.js:7:71
at new Promise ()
at __awaiter (C:\pathToProject\node_modules\ng-packagr\lib\ng-v5\entry-点\资源\stylesheet.transform.js:3:12)
相同的命令在其他机器上运行良好，直到我们清除缓存，重新安装相同的nodejs版本并执行 ng build lib-project 来排除故障。Nodejs v10.16.0、npm v6.9.0。
我尝试过 …
推荐指数
解决办法
查看次数
如何压缩 Angular 11 应用程序 prod 文件
我正在开发一个应用程序，我已经部署了我的应用程序，现在我面临的问题是我的一些产品文件花费了太多时间加载，这里是我的网络选项卡的屏幕截图。我在制作 prod 构建时也尝试过 --aot 和优化器命令 如何克服这个问题？
推荐指数
解决办法
查看次数
在部署时运行 ng build 后，角度路由不起作用
不知道我在这里做错了什么，我对 Angular 相当陌生，并且在路由方面有些摸索。
我正在运行 Angular 12.2.0 并在本地主机上设置了路由。我现在只是在两个页面之间导航，看看它是如何工作的，它在本地工作得很好。
例如，在 localhost 上，我可以从根 http://localhost:4200/ 浏览到 http://localhost:4200/locations，效果很好。
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'locations', component: LocationsComponent}
];
当我运行ng build构建项目时，它运行良好，我可以正常打开index.html
我不能做的是不再在路线之间导航
dist/angular-app/index.html当我单击要链接到的位置链接时启动构建，该dist/angular-app/index.html/locations链接是空白的，即使我将 URL 更改为dist/angular-app/locations也是空白的
有人指出我为什么这样做的正确方向吗？
非常感谢
附上我的 angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-app": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": { …推荐指数
解决办法
查看次数
Angular 服务工作，Angular 构建不更新文件
我正在运行一个带有 Angular 前端和 Django 后端的项目。今天，当我更改模板中的一些代码时，ng build 没有更新。我发现它既不更新模板更改也不更新组件更改。但是，当我运行 ng serve 并转到 127.0.0.1:4200 而不是 Django 端口 8000 时，会呈现新的更新版本。
我设置它的方式是我有一个模板，Django 指向 TemplateViev ：
{% load static %}
{% csrf_token %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularWebapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
{% block javascript %}
<script type="text/javascript" src="{% static 'runtime.js' %}"></script><script type="text/javascript" src="{% static 'polyfills.js' %}"></script><script type="text/javascript" src="{% static 'styles.js' %}"></script><script type="text/javascript" src="{% static 'vendor.js' %}"></script><script type="text/javascript" src="{% …推荐指数
解决办法
查看次数
Angular - 无法解析组件 ng build --prod 的所有参数
我试图构建我的 angular 应用程序，但由于此错误而失败
ERROR in : Can't resolve all parameters for SimpleLookupAddEditFormComponent
in C:/Users/lastr/Source/Repos/SMATA/Code/ng/smata-ng/src/app/system-
list/simple-lookup-add-edit/simple-lookup-add-edit.component.ts: (?, [object
Object], [object Object], [object Object]).
这是组件的代码。这是一个基础组件。这里有什么遗漏吗？也许构造函数属性有问题？
import { Component, OnInit } from '@angular/core';
import { SimpleLookupBaseService } from '../services/simple-lookup-base/simple-lookup-base.service';
import { ActivatedRoute, Router } from '@angular/router';
import validationEngine from "devextreme/ui/validation_engine";
import notify from 'devextreme/ui/notify';
@Component({
selector: 'app-simple-lookup-add-edit',
templateUrl: './simple-lookup-add-edit.component.html',
styleUrls: ['./simple-lookup-add-edit.component.css']
})
export class SimpleLookupAddEditFormComponent implements OnInit {
newSystemList: {};
isEditMode:boolean = true;
selectedSystemList: any;
title: string;
saveButtonText: string;
isPopupVisible:boolean = false;
entityId:any; …推荐指数
解决办法
查看次数
未找到 Angular 7 prod build i18n 文件
我正在尝试部署一个 Angular 7 应用程序，该应用程序使用 ngx-translate 和 /dist/assets 文件夹中的翻译语言文件。我在 build.gradle 中指定了正确的 base href。部署后，我看到所有内容都加载了，除了返回错误代码 404（未找到）的语言文件。
我试过以几种不同的方式更改 angular.json 文件。我尝试更改 TranslateHttpLoader。似乎没有任何工作。我可以在 /dist 文件夹中看到包含所有语言文件的 i18n 文件夹。然而，它没有被引用。
在 app.module.ts
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}
在 angular.json 中
"assets": [
"src/favicon.ico",
"src/assets"
],
但我最终在浏览器中收到此错误：
/assets/i18n/en.json 404 未找到
任何帮助，将不胜感激！
推荐指数
解决办法
查看次数
ng build：无法加载工作区配置文件
当我运行 ng build 命令时，我收到以下错误，
发生未处理的异常：无法加载工作区配置文件：C:...\angular\angular.json 无效的 JSON 字符：“？” 在 0:0。有关更多详细信息，请参阅“C:\Users...\AppData\Local\Temp\ng-I8pYWt\angular-errors.log”。
我试过 npm cache clean --force 然后 npm install 或 yarn
角度errors.log
[error] Error: Workspace config file cannot be loaded: C:\...\angular\angular.json
Invalid JSON character: "?" at 0:0.
at Object.getWorkspace (C:\...\angular\node_modules\@angular\cli\utilities\config.js:59:15)
at BuildCommand.validateScope (C:\...\angular\node_modules\@angular\cli\models\command.js:97:60)
at BuildCommand.validateAndRun (C:\...\angular\node_modules\@angular\cli\models\command.js:122:24)
at Object.runCommand (C:\...\angular\node_modules\@angular\cli\models\command-runner.js:186:38)
at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:52:5)
at Function.Module.runMain (internal/modules/cjs/loader.js:880:11)
at internal/main/run_main_module.js:21:11
版本
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.800.6
@angular-devkit/build-angular 0.800.6
@angular-devkit/build-optimizer 0.800.6
@angular-devkit/build-webpack 0.800.6
@angular-devkit/core 8.3.9
@angular-devkit/schematics 8.3.9
@angular/cdk 8.2.3
@angular/cli 8.3.9
@ngtools/webpack 8.0.6 …推荐指数
解决办法
查看次数
Angular 生产版本无法加载 - 由于不允许的 MIME 类型（“text/html”），加载模块被阻止
我运行 ng build --configuration=production 构建了我的应用程序并将其上传（通过 FTP 手动）到服务器（我尝试了两个不同的）。访问像 myurl.com 这样的根目录工作正常，但每当我想直接访问子页面（例如 myurl.com/subpage）时，页面都是空白的，并且出现以下错误：\nLoading module from \xe2\x80\x9chttps://myurl.com/runtime-es2015.js\xe2\x80\x9d was blocked because of a disallowed MIME type (\xe2\x80\x9ctext/html\xe2\x80\x9d).对于 polyfills-es2015 也出现同样的错误。 js, main-es2015.js
如果我访问根目录并导航到子页面，一切正常。
\n\n直到现在我尝试：
\n\n- \n
<base href=".">在index.html中设置 \n"target": "es5"在 tsconfig.json 中设置 \n手动将脚本类型从 更改
type="module"为type="text/javascript"\n，如下所示：<script src="runtime-es2015.js" type="text/javascript">\n
Angular CLI 和 Angular 版本8.1
打字稿版本3.4.5
网页包版本4.35.2
在服务器上，我还有一个需要的 .htaccess 文件，否则访问 myurl.com/subpage 会导致 404
\n\n<IfModule mod_rewrite.c>\nRewriteEngine On\nRewriteBase /\nRewriteRule ^index\\.html$ …推荐指数
解决办法
查看次数