开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

其中一个Angular路由在Angular Prod Build中不起作用

Angular路由在Angular Prod Build中不起作用可能是由于以下原因之一：

未正确配置路由模块：在Angular中，路由模块负责管理应用程序的导航。如果路由模块未正确配置或未加载，路由将无法正常工作。确保在应用程序的主模块中正确导入和配置路由模块，并在应用程序的根组件中添加<router-outlet>标记。
路由路径错误：检查路由路径是否正确。路由路径应与定义的路由路径匹配，否则路由将无法匹配到正确的组件。确保在路由模块中定义的路径与应用程序中导航到的路径一致。
缺少路由导航链接：如果没有提供正确的路由导航链接，路由将无法触发。确保在应用程序的模板中使用正确的路由导航链接，例如使用<a routerLink="/path">导航到指定路径。
缺少路由守卫：路由守卫用于在导航到特定路由之前执行一些操作，例如身份验证或权限检查。如果缺少必要的路由守卫，路由可能无法正常工作。确保在需要保护的路由上添加适当的路由守卫。
依赖项版本不兼容：某些情况下，依赖项的版本不兼容可能导致路由不起作用。确保使用的Angular版本与其他依赖项的版本兼容，并尝试更新相关依赖项的版本。

如果以上解决方法都无效，建议查阅Angular官方文档或向开发社区寻求帮助以获取更详细的解决方案。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

相关搜索:Angular 8 ng build --prod在'Injectable‘的模板编译过程中出现错误 angular http请求在使用ng build --prod构建时从不返回数据 Angular ngOnInit在路由共享组件上不起作用 Angular universal build baseHref change打破应用程序中的angular路由 Angular无法识别ng build --prod上的keyvalue管道中的项 Angular材质在Angular 9中不起作用 Angular材质在angular版本9中不起作用 Angular路径在Angular 12中不起作用 Angular路由在www目录上不起作用 ng build --prod没有反映angular 8中的新变化

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

angular2中在使用路由懒加载时候出现的错误

ERROR in Cannot use 'in' operator to search for 'providers' in null 出现这个问题的原因是，在使用懒加载的时候，没有指定module，

5.1K4 0

Angular CLI 简介

综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以在项目生成以后通过修改angular-cli.json文件来做修改....再生成一个module, 并且带着路由module (可以先使用-d参数查看将要生成的文件): ng g m admin --routing 在admin module里面, 再创建一个admin component...首先修改上一个例子中的代码: 执行ng build: 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: 可以看到它引用了生成的5个js文件....build --prod ng build --prod -e=prod ng build --target=production --environment=prod 其它常用的参数还有: --sourcemap...在内存中serve 生产模式build的文件试试 --prod: ng serve --prod 通过文件大小可以看出确实是prod build的. ng eject.

6K11 0

Angular CLI 使用教程指南参考

> [options] 创建一个新的 Angular 项目,默认在当前所在目录下参数描述 --dry-run -d 只输出要创建的文件和执行的操作，实际上并没有创建项目 --verbose -v...ng serve 将会自动在浏览器中打开默认地址 http://localhost:4200/.... 在浏览器中打开Angular文档并搜索当前关键字 ng e2e 命令描述 ng e2e 使用protractor在当前应用中运行e2e测试 ng format 命令描述 ng...这也使ng set可以在项目之外工作。 ng build 构建工件将存储在/dist目录中。...# 这是生产构建 ng build --target=production --environment=prod ng build --prod --env=prod ng build --prod

3K5 0

Angular2 ：从 beta 到 release4.0 版本升级总结

解决办法：在app根组件声明provider注入ResultHandler服务，则整个app使用同一个实例。 3....运行npm run build --prod命令失败原因：basically the problem is in AOT and Angular analyzer....解决办法：1) -prod => --prod --aot=false 2) -prod => --env=prod（可查看ng build -prod Module not found: Error:...在webstorm里，更改文件不能在浏览器中更新输出。原因：webstorm里面默认启用”safe write”，将保存先存到临时文件。...原因：angular(v4.1.1)中，使用ActivatedRoute的API获取路由信息。

8.1K0 0

Angular CLI 常用终端操作命令

CLI常用命令 ---- ng new project-name - 创建一个新项目，置为默认设置 ng build - 构建/编译应用 ng test - 运行单元测试 ng e2e - 运行端到端（...---- CLI以多种方式支持路由：初始化创建项目时，自动添加了 @angular/router ，自动添加到package.json 文件中生成模块路由的时候可以使用指令...文件名的路由模块 ng g module my-module --routing 该文件包括一个空Routes对象，您可以填充不同组件和/或模块的路由。...--environment=dev--environment=prod 可以在 angular-cli.json 该文件中配置映射编译环境路径 //angular-cli.json...ng build --environment=loca ng build --environment=prod 关于代理服务器 ---- 在webpack的dev服务器中使用代理支持，我们可以高速缓存某些

2.1K4 0

玩转 Angular 环境变量

对于 “程序猿” 来说，在日常开发过程中，我们经常要与不同的开发环境打交道。在实际的项目的开发过程中，一般至少会有两个环境：开发环境和线上环境，这是很简单的情形。...作为一个 Angular 的忠实粉丝，我们来介绍一下在 Angular 项目开发中，如何玩转 Angular 环境变量。...通过上面的注释，我们知道在执行 ng build ---prod 命令，进行项目构建的时候，会执行文件替换操作。...而相应的文件替换规则，在 angular.json 文件中定义： "architect": { "build": { "builder": "@angular-devkit...： $ ng build --configuration=test 上述命令成功运行之后，就会在根目录下生成 dist 目录，并且在该目录下也会创建一个 PROJECT-NAME 目录。

3.2K2 0

Angular开发实践（六）：服务端渲染

renderModuleFactory 函数接受一个模板 HTML 页面（通常是 index.html）、一个包含组件的 Angular 模块和一个用于决定该显示哪些组件的路由作为输入。...该路由从客户端的请求中传给服务器。每次请求都会给出所请求路由的一个适当的视图。...renderModuleFactory 在模板中的标记中渲染出哪个视图，并为客户端创建一个完成的 HTML 页面。最后，服务器就会把渲染好的页面返回给客户端。...在实践中，你可能要使用一个着陆页的静态版本来保持用户的注意力。同时，你也会在幕后加载完整的 Angular 应用。...": "ng build --prod && ng build --prod --app 1 --output-hashing=false", "build:prerender": "npm

4.7K10 0

Angular-内存溢出的问题

）文件过多； 2）订阅数据没有销毁占用内存，（看了下订阅的数据很少，应该不是的）； 3）因为所有的组件都在一个根目录下（上面说了，用的动态组件没用路由），导致需要编译的组件过多？...暂时还不清楚只能先用设置内存上限的方法来解决，有大神的话望不吝指教；还有一个问题就是用动态组件的方式，组件都在根目录下，会导致首次加载的时间过长。...": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build-prod": ".../node_modules/@angular/cli/bin/ng build --prod --build--optimizer --base-href /pms/" }, "private".../build-angular": "^0.8.9", "@angular/cli": "^6.2.7", "@angular/compiler-cli": "^6.1.0", "

2.3K2 0

docker学习系列19 容器化Angular项目

该目录是在docker build构建阶段创建的，在Run启动阶段需要手动挂载该目录。...--watch=false ng e2e docker-compose stop 生产环境创建一个生产环境用的Docker配置文件，Dockerfile-prod #################...打包镜像-f表示指定文件，docker build -f Dockerfile-prod -t angular-demo-prod ....运行 docker run -it -p 80:80 --rm angular-demo-prod 对应的docker-compose-prod.yml version: '3.5' services...: angular-demo-prod: container_name: something-clever-prod build: context: .

1.6K6 0

Angular CLI 升级 6.0 之后遇到的问题

Angular CLI 1.7.4 在使用 ng build --prod 会构建失败，而 ng build 是正常的。...比较好的解决办法是使用 ng build --prod --extract-license=false 或者 ng build --prod --no-extract-license。...最近将 Angular CLI 升级到 6.X 之后，直接 ng build 会报以下错误，ng serve 也是如此。...\angular-test\node_modules\_@angular_common@6.0.2@@angular\package.json' at Object.fs.openSync (fs.js...但是使用 ng build --prod 是正常的。同样地，使用 ng build --extract-license=false 也可以解决问题。

1.4K2 0

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

或者，您可能已经在所有那些华丽的AngularJS演示中看到了它，您可以在其中输入要输入的值并为我们更新页面内容。这里有一个有趣的小技巧：在Angular中，双向数据绑定已经不再适合我们了。...使用表单在Angular中使用表单有两种方法 - 一种是模板驱动的，我们已经在使用其中最有价值的部分：ngModel用于双向绑定。但是Angular的形式不仅仅关于模型的价值，也关系到有效性。...如果不起作用，我们的行动中哪里会派遣？...首先，我们为RouterLinkActive添加了路由器指令，该指令在我们的路由处于活动状态时设置一个类，以及为我们替换的routerLinkhref。...我们在这里也看到了新的语法loadChildren，当我们询问路由时，路由器会告诉路由器CardsModule在./cards.module文件中的延迟加载cards。我们在新.

42.5K1 0

使用Angular CLI生成 Angular 5项目

scripts下面是一些预定义的项目命令: start 是运行项目的意思, 执行npm start即可, 或者直接执行ng serve也可以. npm build / ng build 是执行构建......但是对已经生成的components/directives就不起作用了. 那么如何保证生成的项目的components/directives前缀是您想要的呢?...查看angular-cli.json, 可以在文件的下方看到采用的是scss样式文件: ? 这样, 以后生成的component的默认样式文件就是scss了....如果想手动为项目配置路由的话, 还是需要一些步骤的, 所以可以使用这个参数直接生成带路由配置的项目. 看一下项目路由文件: ? 再查看一下app.module: ?...综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以在项目生成以后通过修改angular-cli.json文件来做修改.

1.9K3 0

使用Angular CLI进行Build (构建) 和 Serve

和第三方库可以使用source-map-explorer来分析依赖, 并且查看哪些模块和类在bundle里面....首先修改上一个例子中的代码: ? 执行ng build: ? ? 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: ? 可以看到它引用了生成的5个js文件....可以看到在ng serve的时候, 加载了上述的文件. 因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的. 这时看一下文件目录, 并没有dist目录: ?...在内存中serve 生产模式build的文件试试 --prod: ng serve --prod ?...通过文件大小可以看出确实是prod build的. ng eject. 为项目生成webpack配置和脚本. 执行该命令试试: ? 看看有哪些变化: .angular-cli.json: ?

2.3K7 0

angular打包报错内存溢出 nodejs 执行失败报错 “JavaScript heap out of memory” 的解决办法

/node_modules/@angular/cli/bin/ng serve", "prod": "node --max_old_space_size=8000 ..../node_modules/@angular/cli/bin/ng build --prod", } } 解决办法二：项目构建流程关闭 sourcemap 生成以 Angular 为例，对于越来越庞大的...Angular 项目，Angular 编译时间、内存消耗也越来越长，其中 sourceMap 的生成占据了绝大部分的时间。...在开发过程中可以关闭 sourceMap 的生成，加快编译构建的速度。...方法为在 angular.json中设置 build.options.sourceMap 的值为 false，同时在 tsconfig.json 中设置 compilerOptions.sourceMap

6K2 0

Angular Library 快速入门

文件中添加 sf-lib 项目；在 package.json 文件中添加 ng-packagr 依赖；在 tsconfig.json 文件中添加 sf-lib 库的引用；在项目中的 projects...": { "builder": "@angular-devkit/build-ng-packagr:build", "options": {...： $ ng build --prod sf-lib 小伙伴们，在构建 Library 时，记得始终添加 —prod 标志。...在完成新建 ButtonComponent 组件的导出工作后，我们需要使用下列命令，重新构建 sf-lib 库： $ ng build --prod sf-lib sf-lib 重新构建成功后，我们就可以在模板中使用刚创建的...(private http: HttpClient) {} } 在实际开发中，我们可能需要能够灵活配置 DataService 服务中，请求服务器的地址。

2.4K1 0

Angular 工具篇之分析包的大小

： $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目，在构建的时候，需要添加相关参数，具体如下： $ ng build...--prod --stats-json 当项目构建完成后，在根目录下的 dist 文件夹下会生成一个 stats.json 文件，然后我们可以通过以下的命令来查看 webpack 打包文件大小信息：...在 angular6-example-app 项目中，也为我们提供了相应的 npm script，具体如下： "bundle-report": "ng build --prod --stats-json.../source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js 成功执行上述命令后，在浏览器中你将会看到以下内容： ?...为了方便操作，我们也可以定义一个 npm script 任务来处理上述的工作： "map-explorer": "ng build --prod --source-map && source-map-explorer

2.3K4 0

Angular2学习笔记

前言阴差阳错，当初在选择写网站的时候选择了使用Angular2+RESTfulｌ，现在想起来，这个选择可能有点轻率了。...包括属性绑定、事件绑定、插值绑定以及双向绑定，主要用于组件内的变量在页面中的显示以及页面等。服务。这包括两方面，一个是访问RESTFUL的服务，另一个是用来保存本地变量的。...但是他也有很多的缺点，Angular2文档中列举了下面几点：渲染得更快; 需要的异步请求更少; 需要下载的Angular框架体积更小; 提早检测模板错误; 更安全; 于是，Angular2又提出了一个新的编译方法叫...对于开发环境，可以使用ng serve --prod --aot来进行简单的优化。...不过对于真正的生产环境我们显然不能用node服务器，我这里用的是nginx来部署，具体步骤如下：使用命令ng build --prod --aot来生成dist/文件夹。

2K1 0

手工将项目升级至 Angular 9 记录

手工将项目升级至 Angular 9 记录 Angular 最近发布了 9.0 版本，需要先将一个模板项目升级至新版本。...项目结构采用 angular-cli 创建的的多项目架构， web 是一个应用， app-shared 是类库。...{ "devDependencies": { - "@angular-devkit/build-angular": "~0.803.21", + "@angular-devkit/build-angular...": "~0.900.1", - "@angular-devkit/build-ng-packagr": "~0.803.21", + "@angular-devkit/build-ng-packagr...这个文件是新增加的，也就是意味着可以使用 --prod 选项来编译 Angular 类库项目。

1.8K0 0

使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to...其中的userKey字符串是oidc-client在localStorage默认存放用户信息的key, 这个可以通过oidc-client的配置来更改....设置AuthGuard: angular5的authguard就是里面有个方法, 如果返回true就可以访问这个路由, 否则就不可以访问....您可以单独建立一个简单的页面就像官方文档那样, 然后再跳转到angular5项目里面. 这个页面一闪而过: ? 回到angular5项目后就可以正常访问api了....刷新的时候, 它好像是会在页面上弄一个iframe, 然后在iframe里面操作. 不过还是需要建立一个页面, 用于刷新: <!

5.6K5 0

Angular中，模块加载的几种方法原

一、懒加载通过路由配置： { path: 'flight-booking', loadChildren: '....二、动态（懒）加载参照：angular-elements-dashboard 项目。在anuglar.json中，配置懒加载的模块路径： ?...ng generate library my-lib ng build my-lib --prod cd dist/my-lib npm publish ?...一行代码未写，就构建了一个组件，Angular还是很强大的。我们再加一行代码引用这个myLib模块： ? ? 通过结果，可以看到它们是打包到一个文件中的。...这是由于在Angular中，模块只是逻辑代码隔离的概念，并非是打包文件的隔离！

2.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭