[英]systemjs-builder with angular2. Module not found?
我已經使用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 wich 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>
主要
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 { }
應用程序路由
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);
這顯然是systemjs-builder中的錯誤。 https://github.com/systemjs/builder/issues/728
解決方法是在所有import語句中添加“ .js”。 例如從'./app.module'導入{AppModule}; 需要從'./app.module.js'導入{AppModule};
這個解決方案對我有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.