Repository navigation
ng generate app-shell and ng generate module --route produce broken imports when a component type is configured #34449
Description
Command
generate
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
19.x (before the v20 file naming change)
Description
ng generate app-shell and ng generate module <name> --route <path> --module <parent> generate a component and then
reference it with a hard-coded file path and class name. Both assume the v20+ defaults (no type in the file or class
name). When the workspace configures a component type, the component inherits it and the hard-coded references no
longer match, so the build fails.
Workspaces get a component type in two common ways:
- Every workspace updated to v20 with
ng update: the migration that keeps the previous style guide behaviour
(fdc6291) adds"@schematics/angular:component": { "type": "component" }. ng new --file-name-style-guide=2016, which adds{ "type": "component", "addTypeToClassName": false }.
Hard-coded references:
packages/schematics/angular/app-shell/index.ts:withAppShell(AppShell)and
insertImport(..., 'AppShell', './app-shell/app-shell').packages/schematics/angular/module/files/.../__name@dasherize__-routing__typeSeparator__module.ts.template(and the
non-routing module template for--routewithout a routing module):import { <%= classify(name) %> } from './<%= dasherize(name) %>';
The library schematic had the same problem (#26981) and was fixed in 661609e by passing an explicit type: '' to the
component schematic.
Minimal Reproduction
app-shell (updated-workspace configuration):
ng new ws --defaults
cd ws
# what `ng update` to v20 adds to angular.json under projects.ws.schematics:
# "@schematics/angular:component": { "type": "component" }
ng generate app-shell
ng buildGenerated src/app/app-shell/app-shell.component.ts contains export class AppShellComponent {}, but
src/app/app.config.server.ts contains:
import { AppShell } from './app-shell/app-shell';
...
provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShell))module --route (2016 file name style):
ng new ws --no-standalone --file-name-style-guide=2016 --defaults
cd ws
ng generate module feature --route feature --module app
ng buildGenerated src/app/feature/feature-routing.module.ts:
import { Feature } from './feature'; // the file is feature.component.tsException or Error
# app-shell
✘ [ERROR] TS2307: Cannot find module './app-shell/app-shell' or its corresponding type declarations. [plugin angular-compiler]
✘ [ERROR] Could not resolve "./app-shell/app-shell"
# module --route
✘ [ERROR] Could not resolve "./feature"
✘ [ERROR] TS2307: Cannot find module './feature' or its corresponding type declarations. [plugin angular-compiler]
Your Environment
Angular CLI : 22.2.3
Node.js : 24.15.0
Package Manager : npm 11.12.1
Operating System : darwin arm64
@schematics/angular : 22.2.3
Anything else relevant?
- Affected since 20.0.0 (hard-coded names from 23fc8e1, "generate components without a
.component
extension/type"). Same code on21.2.xand22.2.x. - Suggested fix: follow 661609e and pass
type: ''(andaddTypeToClassName: false, so the class name stays
AppShell/Feature) to the component schematic inapp-shellandmodule, so the generated files always match
the references. Happy to send a PR. - The
module --routecase withaddTypeToClassName: falsealso hits #<issue for 01> (wrong NgModule declaration);
link the two once filed.
Activity
fix(@schematics/angular): set explicit type for the app-shell component