Angular 17 在开发环境中不接受带点 (.) 的路径，它只会直接抛出 404 错误
导出常量路由：Routes = [ { 路径：'foo.bar'，组件：ListComponent }， { 路径：'foobar'，组件：ListComponent }， example.com/foobar 运行良好，example.com/foo.bar 返回 40...
我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气 这是 HTML 我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气 这是html <p-tabView> <p-tabPanel header="Weather Data" routerLink="/weather-data"> <app-weather-data></app-weather-data> </p-tabPanel> <p-tabPanel header="Chart"> <app-chart></app-chart> </p-tabPanel> <p-tabPanel header="Heat index calculator" closable="true"> <app-heat-index></app-heat-index> </p-tabPanel> </p-tabView> 这是 module.ts import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'weather-data', component: WeatherDataComponent }, { path: 'chart', component: ChartComponent }, { path: 'heat-index', component: HeatIndexComponent }, ]; @NgModule({ declarations: [ AppComponent, WeatherDataComponent, ChartComponent, HeatIndexComponent, ], imports: [ BrowserModule, TabViewModule, ButtonModule, ChartModule, TableModule, HttpClientModule, InputNumberModule, FormsModule, SelectButtonModule, DropdownModule, BrowserAnimationsModule, FontAwesomeModule, InputSwitchModule, PaginatorModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), ], providers: [DatePipe], bootstrap: [AppComponent], }) export class AppModule {} 我找不到有关 tabView 组件的任何有关如何实现路由的文档，感谢任何帮助 我按以下方式使用了 TabMenu 组件。 <p-tabMenu [model]="items"> </p-tabMenu> <router-outlet></router-outlet> MenuItem 类型有一个命令属性，在命令上您可以实现自定义操作，在您的情况下可以是路由。 this.items = [ { label: "Map", icon: "pi pi-fw pi-map", command: () => { this.router.navigate(["./map"]) }, }, ];
}> } /> <SideBar /> <Routes> <Route path='/' element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route path='/service' element={<Service />} /> </Route> </Routes> <Article /> </div> 我不想在服务组件中渲染文章组件。我怎么做？请帮助我。 Article组件无条件在路由内容下渲染。 <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Article /> // <-- always rendered! </div> 简单的解决方案就是从 JSX 中删除 Article： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> {/* <Article /> removed */} </div> 但这可能不是您真正想要的。另一种选择是有条件地在路线上渲染它。 示例： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Route path='article' element={<Article /> } /> // <-- only on "/article" path </div>
从 Angular 16 转换为 Angular 17 后缺少 SSR 支持
我已将我的项目从 Angular 16 升级到 Angular 17。但是，我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后，Angular 是否提供 SSR 支持...
有没有一种方法可以在React中单击时嵌入链接来重定向组件？
我有一个导航栏，其路线设置如下： 导入'../styles/Nav.css' 从 'react-router-dom' 导入 { BrowserRouter as Router, Routes, Route, Link} 从 '../components/Home' 导入 { Home }
我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？ 首页.html 进入React页面 应用程序.js 我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？ home.html <button>go to React page</button> 应用程序.js <BrowserRouter> <Routes> <Route path="/mypage" element={<Mypage />}> </Routes> </BrowserRouter> 我想点击“转到React页面”按钮，我可以导航到"/mypage"？ 该按钮应实现对 "/mypage" URL 的导航操作，该 URL 最好为您的 React 应用程序提供服务。 home.html 更新按钮以包含重定向到子路线的点击处理程序 <button onclick="navigateToReactApp()">go to React page</button> const navigateToReactApp = () => { window.location.href = "/mypage"; // check the path correctness }; 或者使用锚标记，这在语义上可能更正确。 <a href="/mypage">go to React page</a> App.js 通过设置 "/mypage" 属性，更新路由器以使所有路由/链接/等从托管/服务应用程序的 basename relative 工作。 <BrowserRouter basename="/mypage"> <Routes> <Route path="/" element={<Mypage />}> </Routes> </BrowserRouter>
如何在 svelteKit api 目录中创建 catch-all 路由？
我正在 sveltekit 中创建 API 端点。所有 API 端点都位于 /src/routes/api/DIR 内。 如何为任何不存在的 GET、POST、DELETE 和 PUT 请求创建主捕获所有路由？
反应问题，当我将标头组件添加到我的主页组件时，没有任何内容加载
从“react”导入React； 从 '@chakra-ui/react' 导入 { ChakraProvider, CSSReset }; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Routes }; 从 './nav' 导入导航； 导入首页
Angular CLI 版本与 Angular Core 版本之间的兼容性？
有什么方法可以知道要安装哪个与我的 Angular Core 版本兼容的 Angular CLI 版本？他们完全独立吗？ 使用 Core v5.2.8 开发现有的 Angular 应用程序...
安装 Angular CLI 时出现 Npm Angular 警告
当我尝试通过以下方式安装 CLI 时收到 npm 警告： npm install -g @angular/cli: C:\Users\myuser>npm install -g @angular/[email protected] npm 警告已弃用 [email protected]：此模块...
我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗？ 提前致谢 我使用 npm i ng-
Angular Material v17：缺少“MatFormFieldAppearance”中的“遗产”
在 Angular Material v14 中，MatFormFieldAppearance 提供了传统、标准、填充和轮廓值。 类型 MatFormFieldAppearance = '旧版' | '标准' | '填充' | '大纲'; 然而，在 Angular
由于某种原因，自从从 Angular 13 升级到 Angular 15 后，当我输入： ng g c 某些组件 Angular 复制组件，创建重复文件。这种情况 100% 都会发生。第二次...
我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此，我通常创建这样的 Angular 服务： 导入 { 管理组件 }
angular-2-dropdown-multiselect - 自定义宽度 100%
我正在实现这个 angular-2-dropdown-multiselect 组件： https://www.npmjs.com/package/angular-2-dropdown-multiselect 该组件工作正常，但我需要将其设置为适合续...
我的 Angular 项目有问题。我有一个项目结构：应用程序结构。在我的 app.module.ts 中，代码如下： 从'@angular/core'导入{NgModule}； 从'@
Angular 项目不适用于@babylonjs/viewer
我在全球安装了@Angular/[email protected]。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个 Angular 项目。 CD 到文件夹“Babyl...
使用模块联盟进行 Angular 升级 - “集合没有原理图。”
我正在将一组 Angular 应用程序从 v12 升级到 v16，它们使用模块联合和 Angular Architects 的模块联合插件。 成功升级每个应用程序的 Angular 版本后...
Node Sass 版本 9.0.0 与 ^4.0.0 不兼容
我的应用程序中没有安装node-sass或sass包。但我一直收到这个错误 ./src/scss/styles.scss 中的错误（./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plu...
我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时
登录后，使用 angular-oauth2-oidc 时，hasValidAccessToken 始终为 true
我已经使用 Angular 12.2 实现了 angular-oauth-oidc （版本 12.1.0）。我使用 Keycloak 作为 SSO 登录没有问题，但我在库中遇到了奇怪的行为。 每次，之后...
通过Angular到Springboot访问POST失败但GET成功，Postman适用于GET和POST
我正在使用示例 Angular 应用程序来测试 Okta 与 springboot 应用程序的集成。 前端示例：https://github.com/okta-samples/okta-angular-sample 我有一个带有
当我尝试在 Angular 17 应用程序中添加软件包时，它无法安装该软件包。它总是显示下面给出的错误。 ng 添加@angular/fire 跳过安装：软件包已安装 更新
类型“string”无法分配给类型“FormGroup<any>”Angular 14 错误
我是一名初学者 Angular 开发人员，我正在使用本教程构建一个 todoList 应用程序 -> https://www.youtube.com/watch?v=WTn2nVphSl8 它是使用 Angular 13 完成的。我遇到错误的是我...
Angular 在其文档中声明，它与所有主要浏览器的 2 个最新版本（以及 Firefox 的最新+ESR）兼容。由于 Angular 在底层使用标准 DOM API，因此它应该...
为什么 Angular 2 或 Angular 4 使用香蕉括号？有什么具体原因吗？为什么它们不遵循与 Angular 1 相同的模式？
我知道，它与任何编码无关，但它们可以遵循与 AngularJS 中相同的语法 有角度...
Angular Material 17 独立组件中没有 DateAdapter 的提供者
我有一个带有 Angular 17 应用程序的 nx 项目，并尝试使用带有材料 17.0.4 的 Angular 材料日期选择器。但我明白了 NullInjectorError：没有 DateAdapter 的提供者！ 错误。组件...
应用程序无法识别手势，例如在 Angular 11 中使用 Hammer.JS 进行平移
我无法在使用 Hammer.JS 的 Angular 应用程序中识别任何手势，例如滑动、平移。它的设置是这样的： 包.json： “@角度/核心”：“11.0.5”， “@Angular/platform-br...
我按照这个例子来实现角度材料表。 https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts 在这里，我使用...
我创建了这个名为country-flag-dropdown.ts和html的组件 成分： 从“@angular/core”导入{Component、OnInit、Input、Output、EventEmitter}； 导入 {FormGroup, FormControl} ...
我是最近的 Angular 用户，我有一个 Angular 17 项目，带有传单地图。 当我尝试构建该项目时，传单地图的 3 个图像（标记图标和图层）出现 3 个错误： 是否...
全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目（“ng new Default”），没有文件更改。 “ngserve”没有错误，但浏览器控制台显示： main.ts:5 错误
为什么我的应用程序根目录在 Angular 中不是 100% 高度？
这是我的第一个 Angular 项目，我对 Web 开发还很陌生。我正在使用 Angular 17.0.9。 我希望我的应用程序为 100%，但应用程序根标签始终是可能的最小高度 当你...
如何配置 Angular 17 开发服务器将 HTTP 重定向到 HTTPS？
我已将 Angular 开发服务器配置为成功使用带有 SSL 的 HTTPS： “端口”：4200， “ssl”：正确， "sslKey": "./tools/.ssl/localhost+2-key.pem", “SSL...
我已将 Angular 版本 8、9、10 升级到 16。收到此错误 NG8001：“mat-icon”不是已知元素
我已将 Angular 版本 8、9、10 升级到 16。在 Angular 16 版本上面临以下问题。我已经导入了模块文件中的所有材质模块。然后它也会给出错误。
我创建了一个“自定义”主题（使用 https://material.angular.io/guide/theming 上的主题文档，这非常糟糕），如下所示： @import '~@angular/material/theming'; @包括 mat-cor...
在 Sveltekit/Typescript 中使用 pdfjs
我需要在 sveltekit 4 typescript 项目中使用 pdfjs （当前 4.1.392）进行文本提取。这就是我尝试将 pdfjs 导入到我的 src/routes/+page.svelte 中的方法： ...</desc> <question vote="0"> <p>我需要在 sveltekit 4 typescript 项目中使用 pdfjs（当前版本 4.1.392）进行文本提取。这就是我尝试将 pdfjs 导入到我的 src/routes/+page.svelte 中的方法：</p> <pre><code><script lang="ts"> import * as pdfjs from 'pdfjs-dist/build/pdf'; import pdfjsWorker from 'pdfjs-dist/build/pdf.worker'; pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; </script> </code></pre> <p>但是，我收到错误消息“无效的'workerSrc'类型”。</p> <p>如何在 sveltekit/typescript 中使用 pdfjs？</p> </question> <answer tick="false" vote="0"> <p>你可以尝试做这样的事情：</p> <pre><code>import * as pdfjs from "pdfjs-dist"; pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.mjs", import.meta.url); </code></pre> <p>更多使用示例，可以访问PDF.js Github仓库： <a href="https://github.com/mozilla/pdf.js#online-demo" rel="nofollow noreferrer">https://github.com/mozilla/pdf.js#online-demo</a></p> </answer> <answer tick="true" vote="0"> <p>以下代码适用于 pdfjs-dist 4.2.67、svelte 4.2.15 和 typescript 5.4.5：</p> <pre><code><script lang="ts"> // @ts-nocheck import * as pdfjs from 'pdfjs-dist'; import * as pdfWorker from 'pdfjs-dist/build/pdf.worker.mjs'; pdfjs.GlobalWorkerOptions.workerSrc = import.meta.url + 'pdfjs-dist/build/pdf.worker.mjs'; </script> </code></pre> </answer> </body></html>
Angular 17：fileReplacements 不替换文件
我有一个 C#/Angular 17 SPA 项目，在具有多个部署槽的 Azure 应用服务上的 Docker 容器中运行。基本上，生产槽加载标记为“latest-prod”的图像......
我有两个组件：主页组件和产品列表组件。 这是我的 home.component.ts： 从 '@angular/core' 导入 { Component } ； 从“@angular/core”导入{NgModule}； 导入{产品...
Angular 12：Firebase 模块未正确提供（？）
第一次使用Firebase，所以我不知道发生了什么。我没有修改使用 ng add @angular/fire 获得的配置，所以我的 AppModule 中的内容是： @NgModule({ 声明：[
在 Angular 应用程序中调整画布元素大小时如何解决闪烁问题
我有一个带有画布的 Angular 组件，如下所示： 在 .ts 文件中，我设置了一个变量来访问...
如何将 swiper 11.0.5 元素与 Angular 17 一起使用
在 Angular 17 中，一切都是独立组件，并且没有 app.module.ts 文件。那么，我们把这段代码放在哪里， 从“swiper/element”导入{register}； 登记（）; 我正在...
我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢你！ 应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢！ app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置，但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗？ app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。
我目前正在开发 Angular 前端。 我想使用由我正在合作的团队创建的组件，该组件用于在表单中创建输入文本。 该组件的 .html...
当element在element上使用迭代变量时如何重构ngFor？
我有这个 {{ dt }} 我想重构为 Angular v17
我在 Angular 项目中面临一个问题，其中选项表单中有多个复选框。问题是有时复选框中的更改无法正确反映。这是相关内容...
在 Angular 中，位置是“应用程序可以用来与浏览器 URL 交互的服务”。 它提供了一个 getState() 方法，该方法提供“位置历史记录的当前状态&
选中/取消选中 mat-checkbox 未正确返回 true 或 false
我正在使用 Angular 15 和 Angular Material 14，下面是我用来显示复选框列表的 HTML 代码 我正在 Angular 15 和 Angular Material 14 工作，下面是我用来显示复选框列表的 HTML 代码 <div *ngFor="let control of checkboxArray.controls;let i = index" > <mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> 下面是Angular中onCheckedChange函数的代码 onCheckedChange(index: number) { this.sortCheckboxArray(); const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value) { this.lists.push(checkboxItem.id.toString()); } else { this.lists.pop(checkboxItem.id.toString()); } } this.updateSubscriberGroupsCount(); this.cdr.detectChanges(); } 当我选中复选框时，在这个 onCheckedChange 函数中，control.value 始终返回 false。哪里出了问题？无法理解.. 这是一个工作版本，复选框逻辑工作正常，希望有帮助！ 我们需要使用control.value获取表单组，但我们还需要访问内部表单控件，然后获取复选框值！ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatCheckboxModule } from '@angular/material/checkbox'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule], template: ` <form [formGroup]="form"> <div formArrayName="array"> <div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i"> <mat-checkbox formControlName="test" style="margin-bottom: 15px;" (change)="onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> </div> </form> `, }) export class App { name = 'Angular'; form = new FormGroup({ array: new FormArray([]), }); lists = []; checkboxItems: any = []; ngOnInit() { this.add(); this.add(); this.add(); } add() { this.checkboxArray.push( new FormGroup({ test: new FormControl(false), }) ); this.checkboxItems.push({ name: 'test' }); } get checkboxArray() { return this.form.get('array') as FormArray; } onCheckedChange(index: number) { // this.sortCheckboxArray(); // const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value.test) { console.log('checked'); // this.lists.push(checkboxItem.id.toString()); } else { console.log('not checked'); // this.lists.pop(checkboxItem.id.toString()); } } // this.updateSubscriberGroupsCount(); // this.cdr.detectChanges(); } } bootstrapApplication(App); 堆栈闪电战
在 Angular 中更新信号的嵌套属性时如何中断对象引用？
我有一个 Customer 对象，包装在 Angular 的信号中，如下所示： mCustomer: Signal = signal(new Customer(id: 1, ...)); 该信号是通过使用 ngRx Sig 的服务提供的...
Angular：如何相对于 RouteGuard 中的目标路由调用 router.navigate() ？
我有一个使用 Angular 4 开发的现有项目。我需要根据用户权限控制对特定路由的访问。简化的路由配置如下所示： [ { 路径：''，