根组件在路由器出口呈现自己
Root component renders itself in router outlet
这里是 angular 2 js(ES2015) 项目的结构:
src
├── app.js
├── components
│ ├── app
│ ├── index.js
│ ├── list
│ ├── loess
│ └── nw
├── modules
│ ├── app.module.js
│ └── index.js
├── routes
│ ├── app.routes.js
│ └── index.js
└── vendor.js
我不知道如何使用路由器插座标签。当我在根组件模板中使用它时,该标签使该组件本身呈现两次,以替换路由器插座标签。对不起重言式。
除此之外,我还有错误:
Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
这是带有呈现内容的 image。
这是原始堆栈跟踪:
angular.vendor.js:2723ORIGINAL STACKTRACE:ErrorHandler.handleError @ angular.vendor.js:2723next @ angular.vendor.js:3586schedulerFn @ angular.vendor.js:3341SafeSubscriber.__tryOrUnsub @ angular.vendor.js:4971SafeSubscriber.next @ angular.vendor.js:4926Subscriber._next @ angular.vendor.js:4880Subscriber.next @ angular.vendor.js:4844Subject.next @ angular.vendor.js:4451EventEmitter.emit @ angular.vendor.js:3341onError @ angular.vendor.js:3421onHandleError @ angular.vendor.js:3349ZoneDelegate.handleError @ angular.vendor.js:24550Zone.runGuarded @ angular.vendor.js:24468_loop_1 @ angular.vendor.js:24709drainMicroTaskQueue @ angular.vendor.js:24717ZoneTask.invoke @ angular.vendor.js:24639
2016-10-15 22:29:01.285 angular.vendor.js:2723Error: Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
at resolvePromise (angular.vendor.js:24762)
at angular.vendor.js:24796
at ZoneDelegate.invokeTask (angular.vendor.js:24572)
at Object.onInvokeTask (angular.vendor.js:3347)
at ZoneDelegate.invokeTask (angular.vendor.js:24572)
at Zone.runTask (angular.vendor.js:24488)
at drainMicroTaskQueue (angular.vendor.js:24699)
at XMLHttpRequest.ZoneTask.invoke (angular.vendor.js:24639)ErrorHandler.handleError @ angular.vendor.js:2723next @ angular.vendor.js:3586schedulerFn @ angular.vendor.js:3341SafeSubscriber.__tryOrUnsub @ angular.vendor.js:4971SafeSubscriber.next @ angular.vendor.js:4926Subscriber._next @ angular.vendor.js:4880Subscriber.next @ angular.vendor.js:4844Subject.next @ angular.vendor.js:4451EventEmitter.emit @ angular.vendor.js:3341onError @ angular.vendor.js:3421onHandleError @ angular.vendor.js:3349ZoneDelegate.handleError @ angular.vendor.js:24550Zone.runGuarded @ angular.vendor.js:24468_loop_1 @ angular.vendor.js:24709drainMicroTaskQueue @ angular.vendor.js:24717ZoneTask.invoke @ angular.vendor.js:24639
vendor.js:
//Polyfill
import '../node_modules/core-js';
import '../node_modules/zone.js';
import '../node_modules/reflect-metadata';
import '../node_modules/system';
//Dependencies
import '../node_modules/rxjs';
// Core
import '../node_modules/@angular/platform-browser';
import '../node_modules/@angular/platform-browser-dynamic';
import '../node_modules/@angular/forms';
import '../node_modules/@angular/http';
import '../node_modules/@angular/router';
import '../node_modules/@angular/core';
import '../node_modules/@angular/common';
import '../node_modules/@angular/compiler';
//jQuery
import '../node_modules/jquery';
//Bootstrap
import '../node_modules/bootstrap';
//Bootstrap sidebar
import '../node_modules/bootstrap-layout';
//Bootstrap slider
import '../node_modules/bootstrap-slider';
app.js:
import { platformBrowserDynamic } from '../node_modules/@angular/platform-browser-dynamic';
import { AppModule } from "./modules/app.module";
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
app.module.js:
import { BrowserModule } from '../../node_modules/@angular/platform-browser';
import { FormsModule } from '../../node_modules/@angular/forms';
import { HttpModule } from '../../node_modules/@angular/http';
import { RouterModule } from '../../node_modules/@angular/router';
import { NgModule } from '../../node_modules/@angular/core';
import { AppComponent, NwComponent, LoessComponent } from '../components';
import { routes } from '../routes';
export let AppModule = NgModule({
imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes) ],
declarations: [ AppComponent, NwComponent, LoessComponent ],
bootstrap: [ AppComponent ]
}).Class({
constructor() {
console.log("Module started");
}
});
routes/app.routes.js:
import { provideRoutes } from '../../node_modules/@angular/router'
import { AppComponent, LoessComponent, NwComponent } from '../components';
export let routes = [
{ path: 'loess', component: LoessComponent },
{ path: 'nw', component: NwComponent },
{ path: '', component: AppComponent }, // default route
{ path: '**', redirectTo: '/home', pathMatch: 'full' } // 404
];
export let routesProvider = [
provideRoutes(routes)
];
components/app/app.component.js:
import '../../../node_modules/jquery';
import { Component, Inject } from '../../../node_modules/@angular/core';
import { BootstrapLayout, sidebar } from '../../../node_modules/bootstrap-layout';
import { ROUTER_DIRECTIVES } from '../../../node_modules/@angular/router';
export let AppComponent =
Component({
selector: 'ml-index',
templateUrl: '/client/js/src/components/app/app.html',
})
.Class({
constructor() {
this.title = "App Component";
console.log("AppComponent init");
sidebar.init('#ml-sidebar');
}
});
app.html:
<h1>{{title}}</h1>
<router-outlet></router-outlet>
我也用webpack@1.13.2。这是配置文件:
var webpack = require("./node_modules/webpack");
var HtmlWebpackPlugin = require("./node_modules/html-webpack-plugin")
module.exports = {
context: __dirname,
entry: {
app: './src/app.js',
vendor: './src/vendor.js'
},
module: {
loaders: [
{ test: /\.js$/ , loader: 'babel-loader' },
{ test: /\.css$/, loaders: ['style-loader','css-loader','resolve-url'] },
{ test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader : 'file?name=assets/[name].[hash].[ext]'},
{ test: /\.html$/, loader: 'html' },
]
},
output: {
path: __dirname+'/bundle',
filename: 'angular.[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: '../index.html'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
]
};
P.S: 在提供下面的工作解决方案后,出现了另一个错误:Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
.
这里是堆栈跟踪描述:
ErrorHandler.handleError @ angular.vendor.js:2723
next @ angular.vendor.js:3586
schedulerFn @ angular.vendor.js:3341
SafeSubscriber.__tryOrUnsub @ angular.vendor.js:4971
SafeSubscriber.next @ angular.vendor.js:4926
Subscriber._next @ angular.vendor.js:4880
Subscriber.next @ angular.vendor.js:4844
Subject.next @ angular.vendor.js:4451
EventEmitter.emit @ angular.vendor.js:3341
onError @ angular.vendor.js:3421
onHandleError @ angular.vendor.js:3349
ZoneDelegate.handleError @ angular.vendor.js:24550
Zone.runGuarded @ angular.vendor.js:24468
_loop_1 @ angular.vendor.js:24709
drainMicroTaskQueue @ angular.vendor.js:24717
ZoneTask.invoke @ angular.vendor.js:24639
2016-10-16 00:04:40.401
我解决了。对不起,是我的错。该错误是由 app.html.
中的路由语法无效引起的
这是因为路径 '' 映射到 AppComponent。
同线
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
- 您告诉 Angular 在应用程序启动时呈现 AppComponent。
- AppComponent 启动并检查当前路由。
- 找到“”作为当前路由并在“”路由中加载 AppComponent。因此创建另一个 AppComponent 并将其加载到路由器出口。
解决方案:
创建类似 HomePageComponent 的东西并将其映射到“”路由。
这里是 angular 2 js(ES2015) 项目的结构:
src
├── app.js
├── components
│ ├── app
│ ├── index.js
│ ├── list
│ ├── loess
│ └── nw
├── modules
│ ├── app.module.js
│ └── index.js
├── routes
│ ├── app.routes.js
│ └── index.js
└── vendor.js
我不知道如何使用路由器插座标签。当我在根组件模板中使用它时,该标签使该组件本身呈现两次,以替换路由器插座标签。对不起重言式。
除此之外,我还有错误:
Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
这是带有呈现内容的 image。
这是原始堆栈跟踪:
angular.vendor.js:2723ORIGINAL STACKTRACE:ErrorHandler.handleError @ angular.vendor.js:2723next @ angular.vendor.js:3586schedulerFn @ angular.vendor.js:3341SafeSubscriber.__tryOrUnsub @ angular.vendor.js:4971SafeSubscriber.next @ angular.vendor.js:4926Subscriber._next @ angular.vendor.js:4880Subscriber.next @ angular.vendor.js:4844Subject.next @ angular.vendor.js:4451EventEmitter.emit @ angular.vendor.js:3341onError @ angular.vendor.js:3421onHandleError @ angular.vendor.js:3349ZoneDelegate.handleError @ angular.vendor.js:24550Zone.runGuarded @ angular.vendor.js:24468_loop_1 @ angular.vendor.js:24709drainMicroTaskQueue @ angular.vendor.js:24717ZoneTask.invoke @ angular.vendor.js:24639
2016-10-15 22:29:01.285 angular.vendor.js:2723Error: Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
at resolvePromise (angular.vendor.js:24762)
at angular.vendor.js:24796
at ZoneDelegate.invokeTask (angular.vendor.js:24572)
at Object.onInvokeTask (angular.vendor.js:3347)
at ZoneDelegate.invokeTask (angular.vendor.js:24572)
at Zone.runTask (angular.vendor.js:24488)
at drainMicroTaskQueue (angular.vendor.js:24699)
at XMLHttpRequest.ZoneTask.invoke (angular.vendor.js:24639)ErrorHandler.handleError @ angular.vendor.js:2723next @ angular.vendor.js:3586schedulerFn @ angular.vendor.js:3341SafeSubscriber.__tryOrUnsub @ angular.vendor.js:4971SafeSubscriber.next @ angular.vendor.js:4926Subscriber._next @ angular.vendor.js:4880Subscriber.next @ angular.vendor.js:4844Subject.next @ angular.vendor.js:4451EventEmitter.emit @ angular.vendor.js:3341onError @ angular.vendor.js:3421onHandleError @ angular.vendor.js:3349ZoneDelegate.handleError @ angular.vendor.js:24550Zone.runGuarded @ angular.vendor.js:24468_loop_1 @ angular.vendor.js:24709drainMicroTaskQueue @ angular.vendor.js:24717ZoneTask.invoke @ angular.vendor.js:24639
vendor.js:
//Polyfill
import '../node_modules/core-js';
import '../node_modules/zone.js';
import '../node_modules/reflect-metadata';
import '../node_modules/system';
//Dependencies
import '../node_modules/rxjs';
// Core
import '../node_modules/@angular/platform-browser';
import '../node_modules/@angular/platform-browser-dynamic';
import '../node_modules/@angular/forms';
import '../node_modules/@angular/http';
import '../node_modules/@angular/router';
import '../node_modules/@angular/core';
import '../node_modules/@angular/common';
import '../node_modules/@angular/compiler';
//jQuery
import '../node_modules/jquery';
//Bootstrap
import '../node_modules/bootstrap';
//Bootstrap sidebar
import '../node_modules/bootstrap-layout';
//Bootstrap slider
import '../node_modules/bootstrap-slider';
app.js:
import { platformBrowserDynamic } from '../node_modules/@angular/platform-browser-dynamic';
import { AppModule } from "./modules/app.module";
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
app.module.js:
import { BrowserModule } from '../../node_modules/@angular/platform-browser';
import { FormsModule } from '../../node_modules/@angular/forms';
import { HttpModule } from '../../node_modules/@angular/http';
import { RouterModule } from '../../node_modules/@angular/router';
import { NgModule } from '../../node_modules/@angular/core';
import { AppComponent, NwComponent, LoessComponent } from '../components';
import { routes } from '../routes';
export let AppModule = NgModule({
imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes) ],
declarations: [ AppComponent, NwComponent, LoessComponent ],
bootstrap: [ AppComponent ]
}).Class({
constructor() {
console.log("Module started");
}
});
routes/app.routes.js:
import { provideRoutes } from '../../node_modules/@angular/router'
import { AppComponent, LoessComponent, NwComponent } from '../components';
export let routes = [
{ path: 'loess', component: LoessComponent },
{ path: 'nw', component: NwComponent },
{ path: '', component: AppComponent }, // default route
{ path: '**', redirectTo: '/home', pathMatch: 'full' } // 404
];
export let routesProvider = [
provideRoutes(routes)
];
components/app/app.component.js:
import '../../../node_modules/jquery';
import { Component, Inject } from '../../../node_modules/@angular/core';
import { BootstrapLayout, sidebar } from '../../../node_modules/bootstrap-layout';
import { ROUTER_DIRECTIVES } from '../../../node_modules/@angular/router';
export let AppComponent =
Component({
selector: 'ml-index',
templateUrl: '/client/js/src/components/app/app.html',
})
.Class({
constructor() {
this.title = "App Component";
console.log("AppComponent init");
sidebar.init('#ml-sidebar');
}
});
app.html:
<h1>{{title}}</h1>
<router-outlet></router-outlet>
我也用webpack@1.13.2。这是配置文件:
var webpack = require("./node_modules/webpack");
var HtmlWebpackPlugin = require("./node_modules/html-webpack-plugin")
module.exports = {
context: __dirname,
entry: {
app: './src/app.js',
vendor: './src/vendor.js'
},
module: {
loaders: [
{ test: /\.js$/ , loader: 'babel-loader' },
{ test: /\.css$/, loaders: ['style-loader','css-loader','resolve-url'] },
{ test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader : 'file?name=assets/[name].[hash].[ext]'},
{ test: /\.html$/, loader: 'html' },
]
},
output: {
path: __dirname+'/bundle',
filename: 'angular.[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: '../index.html'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
]
};
P.S: 在提供下面的工作解决方案后,出现了另一个错误:Uncaught (in promise): SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
.
这里是堆栈跟踪描述:
ErrorHandler.handleError @ angular.vendor.js:2723
next @ angular.vendor.js:3586
schedulerFn @ angular.vendor.js:3341
SafeSubscriber.__tryOrUnsub @ angular.vendor.js:4971
SafeSubscriber.next @ angular.vendor.js:4926
Subscriber._next @ angular.vendor.js:4880
Subscriber.next @ angular.vendor.js:4844
Subject.next @ angular.vendor.js:4451
EventEmitter.emit @ angular.vendor.js:3341
onError @ angular.vendor.js:3421
onHandleError @ angular.vendor.js:3349
ZoneDelegate.handleError @ angular.vendor.js:24550
Zone.runGuarded @ angular.vendor.js:24468
_loop_1 @ angular.vendor.js:24709
drainMicroTaskQueue @ angular.vendor.js:24717
ZoneTask.invoke @ angular.vendor.js:24639
2016-10-16 00:04:40.401
我解决了。对不起,是我的错。该错误是由 app.html.
中的路由语法无效引起的这是因为路径 '' 映射到 AppComponent。
同线
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
- 您告诉 Angular 在应用程序启动时呈现 AppComponent。
- AppComponent 启动并检查当前路由。
- 找到“”作为当前路由并在“”路由中加载 AppComponent。因此创建另一个 AppComponent 并将其加载到路由器出口。
解决方案:
创建类似 HomePageComponent 的东西并将其映射到“”路由。