堆栈内存溢出
  简体   繁体   English

Angular 2：指令和路由出错

[英]Angular 2 : Error with directives and routes

 原文  2016-03-16 11:23:22  5   1    javascript/ angularjs

问题描述

I'm new to Angular 2 and I am experiencing difficulties to achieve a really simple app : a basic router with 1 component. 我是Angular 2的新手，在实现一个真正简单的应用程序时遇到了困难：一个具有1个组件的基本路由器。

I've read the getting started / tutorial and watched lessons at egghead.io. 我已经阅读了入门/教程，并在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 : 和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' 错误消息是： 组件'AppComponent'的视图上的意外指令值'undefined'

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.** 我还没有真正了解到我所做的更改，但是一个小时前，它是* Route config应该只包含一个“ component”，“ loader”或“ redirectTo”属性。**

I really don't get what I'm doing wrong. 我真的不明白我在做什么。

EDIT : package.json and tsconfig.json added. 编辑： package.json和tsconfig.json添加。 package.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 : 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 : 编辑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

1 个解决方案

解决方案1
 1 已采纳  2016-03-16 13:18:17

There are couple problems for your code. 您的代码有几个问题。

Tell SystemJS to look in your outDir folder. 告诉SystemJS在outDir文件夹中查找。

For example, in my tsconfig.json , I set outDir: dist . 例如，在我的tsconfig.json ，我设置了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. 告诉SystemJS导入您的bootstrap文件。

For example, if I have a file named boot.ts , Then I have to do: 例如，如果我有一个名为boot.ts的文件，那么我必须这样做： 

 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)); 在这种情况下，您应该执行System.import('app/app').then(null, console.error.bind(console));

Import ROUTER_DIRECTIVE in nav.component 进口ROUTER_DIRECTIVE在nav.component

Since you are using routerLink which is from ROUTER_DIRECTIVE , you need to import it. 由于您使用routerLink这是从ROUTER_DIRECTIVE ，您需要将其导入。

In your nav.component.ts import {ROUTER_DIRECTIVES} from 'angular2/router'; 在您的nav.component.ts中， import {ROUTER_DIRECTIVES} from 'angular2/router';

Import your component from its own file, not from index.ts 从自己的文件而不是从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' 组件“ AppComponent”的视图上出现意外的指令值“ undefined”

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. 用上面的代码替换。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将角度指令，控制器和路径包装成函数 - Wraping angular directives,controllers and routes into functions 使用指令时出现Angular 4错误 - Angular 4 Error when using Directives 导航栏中的下拉列表不会展开（bootstrap，angular，directives，routes） - dropdown in navigation bar does not expand (bootstrap, angular, directives, routes) 获取错误Dropzone已经附加了角度指令 - Getting error Dropzone already attached with angular Directives 绑定属性值时出错-角度包含和指令 - Error with binding an attribute value - angular include and directives 使用角度JS指令时发生错误 - Error while using angular JS directives 角度指令 - Angular directives 角度指令 - Directives angular 角度指令 - Directives in Angular Angular 2 HTML指令和属性指令 - Angular 2 html directives and attribute directives
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM