[英]Angular 2 : Error with directives and routes
我是Angular 2的新手,在實現一個真正簡單的應用程序時遇到了困難:一個具有1個組件的基本路由器。
我已經閱讀了入門/教程,並在egghead.io上觀看了課程。
首先,有我的代碼:
// src/app.ts
import { bootstrap } from 'angular2/platform/browser';
import { ROUTER_PROVIDERS } from "angular2/router";
import { AppComponent } from "./components/index";
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
// src/components/app.component.ts
import { Component } from "angular2/core";
import { RouteConfig, ROUTER_DIRECTIVES } from "angular2/router";
import { HomeComponent, NavComponent } from "./index";
@Component({
selector: 'app-view',
directives: [ ROUTER_DIRECTIVES, NavComponent ],
template: `
<h1>App</h1>
<nav-cmp></nav-cmp>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{ path: '/home', name: 'Home', component: HomeComponent }
])
export class AppComponent { }
// src/components/nav.component.ts
import { Component } from "angular2/core";
@Component({
selector: 'nav-cmp',
template: `
<nav>
<a [routerLink]="['Home']">Home</a>
</nav>
`
})
export class NavComponent { }
// src/components/home.component.ts
import { Component } from "angular2/core";
@Component({
template: `<h2>Home.</h2>`
})
export class HomeComponent { }
// src/components/index.ts
export { AppComponent } from "./app.component";
export { NavComponent } from "./nav.component";
export { HomeComponent } from "./home.component";
和index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title></title>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
build: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('build/app')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<app-view>Loading...</app-view>
</body>
</html>
錯誤消息是: 組件'AppComponent'的視圖上的意外指令值'undefined'
我還沒有真正了解到我所做的更改,但是一個小時前,它是* Route config應該只包含一個“ component”,“ loader”或“ redirectTo”屬性。**
我真的不明白我在做什么。
編輯: package.json
和tsconfig.json
添加。 package.json:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run http\" ",
"tsc": "tsc -p .",
"tsc:w": "tsc -w -p .",
"wp:w": "webpack --watch",
"lite": "nano-server",
"http": "http-server -p 3000 -a 127.0.0.1 -o",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"@ngrx/store": "^1.3.3",
"angular2": "2.0.0-beta.9",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.24",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"css-loader": "^0.23.1",
"http-server": "^0.9.0",
"lite-server": "^2.1.0",
"node-sass": "^3.4.2",
"path": "^0.12.7",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"typescript": "^1.8.7",
"typings": "^0.7.5",
"webpack": "^1.12.14"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./build",
"sourceRoot": "./src/",
"rootDir": "./src/"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
編輯2:項目的結構:
project/
├── build/
│ └── all my .js & .map
├── docs/
│ └── some usefull .md files :)
├── node_modules/
├── src/
│ ├── components/
│ │ ├── app.component.ts
│ │ ├── home.component.ts
│ │ ├── nav.component.ts
│ │ └── index.ts
│ ├── public/
│ ├── app.ts
│ └── config.ts
├── typings/
├── index.html
├── package.json
├── tsconfig.json
└── webpack.config.json
您的代碼有幾個問題。
outDir
文件夾中查找。 例如,在我的tsconfig.json
,我設置了outDir: dist
。 然后,我必須執行以下操作:
System.config({
map: { app: 'dist'},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
bootstrap
文件。 例如,如果我有一個名為boot.ts
的文件,那么我必須這樣做:
System.import('app/boot')
.then(null, console.error.bind(console));
在這種情況下,您應該執行System.import('app/app').then(null, console.error.bind(console));
ROUTER_DIRECTIVE
在nav.component 由於您使用routerLink
這是從ROUTER_DIRECTIVE
,您需要將其導入。
在您的nav.component.ts中, import {ROUTER_DIRECTIVES} from 'angular2/router';
index.ts
導入組件 //import { HomeComponent, NavComponent } from "./index";
import { HomeComponent} from "./home.component";
import { NavComponent} from "./nav.component";
你之所以擁有
組件“ AppComponent”的視圖上出現意外的指令值“ undefined”
是因為您從其他文件導入了組件。 我不知道你為什么要這么做。 但這是導致此問題的原因。 用上面的代碼替換。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.