We Keep Coding

Angular 2 does not move to start page from AppComponent

I am trying to learn Angular 2 and play with it now. But I don't know why it doesn't go to start page from AppComponent. As long as I know, this has to move to test page and show "test" text. But when I run this, it only displays "Hello" which is app.component text. If I enter /test url, there is 404 error. Is this because the test component is not loaded successfully?
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { test } from './test';
#NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
AppComponent,
test
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.routing.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { test } from './test.index';
const routes: Routes = [
{ path: '', component: test },
{ path: 'test', component: test },
{ path: '**', redirectTo: '' },
];
export const routing = RouterModule.forRoot(routes);
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<h1>Hello </h1>`,
})
export class AppComponent { }
test.ts
import { Component } from '#angular/core';
#Component({
selector: 'test-app',
template: `<h1>test </h1>`,
})
export class test {}

Include '<router-outlet></router-outlet>' in your appcomponent template:
<div>
<h3>App component</h3>
</div>
<div>
<router-outlet></router-outlet>
</div>

It looks like you need to provide a <router-outlet></router-outlet> in your app.component.ts template.
So the test component isn't being loaded because it can't inject the component into anything without the <router-outlet>.
https://angular.io/tutorial/toh-pt5#add-routeroutlet

error "ERROR TypeError: Cannot read property 'createComponent' of undefined" when work with dynamic component in Angular2

I am trying to add the components dynamically in angular4.
I checked with other questions, But i cant find solution.
I got the error
ERROR TypeError: Cannot read property 'createComponent' of undefined
on dynamic components.
adv.component.ts
import { Component, OnInit, AfterContentInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '#angular/core';
import { SampleComponent } from '../sample/sample.component';
#Component({
selector: 'app-adv',
templateUrl: './adv.component.html',
styleUrls: ['./adv.component.css']
})
export class AdvComponent implements OnInit, AfterContentInit {
#ViewChild('container', {read:'ViewContainerRef'}) container;
constructor(private resolver : ComponentFactoryResolver) { }
ngOnInit() {
}
ngAfterContentInit(){
const sampleFactory = this.resolver.resolveComponentFactory(SampleComponent);
this.container.createComponent(sampleFactory);
}
}
adv.component.html
<div #container></div>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AdvComponent } from './adv/adv.component';
import { SampleComponent } from './sample/sample.component';
#NgModule({
declarations: [
AppComponent,
AdvComponent,
SampleComponent
],
entryComponents:[
SampleComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

About ngAfterViewInit in docs:
Respond after Angular initializes the component's views and child
views.
while ngAfterContentInit:
Respond after Angular projects external content into the component's
view.
So the child view is not ready in ngAfterContentInit, so move this part
ngAfterContentInit(){
const sampleFactory = this.resolver.resolveComponentFactory(SampleComponent);
this.container.createComponent(sampleFactory);
}
to
ngAfterViewInit() {
const sampleFactory = this.resolver.resolveComponentFactory(SampleComponent);
this.container.createComponent(sampleFactory);
}
Also change:
#ViewChild('container', {read:'ViewContainerRef'}) container;
to
#ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef

Angular 4 doesnt display my components views

Im learning to use Angular 4 and im not being able to render more than 1 template, my starting App template is OK, and it renders fine, but then i created 2 more components with "ng g component newComponent" and im not being able to make them display anything. I can type the new components URL in the browser and it navigates fine without errors, but it always displays the app.component.html My files are like this:
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<p>
ASDASDASDAS
</p>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent }
];
#NgModule({
declarations: [
AppComponent,
LoginComponent,
DashboardComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
dashboard.component.html
<p>
dashboard works!
</p>
dashboard.componentspec.ts
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { DashboardComponent } from './dashboard.component';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
dashboard.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.less']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
My login component is similar, and my three components displays the same:
ASDASDASDAS
I dont know where my problem is, i have no error messages in any of the consoles. My project Structure is:
-src
--app
---dashboard
----dashboard.component.html
----dashboard.component.less
----dashboard.component.spec.ts
----dashboard.component.ts
---login
----login.component.html
----login.component.less
----login.component.spec.ts
----login.component.ts
--app.component.html
--app.component.less
--app.component.spec.ts
--app.component.ts
--app.module.ts
Do i need different NgModules for my purpose of totally separated views? I mean i want a page with "Login", another for "Dashboard", another for idk, a new page...etc, each one needs an NgModule for having separated views?
Any help is much appreciated!!

You should place <router-outlet></router-outlet> into app.component.html to define a place where other components will be rendered.
An example of app.component.html content:
<div class="app">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
You can read more here.

Angular 2 provider is not accessible in components

I am new on angular 2. I was following the legacy quick-start application, Tour of Heroes.
I created services as mentioned in the application.
I have a service HeroService. Which is used to pull all the heroes data.
I have included the HeroService at the app.module file as provider to be able to access it through out the application for all application.
My app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
],
declarations: [ AppComponent, HeroesComponent, HeroDetailComponent ],
providers: [ HeroService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And my Component File where I want to Access the HeroService to get data is:
export class HeroesComponent implements OnInit {
constructor(private heroService: HeroService) { }
}
The problem is I am getting an error like this, when i build the project :
Cannot find name 'HeroService'.
I have followed all the steps correctly. If I import the HeroService in my HeroesComponent, it seems to work. But fails when not imported.
Am I missing some step. As far as I understood declaring the provider on app.module will register it to use throughout the application/components without need of importing it each time.
Please correct me If I am wrong somewhere.

You need to import inside the component as well
import { HeroService } from './hero.service';

Typescript compilation error TS2307: Cannot find module with angular2 rc5 and ngModule

I am trying to find out the reason for the following error.
app/src/app.module.ts(13,33): error TS2307: Cannot find module 'src/components/test/test.module
I am using Angular2 RC5 and created a feature module and imported it in app.module.ts file. I am using lazy loading of the module with the router.
app.module.ts looks like this
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
/* App Root */
import { AppComponent } from './app.component';
/* Feature module */
import { TestModule } from 'src/components/test/test.module';
#NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: []
})
export class AppModule { }
test.module.ts looks like this
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent } from './test.component';
import { routing } from './test.routes';
#NgModule({
imports: [ CommonModule, routing ],
declarations: [ TestComponent ],
providers: []
})
export default class TestModule { }
app.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{
path: '',
redirectTo: '/test',
pathMatch: 'full'
},
{
path: 'test',
loadChildren: 'src/components/test/test.module'
}
];
export const routing = RouterModule.forRoot(routes);
test.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
import { TestComponent } from './test.component';
const routes: Routes = [
{ path: '',
component: TestComponent }
];
export const routing = RouterModule.forChild(routes);
Above error appears when I try to compile test.module.ts file with default keyword. If I remove it, error disappears. but of course, in that case, I won't be able to use lazy loading for feature module.
Does anyone come across this?

I see multiple errors in your code.
You are importing wrong module in your AppModule.
Your export class name of test.module.ts is TestModule, but you are importing DashboardModule in your AppModule.
Instead of:
import { DashboardModule } from 'src/components/test/test.module';
You should import:
import { TestModule } from 'src/components/test/test.module';
And, of course, you need to add TestModule to your AppModule imports.