Angular-cli: 'router-outlet' is not a known element

[memee]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
MacOSX Sierra

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.21
node: 6.6.0
os: darwin x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

No changes to the code generated by CLI.

ng new aot --routing
cd aot
ng test --single-run

The log given by the failure.

Normally this include a stack trace and some more information.

30 11 2016 22:35:52.096:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
30 11 2016 22:35:52.106:INFO [launcher]: Launching browser Chrome with unlimited concurrency
30 11 2016 22:35:52.121:INFO [launcher]: Starting browser Chrome
30 11 2016 22:35:53.060:INFO [Chrome 54.0.2840 (Mac OS X 10.12.1)]: Connected on socket /#cRFXpKqZaC-HmLznAAAA with id 3831005
Chrome 54.0.2840 (Mac OS X 10.12.1) AppComponent should create the app FAILED
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
          {{title}}
        </h1>
        [ERROR ->]<router-outlet></router-outlet>
        "): AppComponent@3:0
        Error: Template parse errors:
            at TemplateParser.parse (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/template_parser/template_parser.js:97:0 <- src/test.ts:11121
:19)
            at RuntimeCompiler._compileTemplate (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:255:0 <- src/test.ts:25485:5
1)
            at webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:175:47 <- src/test.ts:25405:62
            at Set.forEach (native)
            at RuntimeCompiler._compileComponents (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:175:0 <- src/test.ts:25405
:19)
            at createResult (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:86:0 <- src/test.ts:25316:19)
            at RuntimeCompiler._compileModuleAndAllComponents (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:90:0 <- src/te
st.ts:25320:88)
            at RuntimeCompiler.compileModuleAndAllComponentsSync (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:62:0 <- src
/test.ts:25292:21)
            at TestingCompilerImpl.compileModuleAndAllComponentsSync (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/bundles/compiler-testing.umd.js
:482:0 <- src/test.ts:37428:35)
            at TestBed._initIfNeeded (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/core/bundles/core-testing.umd.js:758:0 <- src/test.ts:9347:40)
Chrome 54.0.2840 (Mac OS X 10.12.1) AppComponent should have as title 'app works!' FAILED
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
          {{title}}
        </h1>
        [ERROR ->]<router-outlet></router-outlet>
        "): AppComponent@3:0
        Error: Template parse errors:
            at TemplateParser.parse (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/template_parser/template_parser.js:97:0 <- src/test.ts:11121
:19)
            at RuntimeCompiler._compileTemplate (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:255:0 <- src/test.ts:25485:5
1)
            at webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:175:47 <- src/test.ts:25405:62
            at Set.forEach (native)
            at RuntimeCompiler._compileComponents (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:175:0 <- src/test.ts:25405
:19)
            at createResult (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:86:0 <- src/test.ts:25316:19)
            at RuntimeCompiler._compileModuleAndAllComponents (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:90:0 <- src/te
st.ts:25320:88)
            at RuntimeCompiler.compileModuleAndAllComponentsSync (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/src/runtime_compiler.js:62:0 <- src
/test.ts:25292:21)
            at TestingCompilerImpl.compileModuleAndAllComponentsSync (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/compiler/bundles/compiler-testing.umd.js
:482:0 <- src/test.ts:37428:35)
            at TestBed._initIfNeeded (webpack:///Users/macio/Documents/WebStormProjects/aot/~/@angular/core/bundles/core-testing.umd.js:758:0 <- src/test.ts:9347:40)
Chrome 54.0.2840 (Mac OS X 10.12.1) AppComponent should render title in a h1 tag FAILED

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[Meligy]

You need to import the RouterTestingModule in the app.component.spec.ts file, as shown in https://github.com/angular/angular-cli/pull/3252/files#diff-badc0de0550cb14f40374a6074eb2a8b

I have a pull request (https://github.com/angular/angular-cli/pull/3252) to fix this in new projects (generated by ng new, not sure if this affects ng init in already existing projects too), but one of the build agents seems to be running forever and then failing. I might have to look at that before the guys merge it in.

Update: Just fixed the build. The PR has been reviewed before, so, hopefully will be approved easily. I'll start mentioning the guys after the build passes.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}