"router-outlet" - angular2 noma'lum element emas

Repo: https://github.com/leongaban/lifeleveler.io

Ishonchim komilki, nima uchun men ushbu xatoga yo'l qo'ygan bo'lsam, mening app.component.ts saytiga import qilingan ruter bor

I'm trying to use the app.component to hold the main , and serve up the login view first.

enter image description here

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './shared/services/auth.service';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/throw';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule,
        routing
    ],
    declarations: [
        AppComponent,
        LoginComponent
    ],
    providers: [
        AuthService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from './shared/models/user';
import { Router } from '@angular/router';

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
    styleUrls: ['./app/app.component.css']
})
export class AppComponent implements OnInit {
    ngOnInit() {

    }
}

app.component.html

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';

export const routes: Routes = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full',
    },
    {
        path: 'login',
        component: LoginComponent
    }
]

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
3
Men faqat uni sinab ko'rdim, yana bir xil xato :(
qo'shib qo'ydi muallif Leon Gaban, manba
Men hali ham tizimni ishga tushirishni boshladim. Mana mening repoim, tez orada plunkrni yaratadi. github.com/leongaban/lifeleveler.io
qo'shib qo'ydi muallif Leon Gaban, manba
Men hali ham tizimni ishga tushirishni boshladim. Mana mening repoim, tez orada plunkrni yaratadi. github.com/leongaban/lifeleveler.io
qo'shib qo'ydi muallif Leon Gaban, manba
@Bougarfaoui Albatta, hali webpack yuk mashinalari qanday ishlaydi/amin emas :) Ha, nima bo'ladi, hech qanday g'oya. npm start ni kutib turingmi?
qo'shib qo'ydi muallif Leon Gaban, manba
Ba'zan men ng serve ni to'xtatib, uni o'chirish uchun xatolikni qayta ishga tushirishim kerak. U har doim do'zaxni mendan tashlamaydi
qo'shib qo'ydi muallif Graham Walters, manba
Men Angular2 uchun o'zim uchun juda yangi. Dastur kodi NgModule importiga RouterModule qo'shib ko'ring
qo'shib qo'ydi muallif Graham Walters, manba
yangi @ angular/cli bilan bo'g'ilib olasiz, bu oson emas
qo'shib qo'ydi muallif Bougarfaoui El houcine, manba
yangi @ angular/cli bilan bo'g'ilib olasiz, bu oson emas
qo'shib qo'ydi muallif Bougarfaoui El houcine, manba
muammoingizni topa olmayapsizmi, menga project.js amalga loyihangizga wepack qo'shishni xohlaysizmi
qo'shib qo'ydi muallif Bougarfaoui El houcine, manba
bu kodda muammo yo'q. routing import qilmang va RouterModule beacuse routing bir xil konfiguratsiya bilan RouterModule bilan bir xil bo'ladi
qo'shib qo'ydi muallif Bougarfaoui El houcine, manba
sizning kodingiz yaxshi, ido sizning bunga oid bir nechtasi bor
qo'shib qo'ydi muallif Bougarfaoui El houcine, manba
sizning kodingiz yaxshi, ido sizning bunga oid bir nechtasi bor
qo'shib qo'ydi muallif Bougarfaoui El houcine, manba

7 javoblar

Siz RouterModule-ni bir necha marta import qilishingiz mumkin.

I would remove this line from your app.routing.ts

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

app.module ilovasida marshrutlarni quyidagilar bilan import qilaman:

import { routes } from './app.routing';

Keyin RouterModule -ni import qilib oling:

RouterModule.forRoot(routes)
1
qo'shib qo'ydi

Men sizning webpack bilan loyihangizni qayta ishladim, sizning kodingiz yaxshi ishlaydi:

github repo

birinchi:

npm install -g @angular/cli

npm install 

ng serve
1
qo'shib qo'ydi
Buni tekshiring, chunki bu javob, men dasturni ishga tushirolmagan bo'lsam ham. Angular-CLI - yangi ng2 ilovalarini yaratish bilan shug'ullanish.
qo'shib qo'ydi muallif Leon Gaban, manba
ERROR in ./src/polyfills.ts Moduli yaratish muvaffaqiyatsiz tugadi: TypeError: 'newLine' xususiyatini aniqlanmagan
qo'shib qo'ydi muallif Leon Gaban, manba
Rahmat! Hmm, men forklift qildim va uni yuklab oldim, npm install ni angular-cli.jsonni ogohlantirishdan yangi ma'lumotlar bilan yangilash kerak edi, lekin hozir bu xatoni ERROR ning /main.ts Moduli yaratish muvaffaqiyatsiz tugadi: TypeError: 'newLine' xususiyatini aniqlanmagan
qo'shib qo'ydi muallif Leon Gaban, manba

Men sizning webpack bilan loyihangizni qayta ishladim, sizning kodingiz yaxshi ishlaydi:

github repo

birinchi:

npm install -g @angular/cli

npm install 

ng serve
1
qo'shib qo'ydi
Buni tekshiring, chunki bu javob, men dasturni ishga tushirolmagan bo'lsam ham. Angular-CLI - yangi ng2 ilovalarini yaratish bilan shug'ullanish.
qo'shib qo'ydi muallif Leon Gaban, manba
ERROR in ./src/polyfills.ts Moduli yaratish muvaffaqiyatsiz tugadi: TypeError: 'newLine' xususiyatini aniqlanmagan
qo'shib qo'ydi muallif Leon Gaban, manba
Rahmat! Hmm, men forklift qildim va uni yuklab oldim, npm install ni angular-cli.jsonni ogohlantirishdan yangi ma'lumotlar bilan yangilash kerak edi, lekin hozir bu xatoni ERROR ning /main.ts Moduli yaratish muvaffaqiyatsiz tugadi: TypeError: 'newLine' xususiyatini aniqlanmagan
qo'shib qo'ydi muallif Leon Gaban, manba

AppModule ichida RouterModule.forRoot (marshrutlar) ifodasini qo'shishingiz kerak:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        LoginComponent
    ],
    providers: [
        AuthService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

va app.routing.ts faylidan olib tashlang:

export const routes: Routes = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full',
    },
    {
        path: 'login',
        component: LoginComponent
    }
];
0
qo'shib qo'ydi
Hali ham ishlamayapti :( plnkr qilish, lekin mening app.component.html yuklanmaydi, bu erda yangi savol tug'iladi: stackoverflow.com/questions/42674180/…
qo'shib qo'ydi muallif Leon Gaban, manba

AppModule ichida RouterModule.forRoot (marshrutlar) ifodasini qo'shishingiz kerak:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        LoginComponent
    ],
    providers: [
        AuthService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

va app.routing.ts faylidan olib tashlang:

export const routes: Routes = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full',
    },
    {
        path: 'login',
        component: LoginComponent
    }
];
0
qo'shib qo'ydi
Hali ham ishlamayapti :( plnkr qilish, lekin mening app.component.html yuklanmaydi, bu erda yangi savol tug'iladi: stackoverflow.com/questions/42674180/…
qo'shib qo'ydi muallif Leon Gaban, manba

Faqat RouterOutlet-ni import qiling

import { RouterOutlet } from '@angular/router';
0
qo'shib qo'ydi

Faqat RouterOutlet-ni import qiling

import { RouterOutlet } from '@angular/router';
0
qo'shib qo'ydi
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks