我有一个有效的Django项目,并试图使用Angular2。我是Angular2的新手。当我尝试从不同的文件加载路由时,我收到以下错误。此外,早些时候我发现routerLink
已在浏览器中更改为routerlink
。这是预期的变化吗?
Error: TypeError: Cannot read property 'length' of undefined
at Object.eval (http://user:8000/ng/src/app/app.route.js:9:16)
at eval (http://user:8000/ng/src/app/app.route.js:37:4)
at eval (http://user:8000/ng/src/app/app.route.js:38:3)
at eval (anonymous)
Evaluating http://user:8000/ng/src/app/app.route.js
Evaluating http://user:8000/ng/src/main.js
Error loading http://user:8000/ng/src/main.js
(anonymous) @ (index):23
ZoneDelegate.invoke @ zone.js:232
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
我已经google了很多,发现这是一些有角度的版本的问题。这是我的package.json
文件:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"typescript": "^2.1.5",
"typings": "^1.0.4",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.7.4",
"lodash": "^4.11.1",
"jasmine-core": "~2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"protractor": "^3.3.0",
"rimraf": "^2.5.2"
},
"repository": {}
}
我到目前为止遇到的许多错误都是由于package.json或npm和node中的错误版本造成的。我一直在学习一些教程和示例,我可以学习Angular架构和语法,但如果有人能够正确地指导我在哪个版本中使用哪种语法,我将不胜感激。
app.route.js:
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var module_1 = require();
'@angular/core';
var router_1 = require("@angular/router");
var component1_component_1 = require("./component1.component");
var component2_component_1 = require("./component2.component");
var routes = [
{ path: '', redirectTo: '/component1', pathMatch: 'full' },
{ path: 'component1', component: component1_component_1.Component1Component },
{ path: 'component2', component: component2_component_1.Component2Component },
];
var AppRoutingModule = (function () {
function AppRoutingModule() {
}
return AppRoutingModule;
}());
AppRoutingModule = __decorate([
module_1.NgModule({
imports: [
router_1.RouterModule.forRoot(routes)
],
exports: [
router_1.RouterModule
]
})
], AppRoutingModule);
exports.AppRoutingModule = AppRoutingModule;
exports.routingComponents = [component1_component_1.Component1Component, component2_component_1.Component2Component];
//# sourceMappingURL=app.route.js.map