0
저는 Angular 4에서 새 라우터를 사용하여 로컬로 만든 App을 가지고 있지만 경로는 Plunker에서 작동하지 않고 오히려 오래된 비추천 라우터를 순서대로 사용해야합니다 Plunker에서 제대로 작동하는 경로 내 로컬 컴퓨터에서 Plunker 데모에 대한 내 애플 리케이션을 포팅이야 모든게 잘 라우팅을 제외하고 작동합니다.Angular4 오류 : router_deprecated_1.RouteConfig가 함수가 아닙니다.
오류 : (SystemJS) 형식 오류가 : router_deprecated_1.RouteConfig이
이 잘못 알고하지 마십시오 기능이되지 않습니다 내가 콘솔에 얻을 오류입니다. 누군가가 PLZ를 도울 수 있습니까?. Index.html을
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
target: "es5",
module: "commonjs",
strict: true,
sourceMap: false,
noImplicitAny: true,
moduleResolution: "node",
experimentalDecorators: true,
emitDecoratorMetadata: true,
lib:[
"es2015",
"dom"
]
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/router-deprecated': 'npm:@angular/router-deprecated',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:[email protected]',
'rxjs': 'npm:rxjs',
'typescript': 'npm:[email protected]/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
SystemJS 구성 파일을
<!DOCTYPE html> <html> <head> <base href="." /> <script type="text/javascript" charset="utf-8"> window.AngularVersionForThisPlunker = 'latest' </script> <title>DEMO APP</title> <link rel="stylesheet" href="style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" > <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://unpkg.com/[email protected]/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js/dist/zone.js"></script> <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script> <script src="https://unpkg.com/[email protected]/Reflect.js"></script> <script src="https://unpkg.com/[email protected]/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app') .catch(console.error.bind(console)); </script> </head> <body> <app-root></app-root> </body> </html> main.ts
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from './app';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { provide } from '@angular/core';
platformBrowserDynamic().bootstrapModule(AppModule, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
app.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { APP_BASE_HREF } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { PostsComponent } from './app.postsComponent';
import { CommentsComponent } from "./app.commentsComponent";
import { NewPostComponent } from "./app.newPostComponent";
import { DirectiveComponent } from "./app.directiveComponent";
import { NotFoundComponent } from "./app.notFoundComponent";
import { CounterDirective } from "./app.counter.directive";
import { DataService } from './data.service';
import { SortPipe } from "./app.sortPipe";
@NgModule({
declarations: [
SortPipe,
AppComponent,
PostsComponent,
CommentsComponent,
NewPostComponent,
NotFoundComponent,
DirectiveComponent,
CounterDirective
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule
],
providers: [
DataService,
{ provide: APP_BASE_HREF, useValue: '/' }
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
import { AppComponent } from './app.component';
import { PostsComponent } from './app.postsComponent';
import { CommentsComponent } from "./app.commentsComponent";
import { NewPostComponent } from "./app.newPostComponent";
import { DirectiveComponent } from "./app.directiveComponent";
import { NotFoundComponent } from "./app.notFoundComponent";
import { CounterDirective } from "./app.counter.directive";
@Component({
selector: 'app-root',
directives: [ROUTER_DIRECTIVES],
template: ` <div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" routerLink="/">Training App</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a [routerLink]="['/PostsComponent']">Posts</a></li>
<!---<li><a [routerLink]="['/NewPostComponent']>New Post</a></li>
<li><a [routerLink]="['/DirectiveComponent']">Directives</a></li>--->
</ul>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
`,
})
@RouteConfig([
{path: '/', as: 'PostsComponent', useAsDefault: true, component: PostsComponent}
])
export class AppComponent {
}
여기에 문제가 볼 수있는 Plunker입니다 :
봐 @ SRC/main.ts, 다음 SRC @/우리가 Plunker에서 응용 프로그램을 실행할 때
우리가 기본 HREF를 설정해야
최신 안정 버전을 확인하기 위해 라우팅이 많이 변경되었습니다 [이 문서의 경로 및 탐색] (https://angular.io/guide/router), 건배! –
Angular4에는 새로운 라우팅 모듈이 있지만 Plunker에서는 작동하지 않습니다. Angular4는 기존의 더 이상 사용되지 않는 라우터 만 Plunker에서 작동합니다. 그래서 누군가 내 Plunk에서 내가 틀린 곳을 발견 할 수 있는지 알아보기 위해 도움을 요청했습니다. –
내가 공유 한 링크에서 [Plunker] (https://angular.io/generated/live-examples/router/eplnkr.html)에 매우 자세한 예제가 있습니다. –