Angular 2 : Error with directives and routes
Question
I'm new to Angular 2 and I am experiencing difficulties to achieve a really simple app : a basic router with 1 component.
I've read the getting started / tutorial and watched lessons at egghead.io.
First, there is my code :
// 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";
and the 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>
The error message is : Unexpected directive value 'undefined' on the View of component 'AppComponent'
I don't really get what I've changed but one hour ago, it was *Route config should contain exactly one "component", "loader", or "redirectTo" property.**
I really don't get what I'm doing wrong.
EDIT : package.json and tsconfig.json added. 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"
]
}
EDIT 2 : project's structure :
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
1 answers
solution1
1 ACCPTED 2016-03-16 13:18:17
There are couple problems for your code.
Tell SystemJS to look in your outDir folder.
For example, in my tsconfig.json , I set outDir: dist . Then I have to do the following:
System.config({
map: { app: 'dist'},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
Tell SystemJS to import your bootstrap file.
For example, if I have a file named boot.ts , Then I have to do:
System.import('app/boot')
.then(null, console.error.bind(console));
In you case, you should do System.import('app/app').then(null, console.error.bind(console));
Import ROUTER_DIRECTIVE in nav.component
Since you are using routerLink which is from ROUTER_DIRECTIVE , you need to import it.
In your nav.component.ts import {ROUTER_DIRECTIVES} from 'angular2/router';
Import your component from its own file, not from index.ts
//import { HomeComponent, NavComponent } from "./index";
import { HomeComponent} from "./home.component";
import { NavComponent} from "./nav.component";
The reason why you have
Unexpected directive value 'undefined' on the View of component 'AppComponent'
is because your import the component from other files. I have no idea why you are doing that. But that is the problem cause this. Replace with the above code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.