[英]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.