Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'router-outlet' is not a known element #3331

Closed
memee opened this issue Nov 30, 2016 · 2 comments · Fixed by #3252
Closed

'router-outlet' is not a known element #3331

memee opened this issue Nov 30, 2016 · 2 comments · Fixed by #3252

Comments

@memee
Copy link

memee commented Nov 30, 2016

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
Copy link
Contributor

Meligy commented Dec 1, 2016

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 (#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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants
@Meligy @memee and others