如何使用共享的 Angular 2 组件以及 Angular 2 Web 应用程序和 webpack？

Question

我正在尝试通过将共享的 angular-2 组件复制到我的另一个 angular-2 Web 项目的 node_modules 文件夹中来使用它们。不幸的是，它不起作用。

您可以在Ng2-Webpack-Webpack查看整个项目

问题场景如下，

我有两个项目，Angular2Spa 和 Angular2-CDN。

Angular2-CDN 共享 Angular 组件和防护等。

目前，我已经实现了我的 auth.guard.ts 用于身份验证虚拟检查。

auth.guard.ts

import { Inject, Injectable }    from '@angular/core';
import { CanActivate, Router, ActivatedRoute } from '@angular/router';
import { tokenNotExpired, AuthConfig } from 'angular2-jwt';

@Injectable()
export class AuthGuard implements CanActivate {
    publicRoutes: any;

    constructor( @Inject(Router) private _router: Router,
        @Inject(ActivatedRoute) private _activatedRoute: ActivatedRoute) {

        this.publicRoutes = {
            'login': true
        };
    }

    canActivate() {
        console.log("Activated Route");

        return true;
    }
}

我正在通过 gulp 任务将此文件复制到 Angular2Spa 的 node_modules/shared 中。

gulp.file

/// <binding BeforeBuild='typescript:compile' AfterBuild='module:copy' />

var gulp = require('gulp');
var path = require('path');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

var paths = {};
paths.webroot = path.join(__dirname, 'wwwroot');
paths.app = path.join(paths.webroot, 'app');
paths.ng2App = path.join(__dirname, '..', 'Angular2Spa');
paths.ng2AppShared = path.join(paths.ng2App, 'node_modules', 'shared');

gulp.task('module:copy', function () {
    return gulp.src([
            path.join(paths.app, '**')
        ])
        .pipe(gulp.dest(paths.ng2AppShared));
});

gulp.task('typescript:compile', function () {
    var tsProject = ts.createProject({
        target: 'es5',
        moduleResolution: 'node',
        experimentalDecorators: true,
        emitDecoratorMetadata: true
    });

    return gulp.src([
        path.join(paths.app, '**/*.ts')
    ])
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.app));
});

当我想在使用 Webpack 的 Angular2Spa 项目中使用 auth.guard 时出现问题。

导航到计数器（视图）时失败并抛出错误

没有 AuthGuard 的提供者！

我的查询是，

有没有更好的方法将共享组件使用到另一个 webpack 和 Angular2 网络应用程序中而不将它们复制到 Node_modules 中？或者如何解决这个共享组件问题？

您的帮助和建议将不胜感激！

谢谢。

Answer 1

是的，还有另一种方式npm link。而不是复制和粘贴使用 npm 链接将一个项目绑定到另一个项目。谷歌 npm 链接并关注文档，你会在那里找到你要找的东西。