Angular2 rc6 - systemjs.config.js使用子文件夹/src/app
angular2 rc6 - systemjs.config.js using subfolder /src/app
在angular2快速入门页面:https://angular.io/guide/quickstart
在Angular2 rc6中,systemjs.config.js文件发生了变化。我试图将/app/accord文件夹更改为angular快速启动/src/app accord我的应用程序,所以我不确定我必须在这个文件中更改什么。我已经尝试了一些路径,但它不工作,任何人都可以解释更多关于这个文件和我如何使用路径。在这个配置中,我不关心生产或/dist,因为我只是在测试angular。我以前用的是webpack启动器或angular-cli,但新版本的angular破坏了这些包,所以我想保持简单。src/app/systemjs.config.js:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// 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',
// angular testing umd bundles
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { Configuration } from './app.constants';
import { routing } from './app.routing';
import { AccountListComponent } from './accounts/account-list/account-list.component';
import { AccountDetailComponent } from './accounts/account-detail/account-detail.component';
import { DashboardComponent } from './dashboard/';
@NgModule({
declarations: [
AppComponent,
AccountListComponent,
AccountDetailComponent,
DashboardComponent
],
imports: [
BrowserModule,
CommonModule,
FormsModule,
HttpModule,
routing
],
providers: [Configuration],
entryComponents: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
src/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
}
/src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule, environment } from './index';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
/index . html。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ng2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<base href="/">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
我找到了新的systemjs。从angular配置会更混乱一点。这就是我使用的,它工作得很好:
(function(global) {
var map = {
'app': 'src/app',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
},
packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'angular2-in-memory-web-api': {main: './index.js',defaultExtension:'js'}
'rxjs': { defaultExtension: 'js' }
},
ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'forms'
],
tests = [
'core/testing',
'common/testing',
'compiler/testing',
'platform-browser/testing',
'platform-browser-dynamic/testing',
'http/testing',
'router/testing',
'forms/testing'
];
function packUmd(pkgName) {packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' }}
ngPackageNames.forEach(packUmd);
tests.forEach(function (test) {
return packages['@angular/'+ test] = { main: '/bundles/' + test.replace(/'//, '-') + '.umd.min.js', defaultExtension: 'js' }
})
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
我认为这看起来更清晰易懂。如果你的app文件夹改变了,你唯一需要改变的是:'app': 'path-to-app/app'
要加载NodeJS
中的模块,请安装SystemJS
:
npm install systemjs
如果要编译ES模块,请按照transpiler项目页面的说明安装transpiler插件。
相关文章:
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何将乳胶配方奶粉图像保存到Asp.net中的文件夹中
- 展开和折叠文件夹
- 在ng重复循环中显示来自不同文件夹的图像
- 如何将所有JS文件连接到一个文件夹中
- 是否可以用JavaScript显示等效的文件夹对话框
- 将文件编译到dest文件夹和src文件夹
- 如何从“;dist”;文件夹中删除原型;src”;
- 将文件夹内容中的单个img src读取到HTML中
- 如何从javascript工作在c# .aspx文件,指向正确的文件夹/文件与href和src
- src和dist文件夹在NPM包中的作用
- 如何在typescript文件位于'./src'时构建输出文件夹
- Angular2 rc6 - systemjs.config.js使用子文件夹/src/app
- gulp-src忽略除一个文件夹外的所有文件夹中的文件
- src和dist文件夹的作用是什么?
- 如何从php中的不同src文件夹加载文件
- 如何从服务器上的文件夹中设置图像SRC并使用JavaScript,C#制作幻灯片
- 正则表达式将文件夹添加到所有图像src中
- Angular gulp -如何根据每个SRC文件夹拆分dist文件夹中的js文件
- 根据文件夹更改img SRC