如何與Angular2 Web應用程序和Webpack一起使用共享的angular 2組件？

Question

我試圖通過將共享的angular-2組件復制到另一個angular-2 Web項目的node_modules文件夾中來使用它們。 不幸的是，它不起作用。

您可以在Ng2-Webpack-Webpack上看到整個項目

問題場景如下

我有兩個項目Angular2Spa和Angular2-CDN。

Angular2-CDN具有共享的角度組件和防護裝置等。

目前，我已經實現了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 Web應用程序中，而無需將它們復制到Node_modules中？ 或如何解決此共享組件問題？

您的幫助和建議將不勝感激！

謝謝。

Answer 1

是的，還有另一種方法npm link 。 而不是復制和粘貼使用npm鏈接將一個項目綁定到另一個。 Google npm鏈接並遵循文檔，您將在此找到所需的內容。