如何获得有效的Angular 7 systemjs.config.js（如文章Setting Up Angular from Scratch和updated systemjs.config.js version for Angular 6所述）。
我需要这样做，以便能够像在Angular 2的种子play-angular-typescript.g8中一样在我的Scala Play应用程序中集成Angular 7 UI组件。请在index.scala.html中查看Scala Play视图与Angular 2罪魁祸首的集成。
@()
<!doctype html>
<html lang="en" data-framework="angular2">
<head>
<base href="/" />
@* In this version of the application the typescript compilation is done by the play framework.
The browser downloads .js files. *@
<meta charset="utf-8">
<title>Angular Tour of Heroes</title>
<link rel="stylesheet" href="assets/stylesheets/styles.css">
<script type='text/javascript' src='@routes.Assets.versioned("lib/core-js/client/shim.min.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("lib/zone.js/dist/zone.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("lib/systemjs/dist/system.src.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("systemjs.config.js")'></script>
@* our app is downloaded as individual javascript files by SystemJs after compilation by sbt-typescript*@
<script>
System.import('assets/app/main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-root>Loading...</my-root>
</body>
</html>
这是允许将Angular 2加载到Scala视图中的
systemjs.config.js：/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'assets/lib/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'assets/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',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'assets/systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
我想将现有的Scala Play应用作为主要的MVC，并仅在某些Play视图中使用Angular 7组件。
最佳答案
这是Angular 7的示例systemjs.config.js。
https://github.com/Longfld/ASPNETcoreAngularJWT/blob/master/wwwroot/systemjs.config.js
(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/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
//material
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
'@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
'@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
'@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
'@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
'@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
'@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
'@angular/cdk/accordion' : 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
'@angular/cdk/layout' : 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
'@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
'@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
'@angular/cdk/text-field': 'npm:@angular/cdk/bundles/cdk-text-field.umd.js',
'@angular/cdk/tree': 'npm:@angular/cdk/bundles/cdk-tree.umd.js',
'@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'rxjs-compat': 'npm:rxjs-compat',
'rxjs-system-bundle': 'npm:rxjs-system-bundle',
'hammerjs': 'npm:hammerjs',
'tslib': 'npm:tslib/tslib.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {main: './main.js',defaultExtension: 'js'},
'rxjs': {main: 'index.js', defaultExtension: 'js'},
'rxjs/operators': {main: 'index.js', defaultExtension: 'js'},
hammerjs: { main: './hammer.js', defaultExtension: 'js'}
}
});
})(this);
关于javascript - Angular 7:什么是更新的systemjs.config.js？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56568606/