如何为多个应用程序捆绑可重复使用的角度2组件？

2019年7月20日 185次阅读

我想创建一个可重用的组件,我可以捆绑到一个单独的js文件,并与不同的角度2应用程序共享.但是,我不断收到错误：(SystemJS)模块’AppModule’声明的意外值’undefined’

我用gulp来构建我的包.输出如下所示：

build/pkg/basic.js (this is my reusable package)
build/app/main.js (this is one test app trying to use the package)
build/app/app.module.js
build/app/app.component.js
build/systemjs.config.js
build.index.html

我知道pkg / basic.js确实是通过网页下载的(我可以在dev工具中看到该文件).

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts

import { BasicComponent } from 'basic/basic.component';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, BasicComponent],
  bootstrap:    [ AppComponent, BasicComponent]
})
export class AppModule { }

app.component.ts

import { BasicComponent }   from 'basic/basic.component';
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1><basic></basic>' 
})
export class AppComponent { }

basic.component.ts(我的可重用组件包)

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

@Component({
  selector: 'basic',
  template: 'HI BASIC'
})
export class BasicComponent { }

systemjs.config.js

function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'lib/',
            'pkg:': 'pkg/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',

            //pkg
            'basic/basic.component': 'pkg:basic.js',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'basic/basic.component': {
                defaultExtension: 'js'
            },
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

的index.html

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="lib/core-js/client/shim.min.js"></script>

    <script src="lib/zone.js/dist/zone.js"></script>
    <script src="lib/reflect-metadata/Reflect.js"></script>
    <script src="lib/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <div style="float:left">
        <my-app>Loading...</my-app>
    </div>

  </body>
</html>

我的gulpfile的关键部分

gulp.task("app:compile", [], () => {
    let tsResult = gulp.src(["src/**/*.ts", "!src/basic/**/*.ts"])
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject))
        .pipe(sourcemaps.write(".", {sourceRoot: '/src'}))
        .pipe(gulp.dest("build"));
});

gulp.task("pkg:basic:compile", [], () => {
    let tsResult = gulp.src("src/basic/**/*.ts")
        .pipe(sourcemaps.init())
        .pipe(inlineNg2Template())
        .pipe(tsc({
            typescript: require('typescript'), // In my package.json I have "typescript": "~1.8.0-dev.20151128"
            target: 'ES5',
            module: 'System',
            experimentalDecorators: true,
            emitDecoratorMetadata: true,
            outFile: 'basic.js',
            "rootDir": "./src",
             "outDir": "./build",
            moduleResolution: "node",
        }))
        .pipe(sourcemaps.write(".", {sourceRoot: '/src'}))
        .pipe(gulp.dest("build/pkg"));
});

/**
 * Copy all resources that are not TypeScript files into build directory.
 */
gulp.task("resources", () => {
    return gulp.src(["src/**/*", "!**/*.ts"])
        .pipe(gulp.dest("build"));
});

/**
 * Copy all required libraries into build directory.
 */
gulp.task("libs", () => {
    return gulp.src([
            'core-js/client/shim.min.js',
            'systemjs/dist/system-polyfills.js',
            'systemjs/dist/system.src.js',
            'reflect-metadata/Reflect.js',
            'rxjs/**',
            'zone.js/dist/**',
            '@angular/**',
            'q/q.js',
            'aws-sdk/dist/aws-sdk.min.js'
        ], {cwd: "node_modules/**"}) /* Glob required here. */
        .pipe(gulp.dest("build/lib"));
});

gulp.task("static", () => {
    return gulp.src([
            'systemjs.config.js'
        ]) /* Glob required here. */
        .pipe(gulp.dest("build"));
});

/**
 * Build the project.
 */
gulp.task("build", ['app:compile', 'pkg:basic:compile','resources', 'libs', 'static'], () => {
    console.log("Building the project ...");
});

最佳答案 本文中发布了一种创建可重用库的方法

How to create an Angular 2 component library, and how to consume it using SystemJs or Webpack.示例git存储库是
here.我能够使用此示例重新实现上面的方法.

点赞