Angular 2最终发布路由问题

我对Angular 2最终发布路线有一些问题。在子组件中添加[routerLink]时，会发生以下错误：

Can't bind to 'routerLink' since it isn't a known property of 'button'

这是我的树：

app
|
|___ app.routes.ts
|___ app.module.ts
|
|___ user
|_______ user.routes.ts
|_______ user.module.ts
|_______ user.component.ts
|
|_______ login
|____________ login.module.ts
|____________ login.component.html
|____________ login.component.ts

现在文件的内容是：

应用程序路由.ts

import { Routes } from '@angular/router';

import { UserRoutes } from './user/user.component';

export const routes: Routes = [
  ...UserRoutes
];

import { APP_BASE_HREF }  from '@angular/common';

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { RouterModule }         from '@angular/router';
import { HttpModule }           from '@angular/http';

import { AppComponent }         from './app.component';
import { routes }               from './app.routes';

// Modules
import { UserModule }           from './user/user.module';


@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), UserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },

  ],
  bootstrap: [AppComponent]

})

export class AppModule { }

import { Route }                from '@angular/router';

import { UserComponent }        from './user.component';
import { LoginComponent }       from './login/login.component';



export const UserRoutes: Route[] = [
    {
        path: '',
        component: UserComponent,
        children: [
            {
                path: 'login',
                component: LoginComponent
            }
        ]
    }
];

import { NgModule }                     from '@angular/core';
import { CommonModule }                 from '@angular/common';
import { RouterModule }                 from '@angular/router';

import { UserComponent }                from './user.component';

import { LoginModule }                  from './login/login.module';



@NgModule({
    imports: [CommonModule, RouterModule, LoginModule],
    declarations: [UserComponent],
    exports: [UserComponent]
})

export class UserModule { }

import { Component } from '@angular/core';

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<router-outlet></router-outlet>',
})
export class UserComponent { }

import { NgModule }             from '@angular/core';
import { CommonModule }         from '@angular/common';
import { ReactiveFormsModule }  from '@angular/forms';
import { LoginComponent }       from './login.component';


@NgModule({
    imports: [CommonModule, ReactiveFormsModule],
    declarations: [LoginComponent],
    exports: [LoginComponent]
})

export class LoginModule { }

应用程序模块.ts

import { Routes } from '@angular/router';

import { UserRoutes } from './user/user.component';

export const routes: Routes = [
  ...UserRoutes
];

import { APP_BASE_HREF }  from '@angular/common';

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { RouterModule }         from '@angular/router';
import { HttpModule }           from '@angular/http';

import { AppComponent }         from './app.component';
import { routes }               from './app.routes';

// Modules
import { UserModule }           from './user/user.module';


@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), UserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },

  ],
  bootstrap: [AppComponent]

})

export class AppModule { }

import { Route }                from '@angular/router';

import { UserComponent }        from './user.component';
import { LoginComponent }       from './login/login.component';



export const UserRoutes: Route[] = [
    {
        path: '',
        component: UserComponent,
        children: [
            {
                path: 'login',
                component: LoginComponent
            }
        ]
    }
];

import { NgModule }                     from '@angular/core';
import { CommonModule }                 from '@angular/common';
import { RouterModule }                 from '@angular/router';

import { UserComponent }                from './user.component';

import { LoginModule }                  from './login/login.module';



@NgModule({
    imports: [CommonModule, RouterModule, LoginModule],
    declarations: [UserComponent],
    exports: [UserComponent]
})

export class UserModule { }

import { Component } from '@angular/core';

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<router-outlet></router-outlet>',
})
export class UserComponent { }

import { NgModule }             from '@angular/core';
import { CommonModule }         from '@angular/common';
import { ReactiveFormsModule }  from '@angular/forms';
import { LoginComponent }       from './login.component';


@NgModule({
    imports: [CommonModule, ReactiveFormsModule],
    declarations: [LoginComponent],
    exports: [LoginComponent]
})

export class LoginModule { }

user.module.ts

import { Routes } from '@angular/router';

import { UserRoutes } from './user/user.component';

export const routes: Routes = [
  ...UserRoutes
];

import { APP_BASE_HREF }  from '@angular/common';

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { RouterModule }         from '@angular/router';
import { HttpModule }           from '@angular/http';

import { AppComponent }         from './app.component';
import { routes }               from './app.routes';

// Modules
import { UserModule }           from './user/user.module';


@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), UserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },

  ],
  bootstrap: [AppComponent]

})

export class AppModule { }

import { Route }                from '@angular/router';

import { UserComponent }        from './user.component';
import { LoginComponent }       from './login/login.component';



export const UserRoutes: Route[] = [
    {
        path: '',
        component: UserComponent,
        children: [
            {
                path: 'login',
                component: LoginComponent
            }
        ]
    }
];

import { NgModule }                     from '@angular/core';
import { CommonModule }                 from '@angular/common';
import { RouterModule }                 from '@angular/router';

import { UserComponent }                from './user.component';

import { LoginModule }                  from './login/login.module';



@NgModule({
    imports: [CommonModule, RouterModule, LoginModule],
    declarations: [UserComponent],
    exports: [UserComponent]
})

export class UserModule { }

import { Component } from '@angular/core';

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<router-outlet></router-outlet>',
})
export class UserComponent { }

import { NgModule }             from '@angular/core';
import { CommonModule }         from '@angular/common';
import { ReactiveFormsModule }  from '@angular/forms';
import { LoginComponent }       from './login.component';


@NgModule({
    imports: [CommonModule, ReactiveFormsModule],
    declarations: [LoginComponent],
    exports: [LoginComponent]
})

export class LoginModule { }

user.component.ts

import { Routes } from '@angular/router';

import { UserRoutes } from './user/user.component';

export const routes: Routes = [
  ...UserRoutes
];

import { APP_BASE_HREF }  from '@angular/common';

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { RouterModule }         from '@angular/router';
import { HttpModule }           from '@angular/http';

import { AppComponent }         from './app.component';
import { routes }               from './app.routes';

// Modules
import { UserModule }           from './user/user.module';


@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), UserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },

  ],
  bootstrap: [AppComponent]

})

export class AppModule { }

import { Route }                from '@angular/router';

import { UserComponent }        from './user.component';
import { LoginComponent }       from './login/login.component';



export const UserRoutes: Route[] = [
    {
        path: '',
        component: UserComponent,
        children: [
            {
                path: 'login',
                component: LoginComponent
            }
        ]
    }
];

import { NgModule }                     from '@angular/core';
import { CommonModule }                 from '@angular/common';
import { RouterModule }                 from '@angular/router';

import { UserComponent }                from './user.component';

import { LoginModule }                  from './login/login.module';



@NgModule({
    imports: [CommonModule, RouterModule, LoginModule],
    declarations: [UserComponent],
    exports: [UserComponent]
})

export class UserModule { }

import { Component } from '@angular/core';

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<router-outlet></router-outlet>',
})
export class UserComponent { }

import { NgModule }             from '@angular/core';
import { CommonModule }         from '@angular/common';
import { ReactiveFormsModule }  from '@angular/forms';
import { LoginComponent }       from './login.component';


@NgModule({
    imports: [CommonModule, ReactiveFormsModule],
    declarations: [LoginComponent],
    exports: [LoginComponent]
})

export class LoginModule { }

login.component.html

<button [routerLink]="['/']">Back home</button>

回家

在login.component.html上，如果我删除该按钮，则一切正常。 此外，如果我在user.component.ts中添加按钮，它会工作：

import { Component } from '@angular/core';

/**
 * This class represents the lazy loaded UserComponent.
 */
@Component({
    selector: 'user',
    template: '<button [routerLink]="[\'/\']">Back home</button>',
})
export class UserComponent { }

从'@angular/core'导入{Component}；
/**
*此类表示延迟加载的UserComponent。
*/
@组成部分({
选择器：“用户”，
模板：“回家”，
})
导出类UserComponent{}

指令、组件和管道不会被父模块继承到子模块中。您还需要将任何必需的模块导入子模块。在

LoginModule

中，您从未导入

RouterModule