Angular 4 的平均堆栈不起作用答案

【问题标题】：Mean stack with Angular 4 is not workingAngular 4 的平均堆栈不起作用
【发布时间】：2017-10-06 07:51:40
【问题描述】：

我正在尝试使用具有流动文件结构的 Angular 4 创建一个平均堆栈应用程序：

我正在关注本书MEAN Web Development - Second Edition，该示例位于GitHub。

我只是将 Angular 2 代码库替换为 Angular 4 代码库。

index.ejs：

<!DOCTYPE html>
    <html>
       <head>
        <title></title>
        <base href="/">
        <link rel='stylesheet' href='stylesheets/style.css' />
        <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
        <!-- Polyfill(s) for older browsers -->
        <script src="lib/core-js/client/shim.min.js"></script>
        <script src="lib/zone.js/dist/zone.js"></script>
        <script src="lib/systemjs/dist/system.src.js"></script>
        <script src="systemjs.config.js"></script>
        <script>
          System.import('main.js').catch(function(err){ console.error(err); });
        </script>
        <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
        <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
        <script src="lib/jquery/dist/jquery.min.js"></script>
        <script src="lib/tether/dist/js/tether.min.js"></script>
        <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
      </head>
      <body>
      <mean-app>
        <h1>Loading...</h1>
      </mean-app>
      </body>
      </html>

express.js：

const config=require("./config");
    const express=require("express");
    const morgan=require("morgan");
    const compress=require("compression");
    const bodyParser=require("body-parser");
    const methodOverride=require("method-override");
    const session=require("express-session");
    const flash=require("connect-flash");
    const passport=require("passport");
    const path=require("path");

    module.exports=function () {
        const app=express();

        //setting logging for dev and compression for prod
        if(process.env.NODE_ENV === 'development'){
            app.use(morgan('dev'));
        }else if(process.env.NODE_ENV === 'production'){
            app.use(compress());
        }

         //setting body parser that provides several middleware to handle the request data
         app.use(bodyParser.urlencoded({
            extended:true
         }));
         app.use(bodyParser.json());

         //using the method-override module provides DELETE and PUT HTTP verbs legacy support
        app.use(methodOverride());

        //Configuring sessions
        app.use(session({
            saveUninitialized:true,
            resave:true,
            secret:config.sessionSecret
        }));

        //Configuring the view system
        app.set("views","./app/views");
        app.set("view engine","ejs");

        //Configuring Connect-Flash
        app.use(flash());

        //Configuring Passport
        app.use(passport.initialize());
        app.use(passport.session());

        //importing routes
        require("../app/routes/index.routes")(app);
        require("../app/routes/users.routes")(app);

        //Serving static files
        app.use("/",express.static("./public"));
        //including the Angular library files
        app.use("/lib",express.static(path.resolve("./node_modules")));

        return app;
      };

system.config.js：

/**
  * System configuration for Angular 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',
         'main': 'main.js',

          // 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: 'systemjs-angular-loader.js'
            }
          }
         },
          rxjs: {
              defaultExtension: 'js'
           }
         }
        });
      })(this);

我在浏览器控制台中收到以下错误：

Please click to open the image

有人知道我的配置有什么问题吗？

【问题讨论】：

错误信息？控制台错误？编译器错误？请给我们更多信息，我们很乐意提供帮助！ :D
你是否使用 npm install 命令安装了所有依赖项？
将此声明移到顶部：<script src="lib/systemjs/dist/system.src.js"></script>
是的，我已经安装了所有的依赖项。
谢谢..我按照你说的做了，但没有任何帮助。我已将所有代码库发布在 github 上，请查看：github.com/rahiakela/angular-mean-project

标签： node.js angular mean-stack

【解决方案1】：

您的 Node.js 版本是多少？我检查了 mean.io nodejs 版本是 v4.x。（“node -v”在 Linux 中）。我之前在 nodejs v4 上遇到过很多 angular 4 的问题。然后我将它升级到 v7.10.0（对于 angular 4 应该至少是 v6），之后问题就解决了.

希望这对您也有帮助。

【讨论】：

嗨，我正在使用这个 NodeJS 版本-v6.10.1