【问题标题】:Angular 7: What's the updated systemjs.config.js?Angular 7:更新的 systemjs.config.js 是什么?
【发布时间】:2019-10-27 08:18:18
【问题描述】:

如何获得有效的 Angular 7 systemjs.config.js,详见文章:Setting Up Angular from Scratchupdated systemjs.config.js version for Angular 6

我需要它才能将 Angular 7 UI 组件集成到我的 Scala Play 应用程序中,就像在 Angular 2 的种子 play-angular-typescript.g8 中所做的那样。请参阅 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>

这是systemjs.config.js,它允许将 Angular 2 加载到 Scala 视图中:

/**
 * 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 组件。

【问题讨论】:

    标签: javascript angular playframework angular7


    【解决方案1】:

    这是 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);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2023-03-13
      • 2019-10-27
      • 1970-01-01
      • 1970-01-01
      • 2019-11-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多