'crypto-crypto'는 알려진 요소가 아닙니다.
프런트 엔드가 각진 MVC 5 프로젝트가 있습니다.이 튜토리얼 https://angular.io/guide/router에서 설명한 바와 같이 루팅을 추가하고 싶습니다.그래서 제 안에_Layout.cshtml추가했습니다.
<base href="/">
그리고 내 app.download에 내 루팅을 만들었다.그러나 이 작업을 실행하면 다음과 같은 오류가 발생합니다.
Error: Template parse errors:
'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. ("
<a routerLink="/dashboard">dashboard</a>
</nav>
[ERROR ->]<router-outlet></router-outlet>
"): ng:///AppModule/AppComponent.html@5:0
내 app.component 라인
<router-outlet></router-outlet>
Visual studio에서 'router-outlet' 태그를 해결할 수 없다는 오류가 나타납니다.이 오류를 해결할 수 있는 방법이 있습니까?참조 자료나 가져오기를 놓쳤나요? 아니면 그냥 간과한 건가요?
제 소포는 아래와 같습니다.json, app.component 및 app.components
package.json:
{
"version": "1.0.0",
"name": "app",
"private": true,
"scripts": {},
"dependencies": {
"@angular/common": "^4.2.2",
"@angular/compiler": "^4.2.2",
"@angular/core": "^4.2.2",
"@angular/forms": "^4.2.2",
"@angular/http": "^4.2.2",
"@angular/platform-browser": "^4.2.2",
"@angular/platform-browser-dynamic": "^4.2.2",
"@angular/router": "^4.2.2",
"@types/core-js": "^0.9.41",
"angular-in-memory-web-api": "^0.3.2",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"graceful-fs": "^4.0.0",
"ie-shim": "^0.1.0",
"minimatch": "^3.0.4",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.0.1",
"systemjs": "^0.20.12",
"zone.js": "^0.8.12"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-tsc": "^1.3.2",
"gulp-typescript": "^3.1.7",
"path": "^0.12.7",
"typescript": "^2.3.3"
}
}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import {DashboardComponent} from "./dashboard/dashboard.component"
const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full',
component: DashboardComponent
},
{
path: 'dashboard',
component: DashboardComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes),
BrowserModule,
FormsModule
],
exports: [RouterModule],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard">dashboard</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent {
title = 'app Loaded';
}
이것을 시험해 보세요.
수입품RouterModule에의app.module.ts
import { RouterModule } from '@angular/router';
더하다RouterModule에의imports []
다음과 같습니다.
imports: [ RouterModule, ]
사용 방법:
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
에서 내보내기를 설정할 필요가 없습니다.AppModule,왜냐면AppModule는 어플리케이션의 다른 모듈에 의해 Import되지 않습니다.
이미 가지고 계신 분들을 위해RoutingModule부모 모듈로 Import된 경우 컴포넌트를 추가하지 않아 문제가 발생할 수 있습니다.<router-outlet></router-outlet>모듈 선언에 기재되어 있습니다.
main.component.displaces
<router-outlet></router-outlet>
main.disc.ts.main.
import { MainComponent } from './main.component';
import { SharedModule } from './../shared/shared.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainRoutingModule } from './main-routing.module';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
MainComponent // <----- DON'T FORGET TO DECLARE THIS
],
imports: [
CommonModule,
SharedModule,
RouterModule,
MainRoutingModule
]
})
export class MainModule { }
장치 테스트를 수행 중 이 오류가 발생하면 ImportRouterTestingModule에의app.component.spec.ts또는 주요 컴포넌트 내부를 참조하십시오.spec.ts:
import { RouterTestingModule } from '@angular/router/testing';
더하다RouterTestingModule에의imports: []맘에 들다
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
Angular 6을 angular-cli에서 사용하고 있으며 라우팅 액티비티를 담당하는 별도의 라우팅 모듈을 작성한 경우 루트 배열에서 루트를 설정합니다.내보내기 배열에서 Router Module을 선언하고 있는지 확인합니다.코드는 다음과 같습니다.
@NgModule({
imports: [
RouterModule,
RouterModule.forRoot(appRoutes)
// other imports here
],
exports: [RouterModule]
})
export class AppRoutingModule { }
이 에러는 이유 없이 표시되는 경우가 있습니다.IDE를 열고 닫으면 해결할 수 있습니다.
저는 app.modulets에 다음 코드를 추가하면 됩니다.
@NgModule({ ..., imports: [ AppRoutingModule ], ... })
올바른 정의를 찾은 Hero Editor 예제 감사합니다.
앱 라우팅 모듈을 생성할 때:
ng generate module app-routing --flat --module=app
app-backets.ts 파일을 업데이트하여 다음을 추가합니다.
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
다음으로 완전한 예를 제시하겠습니다.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
AppRoutingModule을 app.module.ts Import에 추가합니다.
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [...],
bootstrap: [AppComponent]
})
모든 루트를 처리하는 라우팅 컴포넌트를 작성하는 것이 좋습니다.각진 웹사이트 매뉴얼에서!좋은 연습이네요!
ng generate module app-flat --flat = app
위의 CLI는 라우팅 모듈을 생성하여 앱 모듈에 추가합니다.생성된 컴포넌트에서 해야 할 일은 루트를 선언하는 것뿐입니다.또, 이 항목을 추가하는 것도 잊지 말아 주세요.
exports: [
RouterModule
],
디폴트로는 생성된 어플리케이션 모듈에는 포함되어 있지 않기 때문에 ng-decorator에 문의해 주십시오.
이 에러의 원인은 다음과 같습니다.
, ㅇㅇㅇㅇㅇㅇ, ㅇㅇㅇㅇㅇ, ㅇㅇㅇ, ㅇㅇㅇㅇ, ㅇㅇㅇ, ㅇㅇ, ㅇㅇ, ㅇㅇ, ㅇㅇ, ㅇAppRoutingModuleapp.module.ts
app.context.ts:
imports: [AppRoutingModule]
새로운 라우팅 모듈을 작성한 경우 다음 라우팅 모듈에서 RouterModule을 Import 및 내보내기만 하면 됩니다.
@NgModule({
declarations: [],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class NewRoutingModule {}
이을 꼭 해 주세요.NewRoutingModule이치노
@NgModule({
declarations: [NewComponent], //--> Add NewComponent
imports: [CommonModule, NewRoutingModule ] //--> Add NewRoutingModule
})
export class NewModule{}
다음으로 이 모듈을 app.module.ts 파일로 전송합니다.
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule,
BrowserAnimationsModule,
NewModule], //--> Add NewModule
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
하여 "/"를 <router-outlet>이 모듈에서는 새로운 라우팅 모듈을 사용하지 않습니다. 꼭 추가해 주세요.RouterModule새로 생성된 모듈의 Import 및 Export 어레이로 이동합니다.
newModule.module.ts:
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [NewComponent], //--> Add NewComponent
imports: [CommonModule, RouterModule] //--> Add RouterModule
exports: [RouterModule], //--> Add RouterModule
})
export class NewModule{}
또한 새로 생성된 모듈을 app.ts.imports 배열에 추가하는 것도 잊지 마십시오.
app.context.ts:
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule,
BrowserAnimationsModule,
NewModule], //--> Add NewModule
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
문제는 Code에서만 했습니다.VS Code를 실행하고 .ng serve ★★★★★★★★★★★★★★★★★」ng build --prod잘 작동했어요.
이 문제를 해결한 것은 Angular Language Service 확장기능을 무효로 하는 것 뿐이었습니다.angular.ng-template를 다시 표시합니다.
제 경우엔 짐을 천천히 싣는 실수였습니다.라우팅 모듈을 가리키고 있었는데 라우팅 모듈을 소유하고 있는 모듈을 가리키고 있을 것입니다.
틀렸어
const routes: Routes = [
{
path: 'Login',
loadChildren: ()=> import('./login/login-routing.module.ts').then(m=> m.LoginRoutingModule)
}
]
맞다
const routes: Routes = [
{
path: 'Login',
loadChildren: ()=> import('./login/login.module.ts').then(m=> m.LoginModule)
}
]
나는 나에게 맞는 해결책을 찾았다.테스트하기 위해 정상적으로 동작하는 새로운 프로젝트를 만들고 app.component.html 내의 라우터-아웃렛 행을 제외한 모든 것을 서서히 삭제했습니다.이로 인해 항상 이 오류가 발생합니다.VSCODE 버전 1.53.x를 사용하고 있었기 때문에 1.54(2021년 2월)로 업그레이드하면 문제가 해소되었습니다.
으로 작성한 app-routing.module.ts CLI Import 할 AppRoutingModuleapp.module.tsNg Module Import ng ng the the the the ng the the the the the the the the the the를 만듭니다.app-routing.module.tsCLI の 음음음음 음음음 。
ng generate module app-routing --flat --module=app
이 문제를 해결하려면 다음 사항을 확인하십시오.
- Router Module 모듈을 모듈로 Import합니다.
- 모듈의 선언 배열에 컴포넌트를 추가합니다.
- 라우터 모듈을 명시적으로 정의한 경우 반드시 Import하십시오.
다음의 예를 참조해 주세요.
app.component.module
<router-outlet></router-outlet>
app-buff.ts.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutUsComponent } from './components/about-us/about-us.component';
import { ContactUsComponent } from './components/contact-us/contact-us.component';
import { IndexComponent } from './components/index/index.component';
const routes: Routes = [
{ path: '', redirectTo: 'index', pathMatch: 'full' },
{ path: 'index', component: IndexComponent },
{ path: 'about-us', component: AboutUsComponent },
{ path: 'contact-us', component: ContactUsComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })
],
exports: [
RouterModule
],
providers: []
})
export class AppRoutingModule { }
app.context.ts:
import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IndexComponent } from './components/index/index.component';
import { AboutUsComponent } from './components/about-us/about-us.component';
import { ContactUsComponent } from './components/contact-us/contact-us.component';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
],
declarations: [AppComponent, IndexComponent, AboutUsComponent, ContactUsComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
나와 함께 작동한다!!!
이 경우 Import에서 Router Module이 누락되었기 때문에 발생합니다.
1. ' 경우.' 1. '실행하고 경우'app.module.ts음음음:
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'user', component: UserComponent },
{ path: 'server', component: ServerComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
]
})
export class AppModule { }- 를 는 경우는,
app-routing.module.tsModule)은 다음과 같습니다.
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent },
{ path: 'servers', component: ServersComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
//................................................................
//app.module.ts
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [
AppRoutingModule
]
})
export class AppModule { }@NgModule({
declarations: [
SessionmagementComComponent, ***////Don't forgot to register main component for which html file you are using <router-outlet>...***
LocalvssessionStorageComponent,
SessionvslocallStorageComponent
],
imports: [
CommonModule,
BrowserModule,
SessionManagementStorageRoutingModule,
RouterModule,
AppRoutingModule
],
exports: [
LocalvssessionStorageComponent,
SessionvslocallStorageComponent
]
})
export class SessionmagementModule { }
제 경우 실수로 ap.modules.ts의 @NgModule 선언에서 AppComponent를 삭제했습니다.
app.module.ts 파일에 오류가 있는 경우 이 오류가 표시될 수 있습니다.제 경우 존재하지 않는 컴포넌트를 Import하고 있었습니다.
이 문제는 나에게도 있었다.간단한 속임수야.
@NgModule({
imports: [
.....
],
declarations: [
......
],
providers: [...],
bootstrap: [...]
})
상기와 같이 사용하세요.먼저 선언을 가져온 다음 선언을 가져옵니다.그것은 나에게 효과가 있었다.
나도 같은 문제를 안고 있었는데, 난 변했어.
templateUrl: `<router-outlet></router-outlet>`,
로.
template: `<router-outlet></router-outlet>`,
덧붙여서, 당신의 컴포넌트가 당신의 모듈의 선언 배열에 존재하는 것을 주목하세요.
app.module.ts 파일에서
import { RouterModule, Routes } from '@angular/router';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full',
component: DashboardComponent
},
{
path: 'dashboard',
component: DashboardComponent
}
];
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
이 코드를 추가합니다.해피 코딩
에러가 발생하고 있는 경우는, 다음의 간단한 솔루션을 참조해 주세요.
각도 투영에서 "알려진 요소가 아닙니다"
그리고나서,
"app.module.ts" 파일로 이동하여 다음 행을 추가합니다.
import { AppRoutingModule } from './app-routing.module';
Import에는 AppRoutingModule도 포함되어 있습니다.
언급URL : https://stackoverflow.com/questions/44517737/router-outlet-is-not-a-known-element
'programing' 카테고리의 다른 글
| Oracle 11g에서 두 날짜 사이의 일수는 어떻게 알 수 있습니까? (0) | 2023.03.21 |
|---|---|
| 스크롤 시 CSS 변경 각도 스타일 (0) | 2023.03.21 |
| Spring Boot 2.0에서 자체 서명 증명서를 사용한HTTPS 사용 (0) | 2023.03.21 |
| WordPress add_rewrite_rule은 로컬로 동작하지만 서버에서는 동작하지 않습니다. (0) | 2023.03.21 |
| 각도, 한계값 대상 및 $index별 추적 (0) | 2023.03.21 |