Question

我正在尝试使用共享的angular-2组件，将它们复制到另一个angular-2 web项目的node_modules文件夹中。不幸的是，它没有用。

查看整个项目

问题场景如下，

我有两个Project，Angular2Spa和Angular2-CDN。

Angular2-CDN共享角度组件和守卫等。

目前，我已经实现了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时出现问题。

导航到Counter（查看）时，它失败并抛出错误

没有AuthGuard提供商！

我的查询是，

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

您的帮助和建议将非常值得赞赏！

感谢。

Answer 1

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

如何使用共享角度2组件以及Angular2 Web应用程序和webpack？

1 个答案: