systemjs-builder 与 angular2。找不到模块？

Question

我已经使用 systemjs 创建了我的应用程序......一切正常。 现在我想创建一个捆绑文件，但由于某种原因我的应用程序将我的模块作为单独的 http 请求请求？ 我认为它应该全部包含在我的bundle.js 文件中？ 不确定我是否设置错误？

我的应用程序存储在我的应用程序根目录（asp.net 5 项目）的 wwwroot/app 文件夹中。

我使用 gulp 将 .ts 文件转换为 .js 并将它们放入 wwwroot/dist/app 中。 然后我将所有这些 .js 文件转换为我的bundle.js，然后将其存储在 wwwroot/dist/bundle.js 中

现在，当我执行页面时，我的bundle.js文件被加载，.html文件被请求（如预期），但请求是针对public.module？ 我有一种感觉，这与 app.routing.ts 文件中的这一行有关

 loadChildren: 'app/public.module'

模块是动态加载的..

我检查了我的bundle.js 文件，没有包含

PublicModule

的参考？ 为什么？

systemjs.config.js

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                          'app', // 'dist',
        '@angular':                     'node_modules/@angular',
        'rxjs':                         'node_modules/rxjs',
        'angular2-tree-component':      'node_modules/angular2-tree-component',
        'lodash':                       'node_modules/lodash',
        'ng2-bootstrap':                'node_modules/ng2-bootstrap',
        'ng2-ckeditor':                 'node_modules/ng2-ckeditor',
        'ng2-file-upload':              'node_modules/ng2-file-upload',
        'ng2-dnd':                      'node_modules/ng2-dnd'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                      { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                     { defaultExtension: 'js' },
        'angular2-tree-component' : { main: 'dist/angular2-tree-component.js', defaultExtension: 'js' },
        'lodash' :                  { main: 'lodash.js', defaultExtension: 'js' },
        'ng2-bootstrap' :           { defaultExtension: 'js' },
        'ng2-ckeditor' :            { main: 'lib/CKEditor.js', defaultExtension: 'js' },
        'ng2-file-upload' :         { main: 'ng2-file-upload.js', defaultExtension: 'js' },
        'ng2-dnd':                  { main: 'index.js', defaultExtension: 'js'}
    };

    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'upgrade'
    ];

    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }

    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }

    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);

    System.config({
        defaultJSExtensions: true,
        map: map,
        packages: packages
    });
})(this);

gulpfile.js

var gulp = require('gulp'),
    path = require('path'),
    Builder = require('systemjs-builder'),
    ts = require('gulp-typescript'),
    sourcemaps  = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css');

var tsProject = ts.createProject('tsconfig.json');

// copy library files
gulp.task('copy:libs', function() {
    gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/ckeditor/ckeditor.js'
    ]).pipe(gulp.dest('wwwroot/dist/lib'));

    return gulp.src('node_modules/font-awesome/**/*', { base: 'node_modules' })
        .pipe(gulp.dest('wwwroot/dist/lib'));
});

/** first transpile your ts files */
gulp.task('ts', function() {
    return gulp.src('wwwroot/app/**/*.ts')
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(ts(tsProject))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('wwwroot/dist/app'));
});

/** then bundle */
gulp.task('bundle', ['ts'], function() {
    // optional constructor options
    // sets the baseURL and loads the configuration file
    var builder = new Builder('', 'systemjs.config.js');

    /*
     the parameters of the below buildStatic() method are:
     - your transcompiled application boot file (the one which would contain the bootstrap(MyApp, [PROVIDERS]) function - in my case 'dist/app/boot.js'
     - the output (file into which it would output the bundled code)
     - options {}
     */
    return builder.buildStatic('wwwroot/dist/app/*.js', 'wwwroot/dist/bundle.js', { minify: false, sourceMaps: true})
        .then(function() {
            console.log('Build complete');
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
});

// create css file
gulp.task('css', function () {
    return gulp.src('wwwroot/sass/app.scss')
        .pipe(sass())
        .pipe(concat('app.css'))
        .pipe(gulp.dest('wwwroot/dist/css'))
        .pipe(cleanCSS())
        .pipe(rename('app.min.css'))
        .pipe(gulp.dest('wwwroot/dist/css'));
});

/** this runs the above in order. uses gulp4 */
gulp.task('build', ['ts', 'bundle', 'copy:libs']);

index.html

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="shortcut icon" type="image/x-icon" href="@Html.Raw(ViewBag.BaseUrl)favicon.ico" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" type="text/css" />
    <link href="~/dist/css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="~/dist/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- 1. Load libraries -->
    <script src="~/dist/lib/ckeditor.js"></script>
    <!-- Polyfill(s) for older browsers -->
    <script src="~/dist/lib/shim.min.js"></script>
    <script src="~/dist/lib/zone.js"></script>
    <script src="~/dist/lib/reflect.js"></script>
    <script src="~/dist/lib/system.src.js"></script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>

    <script src="~/dist/bundle.js"></script>
</body>
</html>

main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CollapseModule } from 'ng2-bootstrap/components/collapse';

import { routing } from './app.routing';
import { AppComponent }  from './app.component';
import { PublicComponent } from './public.component';
import { ProtectedComponent } from './protected.component';

@NgModule({
    imports:        [ BrowserModule, FormsModule, HttpModule, routing, CollapseModule ],
    declarations:   [ AppComponent, PublicComponent, ProtectedComponent ],
    bootstrap:      [ AppComponent ]
})

export class AppModule { }

app.routing.ts

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

// public
import { PublicComponent } from './public.component';
import { ProtectedComponent } from './protected.component';

const appRoutes: Routes = [
    {
        path: '',
        component: PublicComponent,
        loadChildren: 'app/public.module'
    },
    {
        path: 'admin',
        component: ProtectedComponent,
        loadChildren: 'app/protected.module'
    }
];

export const routing = RouterModule.forRoot(appRoutes);

Answer 1

这看起来显然是 systemjs-builder 中的一个错误。 https://github.com/systemjs/builder/issues/728

解决方法是在所有导入语句中添加“.js”。 例如 从'./app.module'导入{AppModule}； 需要是 从 './app.module.js' 导入 { AppModule };

这个解决方案对我有用。