新建Angular项目报Cannot read 'configurator'错误且路由失效求解决

安全阿岳

2026-9-30

问题原因与解决方案

1 未询问样式预处理器的说明

你执行创建命令时添加了--defaults参数，该参数的作用就是跳过所有交互式配置提问，直接使用Angular CLI的默认配置（样式默认采用CSS），这属于预期正常行为，不是异常问题。

2 configurator报错修复

testerMaker.js不属于Angular官方项目的内置依赖文件，是浏览器扩展程序主动注入到页面的第三方脚本，该报错和你的Angular项目本身没有关联。
修复步骤：

打开浏览器无痕模式访问项目页面，或者临时禁用所有浏览器扩展后再访问，确认报错是否消失
若报错消失，逐个启用扩展定位到触发报错的扩展，禁用或卸载对应扩展即可彻底解决。

3 路由失效修复

使用--routing参数创建的Angular项目会默认生成路由模块，但默认未配置任何路由规则，且app.component.html的默认模板内容会覆盖路由渲染的内容，所以会出现所有路径都仅显示首页内容的问题，按以下步骤修复：

打开src/app/app.component.html，删除所有默认生成的模板代码，仅保留<router-outlet></router-outlet>标签，该标签是路由内容的渲染出口
打开src/app/app-routing.module.ts，按需配置对应的路由规则，示例如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你自己的页面组件
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // 根路径对应首页
  { path: 'about', component: AboutComponent }, // 自定义子路径
  { path: '**', redirectTo: '' } // 未匹配路径跳转到首页
];

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