美文网首页javaScriptWeb前端之路让前端飞
angular 4x 路由配置 AND but '--a

angular 4x 路由配置 AND but '--a

作者: 反者道之动001 | 来源:发表于2017-07-16 18:28 被阅读328次

angular 4x 路由配置 报错后 一直改改改 没有效果,于是书生觉得代码理论上没问题了,重启了下服务,竟然没问题了。

这本来不算是问题,但是,有时候我们可能会在不是问题的问题上纠结很久。

错误代码: but '--allowJs' is not set.

错误来源: angular 4X router

上谷歌一会儿,有一个答案是 import { AppList } ...改

import * as Applist ... 

这样确实不报错了,但是问题并没有解决。

报错图:

Error message

上配置代码:

app.module.ts
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'

import { AppComponent } from './app.component'
import { ListComponent } from './list.component'
import { HomeComponent } from './home.component'

const appRoutes: Routes = [
  {
    path: 'list',
    component: ListComponent
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
]

@NgModule({
  declarations: [
    AppComponent,
    ListComponent,
    HomeComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.component.ts
import { Component } from '@angular/core';
@Component({
  template: `
    <h2>Home</h2>
    <p>Get router Home page</p>
    <button routerLink="/list">Go to List</button>
  `
})
export class HomeComponent { }
list.component.ts
import { Component } from '@angular/core';
@Component({
  template: `
    <h2>List</h2>
    <p>Get router list page</p>
    <button routerLink="/">Go to home</button>
  `
})
export class ListComponent { }

效果:

home list

OK

附上angular中文路由链接: https://www.angular.cn/docs/ts/latest/guide/router.html

--END--

相关文章

  • angular 4x 路由配置 AND but '--a

    angular 4x 路由配置 报错后 一直改改改 没有效果,于是书生觉得代码理论上没问题了,重启了下服务,竟然没...

  • Augular 路由

    ### 路由配置 ``` import { NgModule } from '@angular/core'; im...

  • angular2:路由器的使用

    Angular路由器是一个可选的外部Angular ngModule,通过配置和使用路由器,页面可以根据url来切...

  • angular 路由配置

    1.路由配置 创建两个组件 在app-routing.modult.ts中配一个空路由 在做路由配置时path属性...

  • 面试知识6Angular(模拟面试)

    一:angular路由实现原理 ng-route:主要是通过$routeProvider(配置路由的映射)搭配ng...

  • angular路由

    写在前面:请注意这里是angular1.0的路由配置。 最近脑抽,好多东西都想不起来了……比如angular路由。...

  • angular 路由 ui-router

    UI-router 安装:npm install --save angular-ui-router 配置路由状态 ...

  • angular2:路由参数的传递和接收

    首先回顾一下如何配置路由: import { RouterModule } from '@angular/rout...

  • angular配置路由(二)

    一:在已存在的项目中配置路由:1,新建TS文件,命名为app-routing。 2,在当前目录下新建三个不同的组件...

  • angular配置路由(一)

    在新项目中:1,新建项目1.1:ng g demo--routing (带路由的项目),然后新建几个组件,用于后面...

网友评论

    本文标题:angular 4x 路由配置 AND but '--a

    本文链接:https://www.haomeiwen.com/subject/emqxkxtx.html